我正在尝试设置一个使用webpack，typeScript，react和semantic-ui-react的项目。
当我运行yarn run start时，我收到以下错误：
yarn run v1.3.2
$ webpack --config webpack.prod.babel.js
clean-webpack-plugin: /home/nathan.jones/Projects/my_project/dist has been removed.
Hash: fe11c4f68633b60f3925
Version: webpack 3.10.0
Time: 33566ms
Asset Size Chunks Chunk Names
images/icons.svg 444 kB [emitted] [big]
fonts/icons.eot 166 kB [emitted]
fonts/icons.woff2 77.2 kB [emitted]
fonts/icons.woff 98 kB [emitted]
fonts/icons.ttf 166 kB [emitted]
images/flags.png 28.1 kB [emitted]
vendor.c818f10aeab0f3bfd9d1.js 418 kB 0 [emitted] [big] vendor
app.7b83116ba71a9fcf8e82.js 1.38 kB 1 [emitted] app
manifest.7d42facf685791692fbd.js 1.42 kB 2 [emitted] manifest
styles.css 566 kB 1 [emitted] [big] app
index.html 684 bytes [emitted]
[145] (webpack)/buildin/module.js 517 bytes {0} [built]
[371] multi react react-dom semantic-ui-react 52 bytes {0} [built]
[419] (webpack)/buildin/global.js 509 bytes {0} [built]
[723] ./src/index.tsx 2.42 kB {1} [built] [4 errors]
+ 732 hidden modules
ERROR in ./src/index.tsx
[tsl] ERROR in /home/nathan.jones/Projects/my_project/src/index.tsx(29,12)
TS2339: Property 'Item' does not exist on type '(...args: any[]) => any'.
ERROR in ./src/index.tsx
[tsl] ERROR in /home/nathan.jones/Projects/ezrodeo/src/index.tsx(12,15)
TS2339: Property 'Item' does not exist on type '(...args: any[]) => any'.
ERROR in ./src/index.tsx
[tsl] ERROR in /home/nathan.jones/Projects/ezrodeo/src/index.tsx(14,16)
TS2339: Property 'Item' does not exist on type '(...args: any[]) => any'.
当我取出对Menu.Item的引用时，错误就会消失。
这是我的webpack配置。
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import webpack from 'webpack';
export default {
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test: /\.(ttf|eot|woff|woff2)$/,
loader: "file-loader",
options: {
name: "fonts/[name].[ext]",
},
},
{
test: /\.(png|svg)$/,
loader: "file-loader",
options: {
name: "images/[name].[ext]",
},
},
]
},
plugins: [
new ExtractTextPlugin('styles.css'),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: Infinity,
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest'
}),
],
resolve: {
extensions: ['.tsx', '.ts', '.js', '.css']
},
};
import merge from 'webpack-merge';
import UglifyJSPlugin from 'uglifyjs-webpack-plugin';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import CleanWebpackPlugin from 'clean-webpack-plugin';
import webpack from 'webpack';
import path from 'path';
import common from './webpack.common.babel.js';
export default merge(common, {
entry: {
vendor: [
'react',
'react-dom',
'semantic-ui-react',
],
app: './src/index.tsx'
},
plugins: [
new CleanWebpackPlugin(['dist']),
new UglifyJSPlugin({
sourceMap: true
}),
new HtmlWebpackPlugin({
title: 'EZ Rodeo',
template: 'src/index-prod.html'
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
})
],
output: {
filename: '[name].[chunkhash].js',
path: path.resolve(__dirname, 'dist')
}
});
{
"name": "my_project",
"version": "0.1.0",
"description": "Project description",
"main": "index.js",
"scripts": {
"build": "webpack --config webpack.prod.babel.js",
"start": "webpack-dev-server --open --config webpack.dev.babel.js"
},
"devDependencies": {
"@firebase/app-types": "^0.1.0",
"@types/react": "^16.0.34",
"babel-core": "^6.26.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-register": "^6.26.0",
"clean-webpack-plugin": "^0.1.17",
"css-loader": "^0.28.8",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.6",
"html-webpack-plugin": "^2.30.1",
"name-all-modules-plugin": "^1.0.1",
"react-hot-loader": "^3.1.3",
"style-loader": "^0.19.1",
"ts-loader": "^3.2.0",
"typescript": "^2.6.2",
"uglifyjs-webpack-plugin": "^1.1.6",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.11.0",
"webpack-merge": "^4.1.1"
},
"dependencies": {
"firebase": "^4.8.1",
"mobx": "^3.4.1",
"mobx-react": "^4.3.5",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-router-dom": "^4.2.2",
"semantic-ui-css": "^2.2.12",
"semantic-ui-react": "^0.77.2"
}
}
import 'semantic-ui-css/semantic.min.css';
import * as React from 'react';
import * as ReactDOM from 'react-dom'
import { Menu } from 'semantic-ui-react';
export default class MenuExampleBasic extends React.Component {
render() {
return (
<Menu>
<Menu.Item>
Editorials
</Menu.Item>
</Menu>
)
}
}
ReactDOM.render(<MenuExampleBasic />, document.getElementById('root'));
{
"compilerOptions": {
"outDir": "./dist/",
"noImplicitAny": true,
"module": "es6",
"target": "es5",
"jsx": "react",
"allowJs": true
}
}
{
"presets": ["env"],
"plugins": ["react-hot-loader/babel"]
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="root"></div>
</body>
</html>
答案 0 :(得分：1)
--module=es6编译器选项是尝试解析semantic-ui-react的跳闸打字稿。我不确定为什么，但删除它会让webpack完成而不会出错。