Does anyone have v4 working with IE11?

[robations]

❓Question

I upgraded to v4 recently and my build output is full of ()=> lamda expressions.

The package.json browserslist key explicitly references IE11 (of course I would like to drop support...).

I added a .babelrc file like so:

{
    "presets": [
        [
            "razzle/babel",
            {
                "preset-env": {
                    "targets": {
                        "ie": "11"
                    },
                    "debug": true
                }
            }
        ]
    ],
    "plugins": []
}

and I can see from the debug output that babel is picking up IE as a target:

$ razzle build                                                                                                                                                                                                                              
If you have issues with css make sure postcss resolves to v8.2.4.
See: https://razzlejs.org/getting-started#common-problems

CssMinimizerPlugin currently uses clean-css,
we will switch to cssnano once it supports postcss v8.2.4.

Compiling client default build...

@babel/preset-env: `DEBUG` option

Using targets:
{
  "ie": "11"
}

Using modules transform: auto

Using plugins:
  proposal-numeric-separator { ie }
  proposal-logical-assignment-operators { ie }
  proposal-nullish-coalescing-operator { ie }
  proposal-optional-chaining { ie }
  proposal-json-strings { ie }
  proposal-optional-catch-binding { ie }
  transform-parameters { ie }
  proposal-async-generator-functions { ie }
  proposal-object-rest-spread { ie }
  transform-dotall-regex { ie }
  proposal-unicode-property-regex { ie }
  transform-named-capturing-groups-regex { ie }
  transform-async-to-generator { ie }
  transform-exponentiation-operator { ie }
  transform-template-literals { ie }
  transform-literals { ie }
  transform-function-name { ie }
  transform-arrow-functions { ie }
  transform-classes { ie }
  transform-object-super { ie }
  transform-shorthand-properties { ie }
  transform-duplicate-keys { ie }
  transform-computed-properties { ie }
  transform-for-of { ie }
  transform-sticky-regex { ie }
  transform-unicode-escapes { ie }
  transform-unicode-regex { ie }
  transform-spread { ie }
  transform-destructuring { ie }
  transform-block-scoping { ie }
  transform-new-target { ie }
  transform-regenerator { ie }
  proposal-export-namespace-from { ie }
  syntax-dynamic-import
  syntax-top-level-await

Using polyfills: No polyfills were added, since the `useBuiltIns` option was not set.
Compiled client default build successfully. // n.b. I've added polyfills, just not core-js

File sizes after gzip:

  305.31 KB  build/public/static/js/client.ee8d0dba.js
  40.13 KB   build/public/static/js/659.c6a40d4a.chunk.js
  13.22 KB   build/public/static/js/857.2b0263d9.chunk.js
  8.34 KB    build/public/static/js/637.7246e52b.chunk.js
  8.33 KB    build/public/static/js/661.acb19678.chunk.js
  4.15 KB    build/public/static/js/629.359b9ead.chunk.js
  1.28 KB    build/assets.json
  443 B      build/public/static/css/client.7759d4da.css
  409 B      build/public/index.html
  187 B      build/public/manifest.json

✨  Done in 75.51s.

I would have expected this to be enough to force transpilation to ES5, but with the addition of babel-preset-razzle I'm not really sure what's going on. The first lamda expression that comes up is from babel itself, a helper for Object.defineProperty.

Does anyone have any experience with this, or have a better idea how this should work?

[fivethreeo]

https://razzlejs.org/docs/customization#options - browserslist
you need polyfills for ie 11

[fivethreeo]

not sure about targets in preset-env

[fivethreeo]

are you using typescript? if so you may need to import polyfills before the actual entrypoint

https://github.com/jaredpalmer/razzle/blob/master/examples/with-webpack-public-path/src/client.js

https://razzlejs.org/docs/customization#polyfills

[robations]

Thanks @fivethreeo for suggestions. Polyfills !== transpilation, e.g. this won't help IE 11 to parse arrow functions, const etc. As far as I'm aware polyfills are being loaded okay. I already had browserslist set up and this includes "IE 11, >0.5%...". It was all working with razzle v3, which makes me wonder whether to revert back.

There's something else weird going on.

I tried separating the client entry point into two files as suggested but nothing seems to make any difference. I should start a fresh project and see if I can reproduce the problem, but of course this is time no one is giving me today.

[fivethreeo]

I think you may need to add the external modules with arrow functions to include in babelrule.

Added docs now: https://razzlejs.org/docs/customization#transpilation-of-external-modules

[batusai513]

@robations Hi, were you able to make it work on ie11?, I'm facing the same situation after updating razzle to v 4.2.7, several packages are not being transformed

[robations]

Hi @batusai513, I managed to get the IE11 requirement for the project dropped 🎉 and no one has complained yet!

But I came across a problem with Webpack on another project last week that made me think of this issue. I'll check this out and get back to you in case it solves it.

[robations]

@batusai513 Yes, I just did a very quick test and I think the problem is with Webpack rather than Babel (or Razzle). In newer versions, it defaults to packing each module inside arrow functions rather than function () {}.

In razzle.config.js I've just changed modifyWebpack to add the target property which should revert this behaviour:

    modifyWebpackConfig(opts) {
        const config = opts.webpackConfig;

        return {
            ...config,

            target: ["web", "es5"],
            // any other config changes here
        };
    }

It seems like Webpack doesn't take account of Babel or browserslist for the actual packaging.

Let me know how you get on.

[batusai513]

Thanks for your quick reply, I'll try adding it and rebuild, i wish I can remove ie11 support as you did, but German people really like their ie11

[batusai513]

@robations Hi, i was able to make it work on old browsers, for future reference this is what I had to do:

const babelLoaderFinder = makeLoaderFinder('babel-loader');
const urlLoderFinder = makeLoaderFinder('url-loader');

const externalModulesToTranspile = [
  'make-plural',
  'zustand',
  'react-children-utilities',
  '@lingui/core',
  '@lingui/react',
];

modifyWebpackConfig({
    env: {
      target, // the target 'node' or 'web'
      dev, // is this a development build? true or false
    },
    webpackConfig, // the created webpack config
    webpackObject, // the imported webpack node module
    options: {
      razzleOptions, // the modified options passed to Razzle in the `options` key in `razzle.config.js` (options: { key: 'value'})
      webpackOptions, // the modified options that will be used to configure webpack/ webpack loaders and plugins
    },
    paths, // the modified paths that will be used by Razzle.
  }) {
    const config = webpackConfig;

    const babelLoader = config.module.rules.find(babelLoaderFinder);
    const urlLoader = config.module.rules.find(urlLoderFinder);

    if (target === 'web') {
      // Support babel runtime helpers, the imports are not fully specified (they don't have the file extension on the import side)
      config.module.rules.push({
        test: /\.m?js/,
        resolve: {
          fullySpecified: false,
        },
      });
    }

    if (target === 'web' && !dev) {
      // Manually add a list of external modules that needed to be transpiled to `babel-loader` include array:
      externalModulesToTranspile.forEach((mod) => {
        babelLoader.include.push(getPackagePath(mod));
      });

      // Transpile webpack internals to ES5
      config.target = ['web', 'es5'];
    }

    return config;
}

Thanks again for your help.

[fivethreeo]

To see the actual code you can try:

//./razzle.config.js
'use strict';

module.exports = {
  modifyWebpackConfig({
    webpackConfig,
  }) {
    webpackConfig.optimization.minimize = false
    webpackConfig.optimization.minimizer = []
    return webpackConfig;
  }
};