1

I am trying to compile a react project into a single file so that it can be included inside a quite old jsp application. I am using rollup for that.

It just shows a blank page in IE11, without any console error. I have tried multiple ways/configurations from last 3-4 days with no success.

This is my rollup.config.js:

export default {
    input: 'src/index.js',
    output: {
        file: '../compiled/index.js',
        format: 'iife',
        strict: false,
        name: 'window',
        intro: 'var global = typeof self !== undefined ? self : this;',
    },
    plugins: [
        resolve({
            browser: true
        }),
        replace({
            'process.env.NODE_ENV': JSON.stringify( 'production' )
        }),
        commonjs({
            include: /node_modules/,
        }),
        babel({
            exclude: "node_modules/**", // only transpile our source code
            presets: [
                [
                  "@babel/preset-env",
                  {
                    targets: {
                      browsers: "> 0.5%, ie >= 11"
                    },
                    modules: false,
                    spec: true,
                    useBuiltIns: "usage",
                    forceAllTransforms: true,
                    corejs: {
                      version: 3,
                      proposals: false
                    }
                  }
                ],
                "@babel/preset-react"
            ]
        })
    ]
};

In index.js of react app, I do include:

import "core-js/stable";
import 'regenerator-runtime/runtime';

This setup do generates a single file as expected. It runs fine in other browsers except IE.

I took some ideas from this Stack Overflow question.

Any clues, suggestions or ideas, all welcome. If any more details needed, please let me know.

Thanks!

isherwood
  • 58,414
  • 16
  • 114
  • 157
abhinav
  • 341
  • 1
  • 4
  • 18
  • Have you done any debugging to see where the script fails? Is the top-level index file being loaded and run? – isherwood Oct 19 '20 at 14:59
  • I confirm that both index.html and the compiled js files get loaded. And console displays no error. (I am first attempting to run outside JSP project.) – abhinav Oct 19 '20 at 15:07
  • Have you tried whether the native react project can work well on IE 11 without rollup? React itself contains syntax such as es6 and is not compatible with IE. You need to refer to [these steps](https://stackoverflow.com/questions/56435589/starter-create-react-app-with-ie11-polyfill-import-still-aborts-in-ie11/56439822#56439822) to make react app work in IE 11. Please make sure the react app can work well on IE 11 before using rollup. – Yu Zhou Oct 20 '20 at 09:26
  • I should have mentioned this, sorry. React app itself (without rollup) is working fine on IE11. – abhinav Oct 20 '20 at 10:27
  • We can't reproduce your issue with only the config file. There might be many causes of the issue. We can compile js file, but it may be different from your thoughts and purposes and I don't know how html and js files refer to each other. Besides, does the data in html come from js entirely? I suggest you to share the directory structure as much as possible, and the steps to reproduce the issue. You can also provide a reproducible sample project without sensitive information. – Yu Zhou Oct 22 '20 at 09:51

0 Answers0