Lightweight eject

I really like this project and the philosophy of not limiting the user by anything. Escape hatches via .babelrc and razzle.config.js are good, but I somehow miss full control over the config. I know that I could easily fork this project and adapt the code to my needs, but this is not my goal (probably I am totally wrong and forking is this way to go).

To explain my problem, take a look at the following use case. Let’s say I want to handle SVG files differently in webpack than other media files (for instance with svg-inline-loader).

As svg has been defined in https://github.com/jaredpalmer/razzle/blob/eb222411de3695789ec4495d3cbf2d41fc11e4be/packages/razzle/config/create-config.js#L88 (Note: This is an older version of create-config.js but it is still good to explain the problem), I had to do the following in razzle.config.js:

module.exports = {
  modify: (config, { target, dev }) => {
    // ...
    const loaders = [
      {
        test: /\.svg$/,
        use: [
          {
            loader: 'svg-inline-loader'
          }
        ]
      }
    ];

    // Exclude svg from default config
    // Dangerous as we are depending on the order of the predefined rules (!)
    config.module.rules[2].test = /\.(jpg|jpeg|png|gif|eot|ttf|woff|woff2)$/;

    config.module.rules = loaders.concat(config.module.rules);
    // ...
    return config;
  }
};

As already mentioned in the comment, this adaption is error prone, as it will break if any new rules are added or the order of them are changed. It would be cool to have something like an eject command in create-react-app, but probably only exposing the resulting webpack.config.js for prod and dev. Any thoughts?

[jchook]

You lose a lot of buy-in when you refuse to provide an easy opt-out.

[jaredpalmer]

You are correct that this particular way of modifying razzle is very error prone and fragile. Instead of using the Array[i]. I suggest using Array.find or Array.findIndex. This is much more future proof as it will continue to work, even if a rule changes position.

As for razzle eject, it’s totally possible to build. To make life easier we would probably want to refactor create-config into 4 webpack.config.<target>.<env>.js files. Similarly to CRA, I’d want to setup a form asking why people are ejecting in the first place.