javascript - node_modules/@types/react/index"' ไม่มีการส่งออกเริ่มต้น

กำลังพยายามแปลงแอป React ให้เป็น Typescript และเจอข้อผิดพลาดแปลก ๆ

node_modules/@types/react/index"' ไม่มีการส่งออกค่าเริ่มต้น

node_modules/@types/react-dom/index"' ไม่มีการส่งออกค่าเริ่มต้น

ฉันมีการตั้งค่า tsconfig และ webpack สำหรับ TypeScript ของฉัน หลังจากเปลี่ยนสกุลไฟล์ของคอมโพเนนต์นี้จาก .js เป็น .tsx ฉันได้รับข้อผิดพลาดสำหรับ React

คิดเห็นยังไง?

tsconfig.json

{
  "compilerOptions": {
    "outDir": "./moonholdings/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es5",
    "jsx": "react"
  },
  "include": [
    "./app/**/*"
  ]
}

webpack

/* eslint-disable no-console */
import webpack from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import CopyWebpackPlugin from 'copy-webpack-plugin';
import path from 'path';
import chalk from 'chalk';

const moonholdings = path.resolve(__dirname, 'moonholdings');
const app = path.resolve(__dirname, 'app');
const nodeModules = path.resolve(__dirname, 'node_modules');

const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  template: path.join(__dirname, '/app/index.html'),
  inject: 'body'
});

const ExtractTextPluginConfig = new ExtractTextPlugin({
  filename: 'moonholdings.css',
  disable: false,
  allChunks: true
});

const CopyWebpackPluginConfigOptions = [{
  from: 'app/static',
  to: 'static/'
}];

const CopyWebpackPluginConfig = new CopyWebpackPlugin(CopyWebpackPluginConfigOptions);

const PATHS = {
  app,
  build: moonholdings
};

const LAUNCH_COMMAND = process.env.npm_lifecycle_event;

const isProduction = LAUNCH_COMMAND === 'production';
process.env.BABEL_ENV = LAUNCH_COMMAND;

const productionPlugin = new webpack.DefinePlugin({
  'process.env': {
    NODE_ENV: JSON.stringify('production')
  }
});

const base = {
  // entry: ['babel-polyfill', PATHS.app],
  entry: './app/index.tsx',
  output: {
    path: PATHS.build,
    publicPath: '/',
    filename: 'index_bundle.js'
  },
  resolve: {
    modules: [app, nodeModules],
    extensions: ['.ts', '.tsx', '.js', '.json']
  },
  module: {
    rules: [
      // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
      { test: /\.tsx?$/, loader: 'awesome-typescript-loader' },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.s?css/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)/,
        loader: 'file-loader?name=[path][name].[ext]'
      },
      // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
      { enforce: 'pre', test: /\.js$/, loader: 'source-map-loader' }
    ]
  }
};

const developmentConfig = {
  devtool: 'cheap-module-inline-source-map',
  devServer: {
    contentBase: moonholdings
  },
  plugins: [
    CopyWebpackPluginConfig,
    ExtractTextPluginConfig,
    HtmlWebpackPluginConfig
  ]
};

const productionConfig = {
  devtool: 'cheap-module-source-map',
  plugins: [
    CopyWebpackPluginConfig,
    ExtractTextPluginConfig,
    HtmlWebpackPluginConfig,
    productionPlugin
  ]
};

console.log(`${chalk.magenta('฿')} ${chalk.green('yarn run:')} ${chalk.red(LAUNCH_COMMAND)}`);

export default Object.assign(
  {}, base,
  isProduction === true ? productionConfig : developmentConfig
);

คำตอบ #1

คุณสามารถใช้ไวยากรณ์นี้ได้โดยเพียงเพิ่ม "allowSyntheticDefaultImports": true และ "esModuleInterop": true ลงใน tsconfig.json ของคุณ

{
  ...
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
  },
  ...
}

คำตอบ #2

คุณต้องใช้ import * as React from "react"; แทน import React from 'react'

สิ่งนั้นเกิดขึ้นเพราะ babel (ตัวที่คุณเคยใช้ก่อนหน้านี้) สมมติว่า modules.export เป็น default export ในขณะที่ typescript (ตัวที่คุณกำลังใช้ตอนนี้) ไม่สมมติแบบนั้น