remarkablemark / html-react-parser

📝 HTML to React parser.
https://b.remarkabl.org/html-react-parser
MIT License
2.11k stars 129 forks source link

Rollup build breaks in IE11 #214

Closed apolio closed 3 years ago

apolio commented 3 years ago

Expected Behavior

There should be es5 code only in production build.

Actual Behavior

Similar to 213, there is ES6 code introduced and it breaks the build in IE11.

Configuration

This happens only when building the project in rollup. It doesn't happen for example in Storybook.

See below rollup.config.js

import typescript from 'rollup-plugin-typescript2';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import { terser } from 'rollup-plugin-terser';
import analyze from 'rollup-plugin-analyzer';
import postcss from 'rollup-plugin-postcss';
import replace from '@rollup/plugin-replace';

export default {
  input: 'src/index.ts',
  output: [
    {
      dir: './lib',
      format: 'es',
    },
    { dir: './commonjs', format: 'cjs' },
  ],
  // this specifies which libraries we do NOT want to bundle as they are peer dependencies
  external: ['react', 'react-dom', 'moment', 'styled-components'],
  // This preserve src/ file structure and separated components
  preserveModules: true,
  plugins: [
    replace({
      // This environment variable is used to add an specific extension to the
      // dynamic import of icons, this should only be present on the final builds
      // for external consumption.
      'process.env.ICON_EXTENSION': JSON.stringify('.js'),
      'process.env.NODE_ENV': JSON.stringify('production'),
    }),
    postcss({
      minimize: true,
    }),
    // resolves node modules and add them into the bundle
    resolve({
      browser: true,
      preferBuiltins: false,
    }),
    typescript({
      useTsconfigDeclarationDir: true,
    }),
    // required to compile external npm packages bundled using cjs modules (rollup and webpack require ESM modules to process a bundle)
    commonjs({
      exclude: ['react', 'react-dom', 'moment', 'styled-components'],
      namedExports: {
        'node_modules/react-dates/index.js': [
          'DayPickerRangeController',
          'CalendarInfoPositionShape',
          'DateRangePicker',
          'SingleDatePicker',
        ],
        'node_modules/xss/lib/index.js': ['DEFAULT', 'whiteList'],
        'node_modules/domhandler/lib/index.js': ['Element'],
      },
    }),
    // uglify and minification of bundle
    terser(),
    // create a report in the console for bundle size and tree shaking
    analyze({
      // summaryOnly: true,
      limit: 0, // to avoid console spam of multiple files
    }),
  ],
};

Following the suggestion in #213 for webpack, I tried introducing this equivalent config in rollup.

By default it has the value ['module', 'main'], so I added

mainFields: ['main', 'module']

It still didn't work. I tried also downgrading to 1.2.0. Although Storybook worked fine with 1.2.0 (including in IE11), the rollup build could not be done successfully. It would fail due to missing packages.

Environment

remarkablemark commented 3 years ago

Thanks for opening this issue @apolio.

I can confirm this bug, which was introduced in #210. I will work on a fix.

remarkablemark commented 3 years ago

Published v1.2.3:

npm:

npm i html-react-parser@1.2.3

Yarn:

yarn add html-react-parser@1.2.3