带有反应选择模块的打字稿。构建失败答案

【问题标题】：Typescript with react-select module. Build failed带有反应选择模块的打字稿。构建失败
【发布时间】：2019-11-14 08:56:02
【问题描述】：

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

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

我想我一定是在 typescript 配置或 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/**/*"
    ]
}

【问题讨论】：

你安装@types/react-select了吗？
您好，感谢您的提问，是的，我安装了@types/react-select。我用这些信息更新我的问题。
嗨@Prvz，我发现了问题..... webstorm 已经为 NoOptionsMessage 生成了一个自动导入语句。无论如何，它已经从“react-select/src/components/Menu”的 import {NoOptionsMessage} 生成了一个导入；文件。所以这个错误主要是我自己产生的，也可能是webstorm产生的一点点^^

标签： reactjs typescript webpack react-select

【解决方案1】：

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

那是有问题的代码行：

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

Webstorm 可以为 import 语句提供很好的支持，但我认为有时检查 webstorm 生成了什么是好的。

真丢脸 ;-)

【讨论】：

【解决方案2】：

检查您的导入语句，它必须是这样的。

import Select from "react-select"

【讨论】：