Reactjs 为什么我会得到这个';财产';项目';不存在于类型';(…args:any[])=>;任何';我的网页包生成输出出错?

Reactjs 为什么我会得到这个';财产';项目';不存在于类型';(…args:any[])=>;任何';我的网页包生成输出出错?,reactjs,typescript,webpack,semantic-ui,semantic-ui-react,Reactjs,Typescript,Webpack,Semantic Ui,Semantic Ui React,我正在尝试设置一个使用webpack、typeScript、react和语义ui react的项目 当我运行“纱线运行开始”时,出现以下错误: 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: w

我正在尝试设置一个使用webpack、typeScript、react和
语义ui react
的项目

当我运行“纱线运行开始”时,出现以下错误:

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'.
当我取出对
菜单项的引用时,错误消失了

这是我的网页配置

webpack.common.babel.js webpack.prod.babel.js package.json src/index.tsx B.法律改革委员会 index-prod.html


编译器选项--module=es6
是typescript试图解析的
语义ui react
。我不知道为什么,但是删除它会让webpack无误地完成。

你没有提供你实际使用的webpack配置(
webpack.dev.babel.js
)是的,它在
webpack.common.babel.js
下面。对不起,我是说
webpack.prod.babel.js
哦,你说得对!问题已编辑。dev和prod网页包都给出了相同的错误。
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>