Webpack esm 模块解析“警告 in../node_modules/react-bootstrap/esm/index.js”

Question

为了在我的项目中使用 Typescript，我遵循了React & Webpack 。 对webpack.config.js进行一些更改后，我收到很多警告消息。

我猜 webpack 尝试解决 ESM 但失败了，因为所有警告都包括esm/index.js 。

从'react-bootstrap'导入导航

npx webpack

警告在../node_modules/react-bootstrap/esm/index.js 59:0-85
“在'./ResponsiveEmbed'中找不到导出'ResponsiveEmbedProps'
@./view/AccountModal.js
@./view/index.js
@./app/App.js
@./index.js
@multi @babel/polyfill./index.js

// 很多相同的警告...

webpack.config.js

这是我的webpack.config.js文件

module.exports = {
  context: path.resolve(__dirname, 'src'),

  mode: 'development',
  devtool: 'source-map',

  entry: [ '@babel/polyfill', './index.js'],
  
  devServer : {
    historyApiFallback: true
  },

  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/',
  },

  plugins: [new HtmlWebpackPlugin({
      template: "./index.html"
  })],

  module: {
    rules: [
      {
        test: /\.ts(x?)$/,
        exclude: /node_modules/,
        use: [
            {
                loader: "ts-loader"
            }
        ]
      },
      { 
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: [{
              loader: 'babel-loader',
              options: {
                  presets: ["@babel/preset-env", "@babel/preset-react"]
              }
          }]
      },
    ]
  },
  externals: {
    "react": "React",
    "react-dom": "ReactDOM"
  }
};

Answer 1

这是反应引导问题。

这是相关的Github 问题

回滚react-bootstrap版本解决了我的问题。

npm 卸载 react-bootstrap
npm 安装 react-bootstrap@1.0.1