How to use Razzle with BrowsersList?

[silviubogan]

Hello!

In my Razzle app (TS + React) I tried to put different browserslist configuration in package.json but the bundle size did not change significantly (less than 30 B of changes in the bundle). Is it sure that the configuration from package.json is all I need to change how WebPack produces the bundle?

Thanks.

[fivethreeo]

Browserslist only affects postcss, but should be enough to change package.json

[fivethreeo]

Should affect babel too but does not now i think, babel loader needs fixing in razzle it seems

[fivethreeo]

https://github.com/jaredpalmer/razzle/blob/master/packages/razzle/config/loadRazzleConfig.js#L44
https://github.com/jaredpalmer/razzle/blob/master/packages/razzle/config/createConfigAsync.js#L291

razzle/packages/razzle/config/babel-loader/razzle-babel-loader.js

Line 119 in a10a994

const presetOptions = Object.assign({}, cfg.options);

razzle/packages/babel-preset-razzle/index.js

Line 31 in a10a994

const presetEnvConfig = Object.assign(

So you can pass it down to the babel preset by modifying babelrule

[silviubogan]

Sorry for the dumb question, but what is babelrule and how can I change it? Should make a .babelrc file and put the browserslist inside it?

[fivethreeo]

razzle/packages/razzle/config/createConfigAsync.js

Line 286 in a10a994

webpackOptions.babelRule = {

[fivethreeo]

use modifyWebpackOptions

razzleOptions.browserslist
webpackOptions.babelRule.options['preset-env']

https://razzlejs.org/docs/customization#extending-webpack
https://razzlejs.org/docs/customization#writing-plugins

[fivethreeo]

Hm, my idea won't work ... :(

https://babeljs.io/docs/en/babel-preset-env#browserslist-integration

[fivethreeo]

Or, maybe ..

webpackOptions.babelRule.options['preset-env'].targets = razzleOptions.browserslist

[silviubogan]

In modifyWebpackConfig, opts.options.webpackOptions.babelRule is like this:

{
  test: /\.(js|jsx|mjs|ts|tsx)$/,
  include: [
    '/path/to/my/project/dir/src',
    '/path/to/my/project/dir/src',
    /react-syntax-highlighter/,
    /react-virtualized/,
    /react-select-virtualized/,
    /tiny-slider/
  ],
  use: [
    {
      loader: '/path/to/my/project/dir/.yalc/razzle/config/babel-loader/razzle-babel-loader.js',
      options: [Object],
      ident: 'razzle-babel-loader'
    }
  ]
}

so the following code throws an Error when running npm start:

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

  if (opts.env.target === "web") {
    options.babelRule.options['preset-env'].targets = opts.options.razzleOptions.browserslist;
  }
  // ...

because options.babelRule.options is undefined.

[silviubogan]

It seems that there can't be both use and options inside babelRule.

[silviubogan]

I am currently looking into razzle-babel-loader.js to find how can I send browserslist to Babel.

[fivethreeo]

But only if target is web

[fivethreeo]

modifyWebpackOptions not Config 😀

[silviubogan]

modifyWebpackOptions({ env: { target, dev }, options: { pluginOptions, razzleOptions, webpackOptions } }) {
  webpackOptions.notNodeExternalResMatch = (request) => new RegExp('react-syntax-highlighter|'
    + 'react-virtualized|'
    + 'react-select-virtualized|'
    + 'tiny-slider').test(request);

  webpackOptions.babelRule.include = webpackOptions.babelRule.include.concat([
    /react-syntax-highlighter/,
    /react-virtualized/,
    /react-select-virtualized/,
    /tiny-slider/,
  ]);

  if (target === "web") {
    webpackOptions.babelRule.use[0].options.targets = razzleOptions.browserslist;
  }

  return webpackOptions;
},

Error: Unknown option: .targets. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.

If I directly assign to use[0].targets:

Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.

• configuration.module.rules[0].use[0] has an unknown property 'targets'. These properties are valid:
  object { ident?, loader?, options? }

[fivethreeo]

And babelRule.use[0].options

[silviubogan]

This does not change the dev bundle size at all:

webpackOptions.babelRule.use.options = { targets: razzleOptions.browserslist };

But at least it does not throw exceptions.

[fivethreeo]

I looked closer at it, have been giving you bad advice, has to be done in .babelrc ;)

[fivethreeo]

https://razzlejs.org/docs/customization#customizing-babel-config

[silviubogan]

I've put these in .babelrc:

{
  "presets": [
    "razzle/babel"
  ],
  "plugins": [],
  "targets": "> 0.25%, not dead"
}

and it tells me that targets is invalid property

[fivethreeo]

{
  "presets": [
    [
      "razzle/babel",
      {
        "preset-env": {"targets": "> 0.25%, not dead"},
      }
    ]
  ]
}