Typescript/Webpack：モジュール 'react-select'を見つけることができません

Question

私はtypescriptでReactを設定しようとしています。私はチュートリアル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：webpackはDEFIあるべきで

{ 
    "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 Select from反応-SELECT`を

を行う必要がありexport default Selectのようなものである場合にはimport = require('react-select')

を行う必要がありexport = Selectのようなものですあなたが明示的に各エクスポートをインポートしたり、import * as Select from 'react-select'

0を行う必要があります複数の名前付き輸出の場合 import {Select} from 'react-select'

を行います

react-selectのタイプによると、hereのように、モジュールはその内容をファイルの最後にデフォルトの書き出しで書き出します。だからimport ReactSelect from 'react-select'はあなたのために働くべきである

Answer 2

設定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' 
}; 

インクルードは、ブラウザとsource-map-loader負荷のより容易なデバッグのためのブラウザにソースマップに活字体を可能にしますts-loader負荷：そのような何かを定義さ。

何かが必要な場合や、私が誤解した場合はお知らせください。