1

Compiling down React with parcel to be compatible with browsers Chrome, Firefox, Safari, Edge, and IE (10/11)

Have tried using babel with core-js and every time it will load with a syntax error on IE 10 and 11. Have used in .babelrc @babel/preset-react and @babel/preset-env. The react configuration is set to compile down to dom instead of React.createElement and the env is set to target ie10 and useBuiltins is set to entry with an import of core-js.

"build:site": "parcel build site/site.tsx --out-dir public",

Back in march there was a security update released that has net this issue across the board on all react sites I have worked on. Other sites have used webpack with the same failures

Error Message:

SCRIPT1002: Syntax error
File: site.js, Line: 1685, Column: 32
module.exports=(e=>encodeURIComponent(e).replace(/[!'()*]/g,e=>"%".concat(e.charCodeAt(0).toString(16).toUpperCase())));

Reproducible Code: I am unable to reproduce error from a fresh app yet

Alexander Shea
  • 31
  • 6
  • What error it throws in detail? Could you please provide the [steps to reproduce](https://stackoverflow.com/help/minimal-reproducible-example)? I create a React app using Parcel according to the steps in [this article](https://blog.jakoblind.no/react-parcel/#create-a-react-app-with-parcel) and it can run well in IE11. You could also check my answer in another thread about [how to support React app in IE11](https://stackoverflow.com/questions/56435589/starter-create-react-app-with-ie11-polyfill-import-still-aborts-in-ie11/56439822#56439822). – Yu Zhou Aug 07 '19 at 08:58
  • @YuZhou I do apologize but I have been unable to recreate the issue. I have removed minify done by parcel and have the same issue with a slight difference in syntax. I am trying to deduce where it is occurring and have tried your options presented along with the custom option present on babels and reacts sites. Below is the slight different syntax but I do not expect it to be helpful. ```module.exports = str => encodeURIComponent(str).replace(/[!'()*]/g, x => "%".concat(x.charCodeAt(0).toString(16).toUpperCase())); },{}],"pWxZ":[function(require,module,exports) { 'use strict';``` – Alexander Shea Aug 10 '19 at 00:11
  • @YuZhou what i can tell is that line presented is the only place that the `=>` operator is used and that is what IE is upset with about. Thank you for taking the time to look at this issue. – Alexander Shea Aug 10 '19 at 00:19
  • You're welcome. Yes, you couldn't use `=>` the arrow function without having a shim to handle it in IE. The issue might caused by ES6 features. Also try `npm install core-js`. You could refer to [this thread](https://stackoverflow.com/questions/43756211/best-way-to-polyfill-es6-features-in-react-app-that-uses-create-react-app). – Yu Zhou Aug 12 '19 at 09:41
  • Sorry for the delay in providing a response. The problem was that parcel was not transpiling node packages. This was achievable with webpack v4 by using the babel-loader and not excluding the node_modules directory. By doing so the node modules are transpiled as well and allowed for the site to render. – Alexander Shea Sep 03 '19 at 18:34

1 Answers1

0

Parcel by default does not transpile node modules, but they still get bundled when portions of a library is needed. By switching to webpack v4 and not excluding the node_modules directory, the bundled code, along with the library code, will get transpiled. This method does require import 'core-js' and the use of babel-loader. For a simple example:

module.exports = {
  entry: './app.js',
  modules: {
    rules: [
      {
        test: /\.m?js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  resolve: {
    extensions: [
      '.js',
      '.jsx'
    ]
  }
  output: {
    filename: 'app.js',
    path: './public'
  }
};
Alexander Shea
  • 31
  • 6