1

I changed the configuration of my app following the webpack documentation: https://webpack.js.org/migrate/5/. After this, the app runs successfully on chrome and edge, but not working in IE11.enter image description here

I have a .browserslistrc file with IE11 inside, also changed target: ['web', 'es5'], then add import 'react-app-polyfill/ie11'; import 'react-app-polyfill/stable'; to src/index.js but the problem is still there. I use the following babel configuration:

  "presets": [
    [
      "@babel/preset-env", 
      { 
        "useBuiltIns": "entry",
        "corejs": 3
      }
    ],
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-transform-object-assign", 
    "@babel/plugin-proposal-object-rest-spread", 
    "@babel/plugin-transform-regenerator", 
    "@babel/plugin-proposal-class-properties", 
    "@babel/plugin-transform-runtime"
  ]
}
1
  • I follow the steps in this blog to setup a React app with Webpack and Babel, then I add target: ['web', 'es5'] in webpack.config.js and it works well in IE 11. Could you please provide a minimal code snippet which can reproduce the issue? So that we can have a test and see how to help.
    – Yu Zhou
    Commented Nov 1, 2021 at 5:36

1 Answer 1

0

After a lot of investigations I found this:

https://github.com/feross/buffer/commit/840160f352ff0d8e88d4ac308a1640fd278f50fc

So the solution to my problem was to configure babel-loader to transpile this package:

{
    test: /\.js$/,
    include: [
       path.join(__dirname, 'src'),
       path.join(__dirname, 'node_modules/buffer'),
    ],
    loader: 'babel-loader',
}
1
  • 1
    Thanks for posting the solution for this issue. You can mark your answer as an accepted answer. It can help other community members in future in similar kind of issues. Thanks for your understanding.
    – Yu Zhou
    Commented Nov 2, 2021 at 1:27

Not the answer you're looking for? Browse other questions tagged or ask your own question.