Webpack/React.js：你可能需要一个额外的加载器来处理这些加载器的结果

Posted 2023-03-13

【中文标题】Webpack/React.js：你可能需要一个额外的加载器来处理这些加载器的结果

【英文标题】：Webpack/React.js: You may need an additional loader to handle the result of these loaders

【发布时间】：2020-02-29 01:23:00

【问题描述】：

./productFlow/index.tsx 中的错误 3:12 模块解析失败：意外 令牌 (3:12) 使用这些加载器处理文件：* ./node_modules/awesome-typescript-loader/dist/entry.js 你可能需要一个 额外的加载器来处理这些加载器的结果。 |进口 从“反应”做出反应； |导出默认道具 => 返回（|<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;

【参考方案1】：

这不是 webpack 问题，它是 tsconfig 放松的。将此行添加到 tsconfig.json 后，加载器识别 JSX：

  "jsx": "react",