Builder-Webpack5: Use native features instead of plugins

[7rulnik]

What I did

• Removed Yarn PnP plugin because webpack 5 supports it natively https://webpack.js.org/blog/2020-10-10-webpack-5-release/#resolving
• Used special asset modules instead of file-loader, raw-loader and url-loader https://webpack.js.org/guides/asset-modules/

How to test

Just run some examples with assets.

---

Blocked by #14264

[shilman]

@7rulnik Awesome, tremendous work! 😱😱😱 Given that we are late in the release cycle and these are fairly core changes, I'd like to merge this into 6.3-alpha. Are there any important reasons why we should merge this now (and possibly delay the 6.2 release as a result?). For example, are these breaking changes in builder-webpack5? Thanks for your help and your patience!

[7rulnik]

@shilman no need to rush, but there may be only one reason — not sure that the current config for webpack 5 works with yarn PnP. Have you tested this?

[shilman]

@7rulnik No, I certainly haven't. I'll discuss with @gaetanmaisse who is our local PnP guru. We're calling webpack5 support experimental in 6.2, so I think we can ship without PnP support if it turns out to be broken. Another big limitation is that react-docgen-typescript-plugin needs to be updated for webpack5 support. I'll document these known limitations and then hopefully we can get out fixes early in 6.3.

[shilman]

Merged the blocking PR and will release today FYI

[7rulnik]

@shilman I'm trying to run an example and update test but got error from yarn bootstrap

$ node ../../scripts/prepare.js
Successfully compiled 7 files with Babel (2038ms).

Successfully compiled 7 files with Babel (1133ms).

TSFILE: /Users/v7rulnik/projects/aviasales/oss/storybook/lib/postinstall/dist/ts3.9/frameworks.d.ts
TSFILE: /Users/v7rulnik/projects/aviasales/oss/storybook/lib/postinstall/dist/ts3.9/presets.d.ts
TSFILE: /Users/v7rulnik/projects/aviasales/oss/storybook/lib/postinstall/dist/ts3.9/index.d.ts
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

lerna ERR! yarn run prepare stderr:
ERR! FAILED (ts) :
ERR! FAILED to compile ts: @storybook/postinstall@6.2.0-rc.8
error Command failed with exit code 1.

lerna ERR! yarn run prepare exited 1 in '@storybook/postinstall'
lerna WARN complete Waiting for 5 child processes to exit. CTRL-C to exit immediately.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

```

[shilman]

@7rulnik what's your setup? and what's the actual error? pretty sure this is working for me

MMBP15:storybook shilman$ npx sb info

Environment Info:

  System:
    OS: macOS Mojave 10.14.6
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 12.21.0 - ~/n/bin/node
    Yarn: 1.22.10 - ~/n/bin/yarn
    npm: 6.14.11 - ~/n/bin/npm
  Browsers:
    Chrome: 89.0.4389.90
    Firefox: 85.0.2
    Safari: 14.0.3

[7rulnik]

@shilman it's weird because I copy-pasted all info from the console and there is not an exact error. I decided to debug a bit the prepare script, but after reboot, all works fine. By the way, I'm on M1 MacBook

Environment Info:

  System:
    OS: macOS 11.2
    CPU: (8) x64 Apple M1
  Binaries:
    Node: 14.15.4 - ~/.nvm/versions/node/v14.15.4/bin/node
    Yarn: 1.22.10 - /opt/homebrew/bin/yarn
    npm: 6.14.10 - ~/.nvm/versions/node/v14.15.4/bin/npm
  Browsers:
    Chrome: 89.0.4389.90
    Firefox: 84.0.2
    Safari: 14.0.3
  npmPackages:
    @storybook/eslint-config-storybook: ^2.4.0 => 2.4.0
    @storybook/linter-config: ^2.5.0 => 2.5.0
    @storybook/semver: ^7.3.2 => 7.3.2

But as I can see we have some problems with PnP case on CI?

[shilman]

@7rulnik CI is broken right now due to an unrelated issue. Can you merge next into your branch and see if that fixes it?

[gaetanmaisse]

Not sure that the current config for webpack 5 works with yarn PnP. Have you tested this?

I tried it (maybe before RCs go out) with @storybook/html when working on #13907 and if I remember correctly it was ok, at least in that case.

Currently, there is no E2E tests using webpack 5 I think 🤔 so I will need some manual testing. As of 6.3-alpha I will add an PnP E2E tests related to WebComponents so it could also use webpack 5 too, I need to discuss that with other WC foxes.

[gaetanmaisse]

hey @7rulnik can you update this branch with next or allow SB members to push on the branch of this PR?

[shilman]

hey @7rulnik can you update this branch with next or allow SB members to push on the branch of this PR?

[nx-cloud]

Nx Cloud Report

CI ran the following commands for commit a030edf. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

Status	Command
	nx run-many --target=prepare --all --parallel --max-parallel=15

---

Sent with 💌 from NxCloud.

[7rulnik]

@shilman done

[shilman]

@7rulnik can you try again? we still can't push to this branch. thanks!

[7rulnik]

@shilman I don't have a checkbox allow edits from maintainers because it's my company org, not mine. But I sent invites to this forks to you and @gaetanmaisse

[shilman]

LGTM! Thanks @7rulnik !!!