strip-ansi causing problems with ie 11

[kbrah]

I am using neutrino and neutrinojs/react in my project and IE throws syntax error and points to the following code:

// "./node_modules/webpack-dev-server/node_modules/strip-ansi/index.js": // (function(module, exports, __webpack_require__) {

"use strict"; eval("\nconst ansiRegex = __webpack_require__(\"./node_modules/webpack-dev-server/node_modules/ansi-regex/index.js\");\n\nmodule.exports = input => typeof input === 'string' ? input.replace(ansiRegex(), '') : input;\n//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9ub2RlX21vZHVsZXMvd2VicGFjay1kZXYtc2VydmVyL25vZGVfbW9kdWxlcy9zdHJpcC1hbnNpL2luZGV4LmpzLmpzIiwic291cmNlcyI6WyJ3ZWJwYWNrOi8vLyh3ZWJwYWNrKS1kZXYtc2VydmVyL25vZGVfbW9kdWxlcy9zdHJpcC1hbnNpL2luZGV4LmpzP2UwMzIiXSwic291cmNlc0NvbnRlbnQiOlsiJ3VzZSBzdHJpY3QnO1xuY29uc3QgYW5zaVJlZ2V4ID0gcmVxdWlyZSgnYW5zaS1yZWdleCcpO1xuXG5tb2R1bGUuZXhwb3J0cyA9IGlucHV0ID0+IHR5cGVvZiBpbnB1dCA9PT0gJ3N0cmluZycgPyBpbnB1dC5yZXBsYWNlKGFuc2lSZWdleCgpLCAnJykgOiBpbnB1dDtcblxuXG5cbi8vLy8vLy8vLy8vLy8vLy8vL1xuLy8gV0VCUEFDSyBGT09URVJcbi8vICh3ZWJwYWNrKS1kZXYtc2VydmVyL25vZGVfbW9kdWxlcy9zdHJpcC1hbnNpL2luZGV4LmpzXG4vLyBtb2R1bGUgaWQgPSAuL25vZGVfbW9kdWxlcy93ZWJwYWNrLWRldi1zZXJ2ZXIvbm9kZV9tb2R1bGVzL3N0cmlwLWFuc2kvaW5kZXguanNcbi8vIG1vZHVsZSBjaHVua3MgPSAwIl0sIm1hcHBpbmdzIjoiQUFBQTtBQUNBO0FBQ0E7QUFDQTsiLCJzb3VyY2VSb290IjoiIn0=\n//# sourceURL=webpack-internal:///./node_modules/webpack-dev-server/node_modules/strip-ansi/index.js\n");

I noticed that there is arrow function inside the eval and IE 11 does not support arrow functions. Perhaps this problem is somehow similar to this: https://github.com/facebookincubator/create-react-app/pull/2692?

My neutrinorc.js is fairly basic but here it is just in case:

module.exports = {
    options: {
        port: 3000
    },
    use: [
        [
            '@neutrinojs/react',
            {
                html: {
                    title: 'project'
                }
            }
        ],
        [
            '@neutrinojs/style-loader',
            {
                test: /\.less$/,
                loaders: [
                    {
                        loader: 'less-loader',
                        useId: 'less-loader',
                        options: {
                        }
                    }
                ]
            }
        ],
        (neutrino) => neutrino.config.resolve.modules.add(neutrino.options.source),
        (neutrino) => neutrino.config.output.publicPath('/')
    ],
};

[edmorley]

Hi! I think this is webpack/webpack-dev-server#1278.

[eliperelman]

From the Neutrino React docs:

https://neutrino.js.org/packages/react/

• Extends from @neutrinojs/web
  • Modern Babel compilation supporting ES modules, last 2 major browser versions, async functions, and dynamic imports

So we support the last 2 major browser versions. Right now those settings look like:

options.targets.browsers = [
  'last 2 Chrome versions',
  'last 2 Firefox versions',
  'last 2 Edge versions',
  'last 2 Opera versions',
  'last 2 Safari versions',
  'last 2 iOS versions'
];

If you want to support IE, you'll have to override this list in options with your own browser list:

module.exports = {
  options: {
    port: 3000
  },
  use: [
    ['@neutrinojs/react', {
      html: {
        title: 'project'
      },
      targets: {
        browsers: [
          'last 2 Chrome versions',
          'last 2 Firefox versions',
          'last 2 Edge versions',
          'last 2 Opera versions',
          'last 2 Safari versions',
          'last 2 iOS versions',
          'ie 11'
        ]
      }
    }]
  ]
};

Give that a shot!

Also, you can inline your style information to the style option, so you don't have to explicitly install the style middleware. Here's what your simplified .neutrinorc.js file could look like:

module.exports = {
  options: {
    port: 3000
  },
  use: [
    ['@neutrinojs/react', {
      html: {
        title: 'project'
      },
      targets: {
        browsers: [
          'last 2 Chrome versions',
          'last 2 Firefox versions',
          'last 2 Edge versions',
          'last 2 Opera versions',
          'last 2 Safari versions',
          'last 2 iOS versions',
          'ie 11'
        ]
      },
      style: {
        test: /\.less$/,
        loaders: [{
          loader: 'less-loader',
          useId: 'less-loader'
        }]
      }
    }],
    (neutrino) => {
      neutrino.config
        .output
          .publicPath('/').end()
        .resolve
          .modules
            .add(neutrino.options.source);
  ],
};

[eliperelman]

I'd say @edmorley's answer is more correct in this particular case, but my comment about browser support will be important if you want to compile your code to support IE11.

[eliperelman]

Looks like dev-server is trying to fix this in:

https://github.com/webpack/webpack-dev-server/pull/1273

[kbrah]

@eliperelman Thanks for the tips! Indeed adding ie 11 in target browsers did not fix the issue but good to know!

[kbrah]

@eliperelman They seem to have fixed the issue. Do we need some changes in neutrino to use the latest webpack-dev-server?

[kbrah]

nevermind I upgraded my packages and it works now!