Typescript/Webpack：找不到模塊'react-select'

Question

我試圖設置與打字稿的反應，我跟着教程here。我安裝了react-select，但是當我嘗試引用它時，出現編譯器錯誤Build: Cannot find module 'react-select'，如果我嘗試從cmd行運行webpack，則會得到相同的錯誤。

我試圖包括以下加載程序作爲建議在github上修復，但我得到了同樣的錯誤。

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

任何想法？

UPDATE：

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" 
    }, 
}; 

Answer 1

首先，您需要安裝react-select的類型才能導入它。一旦你這樣做去安裝的類型，並檢查正在完成的出口類型。

在情況下，你需要像export = Select你需要做import = require('react-select')

在情況下，它是像export default Select你需要做import Select from反應，select`

在命名出口的情況下，即export {Select}不要import {Select} from 'react-select'

在多個命名的出口情況下，你必須明確地導入每個出口或做import * as Select from 'react-select'

根據react-select的類型，如here所示，模塊通過文件底部的默認導出來導出其內容。所以import ReactSelect from 'react-select'應該爲你工作

Answer 2

配置Typsecript與webpack應該DEFI斯內德這樣的事情：

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負荷使打字稿到瀏覽器和source-map-loader負載源映射到瀏覽器更容易調試。

讓我知道你是否需要任何東西或者我誤解了你。