Webpack / React.js: вам может понадобиться дополнительный загрузчик для обработки результатов этих загрузчиков

Question

ОШИБКА в ./productFlow/index.tsx 3:12 Сбой синтаксического анализа модуля: неожиданный токен (3:12) Файл был обработан с помощью следующих загрузчиков: * ./node_modules/awesome-typescript-loader/dist/entry.js Вам может понадобиться дополнительный загрузчик для обработки результата этих загрузчиков. |импорт React из 'реакции';|экспорт по умолчанию props => {return (| <p>Compiled Successfully</p> |);

Кажется, что происходит сбой при попадании в код JSX (в файле .tsx). Не способен ли at-loader справиться с этим? Я искал реактивный загрузчик, но примеры, которые я видел, были ближе к моему:

const webpack = require("webpack");
const dotEnvWebpack = require("dotenv-webpack");
const path = require("path");

const webpackConfiguration = {
  entry : {
    productFlow : path.join(__dirname, "productFlow/index.tsx")
    , registrationFlow : path.join(__dirname, 'registrationFlow/index.tsx')
  }
  , output : {
    filename : "outputFiles/[name].output.js"
    , path : path.resolve(__dirname, "")
    , publicPath : '/'
  }
  , watch : true
  , watchOptions : { aggregateTimeout : 300 }
  , devtool : 'inline-source-map'
  , mode : "development"
  , devServer : {
    port: 3000
    , contentBase : path.join(__dirname, "devIndex.html")
    , hot : true
    , historyApiFallback : true
  }
  , plugins : [
    new webpack.HotModuleReplacementPlugin(),
    new dotEnvWebpack
  ]
  , node : {
    fs: "empty" // for dotenv to work correctly
  }
  , resolve : { extensions : ['.ts', '.tsx', '.js'] }
  , module : {
      rules : [{
        test : /\.tsx?$/
        , use : 'awesome-typescript-loader'
        , exclude : [/node_modules/, /outputFiles/]
      }]
  }
  , externals : {
      'react' : 'React'
      , 'react-dom' : 'ReactDOM'
  }
};

module.exports = webpackConfiguration;

Answer 1

Это была не проблема веб-пакета, а tsconfig. Загрузчик распознал JSX после добавления этой строки в tsconfig.json:

  "jsx": "react",