Webpack esm module resolve “WARNING in ../node_modules/react-bootstrap/esm/index.js”

Question

I followed React & Webpack in order to use Typescript on my project. After apply some change to webpack.config.js, I get a lot of WARNING message.

I guess webpack try to resolve ESM but failing because all warning include esm/index.js.

import Nav from 'react-bootstrap'

npx webpack

WARNING in ../node_modules/react-bootstrap/esm/index.js 59:0-85
"export 'ResponsiveEmbedProps' was not found in './ResponsiveEmbed'
@ ./view/AccountModal.js
@ ./view/index.js
@ ./app/App.js
@ ./index.js
@ multi @babel/polyfill ./index.js

// a lot of same WARNINGs...

webpack.config.js

Here is my webpack.config.js file

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

It is react-bootstrap issue.

Here is related Github issue

roll back react-bootstrap version solved my problem.

npm uninstall react-bootstrap
npm install [email protected]