Typescript/Webpack: 找不到模块'react-select'。

Question

我正在尝试使用typescript设置React，我遵循了这里的教程。我安装了react-select，但是当我尝试引用它时，我会得到一个编译器错误Build: Cannot find module 'react-select'，如果我尝试从cmd行运行webpack，我会得到相同的错误。

我尝试包含以下加载器作为github上建议的修复方法，但我仍然会得到相同的错误。

 {
    test: /\.js$/,
    include: path.join(__dirname, 'node_modules', 'react-select'),
    loader: 'jsx-loader',
  }

有什么想法吗？

更新：

tsconfig.json

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es6",
        "jsx": "react"
    },
    "files": [
        "./typings/index.d.ts",
        "./src/components/Hello.tsx",
        "./src/index.tsx"
    ]
}

package.json:

{
  "name": "react-typescript-setup",
  "version": "1.0.0",
  "main": "./dist/bundle.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "webpack": "webpack -w"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^15.3.1",
    "react-dom": "^15.3.1",
    "react-select": "^1.0.0-rc.1"
  },
  "devDependencies": {
    "css-loader": "^0.25.0",
    "react-select": "^1.0.0-rc.1",
    "source-map-loader": "^0.1.5",
    "style-loader": "^0.13.1",
    "ts-loader": "^0.8.2",
    "typings": "^1.3.3"
  },
  "description": ""
}

webpack.config.js

var path = require('path');

module.exports = {
    entry: "./src/index.tsx",
    output: {
        path: __dirname,
        filename: "./dist/bundle.js",
    },

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

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

    module: {
        loaders: [
            // All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'.
            { test: /\.tsx?$/, loader: "ts-loader" },
            {
                test: /\.css$/,
                loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
            }
        ],

        preLoaders: [
            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
            { test: /\.js$/, loader: "source-map-loader" }
        ]
    },

    // When importing a module whose path matches one of the following, just
    // assume a corresponding global variable exists and use that instead.
    // This is important because it allows us to avoid bundling all of our
    // dependencies, which allows browsers to cache those libraries between builds.
    externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    },
};

- user1641172

Answer 1

首先，您需要安装react-select的typings才能导入它。一旦完成，转到已安装的typings并检查正在导出的类型。

如果是像export = Select这样的东西，您需要执行import = require('react-select') 如果是像export default Select这样的东西，您需要执行import Select from 'react-select' 如果是命名导出，即export {Select}，则需要执行import {Select} from 'react-select' 如果有多个命名导出，则必须明确导入每个导出或执行import * as Select from 'react-select' 根据此处显示的react-select的typings，该模块通过文件底部的默认导出导出其内容。因此，import ReactSelect from 'react-select'应该对您有用

- Nahush Farkande

---

现在，类型定义已经内置在react-select包中，所以不再需要安装@types/react-select了。 - undefined

Answer 2

我查看了我的包并发现node_modules中缺少@types的react-select包，因此我运行了这个命令# npm install --save @types/react-select，问题得到解决。

- Sachin Shrivastav

Answer 3

我通过指向dist文件进行修复：

import CreatableSelect from "react-select/creatable/dist/react-select-creatable.cjs";

- Yoann Buzenet

Answer 4

使用webpack配置Typsecript应该定义为以下内容：

module.exports = {
  entry: "./app/boot",
  output: {
    path: __dirname,
    filename: "./dist/bundle.js"
  },
  resolve: {
    extensions: ['', '.js', '.ts']
  },
  module: {
    loaders: [
      { test: /\.ts/,   loader: ["ts-loader"], exclude: /node_modules/ },
    ],
    preLoaders: [
      // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
      { test: /\.js$/, loader: "source-map-loader", exclude: ['node_modules', 'ext-*', 'lib', 'tools'] }
    ]
  },
  debug: true,
  devtool: 'source-map'
};

ts-loader 负责将 TypeScript 编译成浏览器可读的 JavaScript 代码，source-map-loader 则负责加载源映射以便更轻松地进行调试。

如果您需要任何帮助或者我误解了您的意思，请告诉我。

- Kesem David

---

嗯，那基本上就是我所拥有的内容，我只是安装了react-select的类型定义文件，这改变了错误信息，现在它说无法使用此结构导入。 - user1641172

这个构造是什么？ - Kesem David

任何ES6的import语句、Import * as Select、Import Select from、import {Select} from.. - user1641172

但是如果我使用require，它可以工作.. import Select = require("react-select"); - user1641172

你能添加一个配置的图片吗？ - Kesem David