Reactが定義されていません（未定義の 'createElement'プロパティを読み取れません）

Question

作業中のReactJSアプリケーションをTypeScriptに変換しようとしています。しかし、私はデフォルトのエクスポートを使用してインポート文を使用したい

import * as React from "react"; 

ので、私は、このように反応する荷重に反応するインポートすると

import React from "react"; 
import * as ReactDOM from "react-dom"; 
import Application from "./Application"; 

console.log(React); // undefined 

ReactDOM.render(
    <Application/>, window.document.getElementById("application-wrapper") 
); 

コンソールは<Application />

でエラーがスローされます私はすべての既存のコンポーネントで、このインポートの構文を使用して反応するインポートします

import React, {Component} from "react"; 

export default class Whatever extends Component<Props, State> { 
... 
} 

私tsconfig.jsonファイルは、合成のデフォルトを許可するこの行が含まれています

"allowSyntheticDefaultImports": true 

マイwebpack.config.jsファイル：

let path = require("path"); 
let config = { 
    entry: "./src/main.tsx", 
    output: { 
     path: path.resolve(__dirname, "build"), 
     filename: "bundle.js" 
    }, 
    devtool: "source-map", 
    resolve: { 
     extensions: [".ts", ".tsx", ".js", ".jsx"] 
    }, 
    module: { 
     loaders: [ 
      { 
      test: /\.tsx?$/, 
      loader: "ts-loader", 
      exclude: /node_modules/ 
      } 
     ]  
    } 
}; 

module.exports = config; 

ない私はここに欠けているものを確認してください....

Answer 1

モジュールの解像度が少しありますTypescriptはBabelとWebpackとは異なるため、複雑です。 https://github.com/Microsoft/TypeScript/issues/5565#issuecomment-155216760

allowSyntheticDefaultImportsは、デフォルトの書き出しがないモジュールからのデフォルトのインポートを許可するようにTypescriptに指示しますが、発行されるコードは変更されません。そのため、モジュールを解決する責任をWebpackまたはBabelに移す必要があります。

Typescript設定ファイルでmoduleResolution〜ES6のセットを達成するには パイプラインは次のようになりますときに実際にあなた

TSコード=>（TypescriptCompiler）=> JSコードES6モジュールを搭載した=>（WebPACKのモジュールリゾルバ）=> JSコード