remarkablemark/html-react-parser

es6 code sneak in / breaks ie11

lhtdesignde opened this issue ยท 9 comments

Expected Behavior

There should be es5 code only is dist build.

Actual Behavior

When building the latest version 1.2.1 with webpack for production, it adds es6 code into the dist build.
I'm not 100% sure why that is, as I couldn't find the "const" dist build itself.
For me this new addition gets also compiled:
4caa88c#diff-d6299b5bb2afc0956126a0adb12fd89829e01a4cc025e7277a092228b96f32e4R4

If any helpful, this is how it looks when compiled:
Screen Shot 2021-01-21 at 13 58 10

When I downgrade to version 1.2.0, that is fine and IE11 works. Is there a chance to make this es5 code?

Environment

  • Version: 1.2.1
  • Platform: mac os big sur, webpack 5
  • Browser: IE11

Thanks for opening this issue @lhtdesignde

This is happening because webpack prioritizes module over main from package.json:

So instead of:

// webpack.config.js
module.exports = {
  //...
  resolve: {
    mainFields: ['browser', 'module', 'main'],
  },
};

See if you can do:

// webpack.config.js
module.exports = {
  //...
  resolve: {
    mainFields: ['browser', 'main', 'module'],
  },
};

See resolve.mainFields

Also, what version of webpack are you using?

webpack 5.16.0

SO good! Thanks for this answer @remarkablemark. That made it work!

Great to hear! Can this issue be closed @lhtdesignde?

yes thanks!

Just a heads up @lhtdesignde, I published v1.2.4, which refactors ES6 to ES5 syntax in index.mjs.

This should fix the root cause of your issue (you can undo your webpack.config.js changes).

thank you very much! I prefer that since the change in my config caused my vendor file to significantly increase in size.

You're welcome! Let me know if you encounter any issues.