IE11: SCRIPT1006: Missing ')'

[foubei]

Expected behavior

Working on all browsers except IE 11

Current behavior

It's throwing this error on IE 11 (SCRIPT1006: Missing ')')
I noticed that the bug appears after I implement the IntlProvider

Step to reproduce for BUG REPORT

https://wechat.silentsystem.cn

babel.config.js:

module.exports = {
  plugins: [
    [
      'import',
      {
        libraryName: 'antd',
        style: true,
      },
      'antd',
    ],
    'lodash',
    'react-hot-loader/babel',
    [
      '@babel/proposal-class-properties',
      {
        loose: true,
      },
    ],
    '@babel/syntax-dynamic-import',
  ],
  presets: [
    [
      '@babel/preset-env',
      {
        corejs: 3,
        debug: true,
        useBuiltIns: 'usage',
      },
    ],
    '@babel/react',
  ],
};

webpack.config.js:

{
  test: /\.(j|t)sx?$/i,
  exclude: /node_modules/,
  include: path.resolve(
    __dirname,
    'src',
  ),
  use: [{
    loader: 'babel-loader',
    options: {
      cacheDirectory: !isProduction,
    },
  }, {
    loader: 'eslint-loader',
    options: {
      cache: !isProduction,
      emitError: isProduction,
      emitWarning: isProduction,
      failOnError: isProduction,
      failOnWarning: isProduction,
    },
  }],
}

.browserslistrc:

last 2 versions
ie >= 11

Your Environment

Executable	Version
npm ls react-intl	3.5.0
npm ls react	16.11.0
npm --version	6.11.3
node --version	10.15.0

OS	Version
Windows	10

Browser	Version
IE	11

[longlho]

/~https://github.com/formatjs/react-intl/blob/master/docs/Getting-Started.md#webpack might fix your issue

[foubei]

I have tried both solutions and none works :(

[ghostd]

Hi,

Did you try the following workaround (related to the Intl.js polyfill)?

Intl.__disableRegExpRestore()

andyearnshaw/Intl.js#270

[jesse-mm]

I've got the exact same issue also looking into it. I'm also seeing some es6 code that should have been transpiled.

[jesse-mm]

@foubei I think I've found the issue and probably it's caused by babel-loader automatically picking up babel config. In the react-intl package there is a distributed babel.config.js which babel-loader will pick-up and use those settings. Disabling this behavior can be done by forcing it to use your .babelrc using the babel options babelrc: false, configFile: path.resolve(__dirname, './path/to/.babelrc) in babel-loader.

I'm not sure if the babel.config.js needs to be packaged, or was included intentionally with react-intl. I think a proper fix here would be to remove this configuration from the npm package or move it into a folder when package.

Could you try adjust your webpack config like this:

webpack.config.js:

{
  test: /\.(j|t)sx?$/i,
  exclude: /node_modules/,
  include: [
    path.resolve(__dirname, 'src'),
    path.resolve(__dirname, '../node_modules/react-intl'),
    path.resolve(__dirname, '../node_modules/intl-messageformat'),
    path.resolve(__dirname, '../node_modules/intl-messageformat-parser')
]
  use: [{
    loader: 'babel-loader',
    options: {
      cacheDirectory: !isProduction,
      babelrc: false,
      configFile: path.resolve(__dirname, './.babelrc')
    },
  }, {
    loader: 'eslint-loader',
    options: {
      cache: !isProduction,
      emitError: isProduction,
      emitWarning: isProduction,
      failOnError: isProduction,
      failOnWarning: isProduction,
    },
  }],
}

[foubei]

@foubei I think I've found the issue and probably it's caused by babel-loader automatically picking up babel config. In the react-intl package there is a distributed babel.config.js which babel-loader will pick-up and use those settings. Disabling this behavior can be done by forcing it to use your .babelrc using the babel options babelrc: false, configFile: path.resolve(__dirname, './path/to/.babelrc) in babel-loader.

I'm not sure if the babel.config.js needs to be packaged, or was included intentionally with react-intl. I think a proper fix here would be to remove this configuration from the npm package or move it into a folder when package.

Could you try adjust your webpack config like this:

webpack.config.js:

{
  test: /\.(j|t)sx?$/i,
  exclude: /node_modules/,
  include: [
    path.resolve(__dirname, 'src'),
    path.resolve(__dirname, '../node_modules/react-intl'),
    path.resolve(__dirname, '../node_modules/intl-messageformat'),
    path.resolve(__dirname, '../node_modules/intl-messageformat-parser')
]
  use: [{
    loader: 'babel-loader',
    options: {
      cacheDirectory: !isProduction,
      babelrc: false,
      configFile: path.resolve(__dirname, './.babelrc')
    },
  }, {
    loader: 'eslint-loader',
    options: {
      cache: !isProduction,
      emitError: isProduction,
      emitWarning: isProduction,
      failOnError: isProduction,
      failOnWarning: isProduction,
    },
  }],
}

I've tried your solution, but it didn't work ... sorry for my late reply

PS: I've upgraded react-intl to latest version.

[longlho]

@foubei it is removed from the latest version

[jesse-mm]

@foubei I had to do several things. For me the thing the finally fixed it was using babel.config.js in project root. As the .babelrc is file-relative and babel-config.js is project wide. When I converted my .babelrc to a project wide config it finally solved my issues.

It's definitely a transpile issue you'll need to address with your webpack config.

[foubei]

@jesse-mm can you please share your configs?