Joi: IE 11 Syntax Error

[olegrjumin]

Support plan

• which support plan is this issue covered by? (e.g. Community, Core, Plus, or Enterprise): Community
• is this issue currently blocking your project? (yes/no): yes
• is this issue affecting a production system? (yes/no): yes

Context

• node version: v12.12.0
• module version with issue: 16.1.8
• last module version without issue: -
• environment (e.g. node, browser, native): node
• used with (e.g. hapi application, another framework, standalone, ...): react
• any other relevant information:

What are you trying to achieve or the steps to reproduce?

Project is bundled with Parcel.
Open browser IE11 v11.1504.16299.0
Get an error in a console

Polyfills used in index.js

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

Package.json

"babel": {
        "presets": [
            "@babel/preset-env",
            "@babel/preset-react"
        ],
        "plugins": [
            "@babel/plugin-proposal-class-properties",
            "@babel/plugin-proposal-export-default-from",
            "@babel/plugin-transform-runtime"
 },
 "browserslist": [
        ">0.2%",
        "not dead",
        "ie 11",
        "not op_mini all"
  ],

By removing @hapi/joi, IE opens page as expected, without any errors.

What was the result you got?

SCRIPT1002: Syntax error

What result did you expect?

Page opening in IE 11, without errors. In the end, do you guys support IE11? Thank you

[Marsup]

The error seems to come from your code though. We don't explicitly support IE11 but it seems to work if you include polyfills (see #2229).

[olegrjumin]

@Marsup Thank you for your answer, but debugger opens joi-browser.min.js? And if ill remove this lib, everything works as expected. But I will try adding suggested polyfill anyways..

[sergej-s]

@olegrjumin Hi! I got the same one. It is because of an arrow function included into joi-browser.min.js

@Marsup Is possible to add compilation under IE11 by default?

I've managed to workaround the issue by forcing babel transpilation for joi-browser.min.js.
babel.config.js:

overrides: [{
    include: './app/node_modules/@hapi/joi',
        presets: [
          [
            '@babel/preset-env',
            {
              modules: 'commonjs',
              targets: {
                safari: '10',
                ie: '11',
              },
              // debug: true,
            },
          ],
        ],
        plugins: ['@babel/plugin-transform-arrow-functions'],
...

And import 'fastestsmallesttextencoderdecoder'; have to be added to make TextEncoder work.

Check also the issue https://github.com/webpack/webpack/issues/4817#issuecomment-310587950

[hueniverse]

IE 11 makes the bundle bigger and is not a requirement for everyone so I made the decision to exclude it. You can just run your own build like you did.

[olegrjumin]

@sergej-s could you please show the whole babel.config.js file ? I've included an override, but it didn't work for me. And I am using parcel, seems that their no support for babel overrides

[sergej-s]

@hueniverse sounds reasonable :)

@sergej-s could you please show the whole babel.config.js file ? I've included an override, but it didn't work for me. And I am using parcel, seems that their no support for babel overrides

@olegrjumin Sorry, I've missed your message :(:(. But anyway let the config be posted here. I have several babel configs but the combined one should look like this:

bable.config.js = {
    // Since babel ignores all files outside the cwd, it does not compile sibling packages
    // So rewrite the ignore list to only include node_modules and core-js + babel-runtime
    // https://github.com/babel/babel/issues/8309#issuecomment-439406408
    // https://github.com/babel/babel/issues/8731
    // https://github.com/webpack/webpack/issues/4817#issuecomment-365757064
    ignore: ['node_modules', /[\/\\]core-js/, /@babel[\/\\]runtime/],
    // Packages that are needed to be transpiled by babel
    include: [
      path.resolve('./src'),
      path.resolve('./node_modules/superagent'),
      path.resolve('./node_modules/ansi-regex'),
      path.resolve('./node_modules/strip-ansi'),
      path.resolve('./node_modules/react-intl'),
      path.resolve('./node_modules/@hapi/joi'),
  ],
    presets: [
      [
        '@babel/preset-env',
        {
          modules: false,
          useBuiltIns: 'entry',
          corejs: 3,
          targets: {
            safari: '10',
            ie: '11',
          },
          // debug: true,
        },
      ],
      '@babel/preset-react',
    ],
    plugins: [
      'lodash',
      // Stage 2
      ['@babel/plugin-proposal-decorators', { legacy: true }],
      '@babel/plugin-proposal-export-namespace-from',
      '@babel/plugin-proposal-throw-expressions',
      // Stage 3
      '@babel/plugin-syntax-dynamic-import',
      '@babel/plugin-syntax-import-meta',
      ['@babel/plugin-proposal-class-properties', { loose: false }],
      '@babel/plugin-proposal-json-strings',
      ['@babel/plugin-transform-runtime', {
        absoluteRuntime: true,
        corejs: false,
        helpers: false,
        regenerator: true,
        useESModules: false,
      }],
      'macros', // to make jest tests working for storyshots
    ],
    overrides: [
      {
        include: './node_modules/@hapi/joi',
        presets: [
          [
            '@babel/preset-env',
            {
              modules: 'commonjs',
              targets: {
                safari: '10',
                ie: '11',
              },
            },
          ],
        ],
        plugins: ['@babel/plugin-transform-arrow-functions'],
      },
    ],
  };

[olegrjumin]

@sergej-s Thanks! Could not get it working with parcel, seems that they do not support babel overrides yet, because adding an override was not making any difference. But eventually we decided to use yup for validations, which works in IE.

[brvenkat]

@sergej-s I am running into the same issue of hapi/joi not working in IE11. Tried the same config as you had but still facing issues, do you know if i am missing anything?

I am using Babel 6 and have the following config in .babelrc
"presets": [
"env",
"react"
]
"plugins": [
["transform-runtime", {
"helpers": false,
"polyfill": false,
"regenerator": true
}],
"transform-es2015-arrow-functions"
]

webpac.config.js
rules: [
{
test: /.js$/,
include: [
path.resolve(__dirname, '..', 'node_modules/@hapi/joi')
],
loader: 'babel-loader',
},

package.json
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-eslint": "^8.2.3",
"babel-jest": "^20.0.0",
"babel-loader": "^7.1.4",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-es2015-arrow-functions": "^6.22.0",
"babel-plugin-transform-es2015-classes": "^6.24.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.1",
"babel-preset-flow": "^6.23.0",
"babel-preset-power-assert": "^2.0.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-watch": "^2.0.7",

I also installed fastestsmallesttextencoderdecoder and imported it at start up

[sergej-s]

@brvenkat could you send the exact output from IE11 devtools to see what failed exactly?
For me that override above works good. With '@babel/preset-env', modules set to 'commonjs' and '@babel/plugin-transform-arrow-functions' + targets of course.