Razzle: Upgrading to webpack 5

[fivethreeo]

I am trying to upgrade razzle to use webpack 5.

Not all webpack official contrib plugins are currently working in webpack 5, currently mini-css-extract plugin, start-server-webpack-plugin (possibly more) is a blocker for webpack 5 in razzle.

Some required changes to just get started using webpack 5 can be found here:

https://github.com/fivethreeo/razzle/tree/webpack5

To test it out:

git clone https://github.com/fivethreeo/razzle.git@webpack5
cd razzle

yarn global add lerna lernaupdate
lerna bootstrap

run tests:

yarn run e2e

start a example:

npm run start --prefix=examples/basic/

build a example:

npm run build --prefix=examples/basic/

update a package in specific razzle packages, run:

lernaupdate

add a package to a razzle package, e.g. lodash to razzle-dev-utils, run:

lerna add --scope=razzle-dev-utils lodash

[nimaa77]

is webpack 5 ready? I think it's under active development

[fivethreeo]

Webpack 5 is in beta. Reached beta 14. Getting closer and tries to be mostly backward compatible. I also am contributing to start-server-plugin. Got «next» working in webpack 5. But webpack 5 is still a moving target as of yet. But doing some alpha releases once it somewhat works could help iron out undetected issues.

[nimaa77]

ok, we do this once you got the access to repo :)
do you have an account on telegram? let's have a chat

[fivethreeo]

razzle works in webpack5! just start-server-webpack-plugin needs a new release :)

[jgcmarins]

That's great news!

[fivethreeo]

1237 circleci checks are passing

[Jordan-Gilliam]

Does this mean razzle supports ssr module federation out of the box? 👀

[fivethreeo]

When this is in I would guess so. But what do you mean? I know webpack but not the terminology.

[Jordan-Gilliam]

I'll play around with this build. The work on htmlPlugin looks great 🛳
webpack docs on module federation

[fivethreeo]

fixed in dev

[roccoluke]

What is the status of this please? Are there plans to include it in upcoming versions of Razzle?

[fivethreeo]

Will be in 4.0, already works in razzle@canary

[roccoluke]

Just a sidenote, I created a new app using 4.0.0-canary.19. It comes with webpack 4.44.1

After updating to webpack 5.14.0, styles stop working. Adding custom loaders in razzle.config or using razzle-plugin-scss, but still not getting it to work.

[fivethreeo]

It worked with 4.44.1 before?

On Fri, 15 Jan 2021 at 15:47, Luke Rocco [e-mail] wrote:

Just a sidenote, I created a new app using 4.0.0-canary.19. It comes with
webpack 4.44.1

After updating to webpack 5.14.0, styles stop working. Adding custom
loaders in razzle.config or using razzle-plugin-scss, but still not getting
it to work.

—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub
https://github.com/jaredpalmer/razzle/issues/1187#issuecomment-760983884,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAAADGXEUPRO5GFCN7IMH5TS2BIPVANCNFSM4KP5ZJUQ
.

--
Øyvind Saltvik

[roccoluke]

Yes, it worked with 4.44.1. Using npx create-razzle-app@canary my-app.

Before:

After:

I also tried using the scss example npx create-razzle-app@canary --example with-scss with-scss

Before:

After:

There are no errors in the terminal in both cases. Just the console error shown in the after images.

[roccoluke]

My second attempt was to add the custom rules below under webpackconfig.module.rules. Updated mini-css-extract-plugin from 0.9.0 to 1.3.4. I have this setup working in a basic react/webpack project. But it breaks when starting the app.

      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: "css-loader",
            options: {
              importLoaders: 1,
            },
          },
          "postcss-loader",
        ],
        exclude: /\.module\.css$/,
      },
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: "css-loader",
            options: {
              importLoaders: 1,
              modules: true,
            },
          },
          "postcss-loader",
        ],
        include: /\.module\.css$/,
      },
      {
        test: /\.scss$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      }

[fivethreeo]

Fixed in v4.0.0-canary.20