带有react-select模块的打字稿。建立失败

Question

该错误直接发生在webpack-dev服务器上，当我尝试生成构建时。

经过一些研究，我在ts-config中添加了noImplicitAny选项。但这无法解决我对react-select模块的问题。

我认为我一定在打字稿配置或webpack配置中缺少某些内容。因为我没有找到与此模块相关的问题。

也许有人可以给我提示我应该在配置中进行哪些更改，或者可能我在webpack配置中缺少了某些内容。
实际上，我对打字稿和反应并不陌生，也许这是主要问题。

我在下面添加了配置文件和控制台错误，也许我错过了一些重要的东西。

感谢您的支持

版本

• 反应选择： 3.0.4
• 打字稿： 3.1.6
• 反应： 16.8.6
• @ types / react-select： 3.0.0

来自打字稿的错误消息：

ERROR in ./node_modules/react-select/src/components/Menu.js 5:7
Module parse failed: Unexpected token (5:7)
You may need an appropriate loader to handle this file type.
| import {
|   Component,
>   type Element as ReactElement,
|   type ElementRef,
|   type Node,

当前的webpack配置：

项目的Webpack配置

const path = require('path');
const webpack = require('webpack');
module.exports = {
    entry: "./src/index.tsx",
    output: {
        filename: "bundle.js",
        path: __dirname + "/dist"
    },

    // Enable sourcemaps for debugging webpack's output.
    devtool: "source-map",

    resolve: {
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: [".ts", ".tsx", ".js", ".json"]
    },

    module: {
        rules: [

            { test: /\.tsx?$/, loader: "awesome-typescript-loader" , options: {
                    cacheDirectory:false,
                    plugins:['react-hot-loader/babel']
                }},


            { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
        ]
    },


    externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    },


    //Dev server config section
    devServer: {
        contentBase: path.join(__dirname ),
        compress: false,
        watchContentBase: true,
        watchOptions: {
            aggregateTimeout: 300,
            poll: 1000,
            ignored: ['node_modules', 'build', 'dist'],
        },
        port: 9000,
        host:"0.0.0.0",
        hot:true
      }
};

TS配置：

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es5",
        "jsx": "react",
        "allowJs": true,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": false,
        "noEmit": true,
        "lib": [
            "dom",
            "dom.iterable",
            "esnext",
            "es2017"
          ]
    },
    "include": [
        "./src/**/*"
    ]
}

Answer 1

我现在解决了这个问题，并且还生成了它;-）（在Webstorm的支持下）

那是有问题的代码行：

import {NoOptionsMessage} from "react-select/src/components/Menu";

Webstorm可以为导入语句提供很好的支持，但是我认为有时候检查一下webstorm产生了什么很好。

对我感到羞耻;-）

Answer 2

检查您的导入声明，它必须是这样的。

import Select from "react-select"