fix(webpack): ensure loaders are first searched from @nuxt/webpack

[matthieusieben]

Types of changes

• Bug fix (a non-breaking change which fixes an issue)
• New feature (a non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Description

When nuxt is used as part of a mono repo, NPM & Yarn may install @nuxt/webpack's dependencies in @nuxt/webpack/node_modules instead of the project's root folder. When that is the case, Webpack is not able to find these loaders.

Checklist:

• My change requires a change to the documentation.
• I have updated the documentation accordingly. (PR: #)
• I have added tests to cover my changes (if not applicable, please state why)
• All new and existing tests are passing.

[pi0]

Thanks for the PR @matthieusieben. It would be nice if you can provide a reproduction for bug-fixes/reports too so we can ensure this fix works

[matthieusieben]

Reproduce like so:

- test/package.json
{
  "name": "test",
  "private": true,
  "license": "MIT",
  "workspaces": ["packages/*"],
  "dependencies": {
    "css-loader": "^4.0.0"
  }
}

- test/packages/a/package.json
{
  "name": "a",
  "version": "1.0.0",
  "license": "MIT",
  "dependencies": {
    "nuxt": "^2.13.3"
  }
}

Run yarn install in the root dir

 find . -name css-loader -type d
./node_modules/css-loader // v4.x will break builds because Nuxt expects v3.x
./node_modules/@nuxt/webpack/node_modules/css-loader

The "right" css-loader is the one in node_modules/@nuxt/webpack/node_modules, which is also why the module should be before modulesDir.

[pi0]

@matthieusieben I made a reproduction accordingly: https://github.com/pi0/nuxt-7787

Issue is reproducible but this change won't fix it! We may have to resolve 'css-loader' like this:

    const cssLoader = { loader: require.resolve('css-loader'), options };

[matthieusieben]

@matthieusieben I made a reproduction accordingly: https://github.com/pi0/nuxt-7787

Issue is reproducible but this change won't fix it! We may have to resolve 'css-loader' like this:

    const cssLoader = { loader: require.resolve('css-loader'), options };

This was my first approach but there are two issues with it:

• It break backward compatibility of code doing: urlLoader = loader.use.find(use => use.loader === 'url-loader')
• Not all the loaders referenced in the code are present in the package.json file.

[pi0]

@matthieusieben With 93753d3 i can confirm it was fixing issue :)

[codecov-commenter]

Codecov Report

Merging #7787 into dev will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##              dev    #7787   +/-   ##
=======================================
  Coverage   68.88%   68.88%           
=======================================
  Files          90       90           
  Lines        3834     3834           
  Branches     1037     1037           
=======================================
  Hits         2641     2641           
  Misses        969      969           
  Partials      224      224           

Flag	Coverage Δ
#unittests	68.88% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
packages/webpack/src/config/base.js	64.41% <ø> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 66b4aa2...139de10. Read the comment docs.

[matthieusieben]

So probably you should avoid specify css-loader in monorepo dependencies (but use it for any package that needs it)

Have a look at https://github.com/matthieusieben/nuxt-7787

$ find . -name url-loader -type d
./node_modules/url-loader
./node_modules/@nuxt/webpack/node_modules/url-loader
$ find . -name css-loader -type d
./node_modules/css-loader
./packages/ext/node_modules/css-loader

[matthieusieben]

@matthieusieben With 93753d3 i can confirm it was fixing issue :)

For me too.

[pi0]

Failing windows CI is not related to this PR