试图将React应用转换为Typescript并遇到奇怪的错误。
node_modules / @ types / react / index“'没有默认导出。
node_modules / @ types / react-dom / index“'没有默认导出。
我为打字稿设置了tsconfig和webpack设置。在将该组件的扩展名从.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
);
答案 0 :(得分:17)
您必须使用import * as React from "react";
而不是import React from 'react'
。
之所以会发生这种情况,是因为babel(您之前使用的那个)假定modules.export为默认导出,而打字稿(您现在使用的那个)没有默认导出。
答案 1 :(得分:4)
您可以通过将"allowSyntheticDefaultImports": true
添加到tsconfig.json
答案 2 :(得分:0)
在使用Next.js时遇到类似的问题,发现在这种情况下可以简单地省略import
声明。像下面这样的组件将删除第一行。
import React from "react"; // Delete this line
function MyComponent(): JSX.Element {
return (
<div>MyComponent</div>
);
}
export default MyComponent;
如果需要,仍然可以从React导入组件,钩子等,例如:
import { useState } from "react";
注意,我已经在tsconfig.json
文件中添加了GoalsAndGambles' answer中描述的选项。