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