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는 데피해야와

{ 
    "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에 대한 입력을 설치해야합니다. 일단 그렇게하면 설치된 타이핑으로 가서 수행되는 내보내기 유형을 확인하십시오.

이 경우 당신이 필요라는 이름의 수출의 경우, 당신은 당신이 import Select from 할 필요가 export default Select 같은 것입니다 경우 import = require('react-select')

을 할 필요가 export = Select 같은 반응-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 그런 NED 일 :

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로드합니다.

내가 무엇이 필요하거나 오해했는지 알려주세요.