Nuxt.js: Nuxt v2.3.0 broke pnpm usage

[cesasol]

Version

v2.3.1

Reproduction link

https://codesandbox.io/s/pk56vvqonx

Steps to reproduce

Use pnpm as your package manager pnpm install
Any command will fail with a vue-loader error because it could not find babel-loader when compiling vue templates.

What is expected ?

To find the babel-loader as it was doing it before

What is actually happening?

It does not find babel-loader

Additional comments?

With pnpm most of the time you need to define additional dependencies, here are the minimum dependencies to work with nuxt.js

{
"dependencies": {
    "lodash": "^4.17.11",
    "nuxt": "^2.3.0",
    "vue": "^2.5.17",
    "vue-meta": "^1.5.5",
    "vue-no-ssr": "^1.0.0",
    "vue-router": "^3.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.1.6",
    "@babel/helper-module-imports": "^7.0.0",
    "@babel/plugin-syntax-jsx": "^7.0.0",
    "@babel/runtime": "^7.1.5",
    "@nuxt/vue-app": "^2.3.1",
    "@nuxt/vue-renderer": "^2.3.1",
    "babel-loader": "^8.0.4",
    "compression": "^1.7.3",
    "core-js": "^2.5.7",
    "css-loader": "^1.0.1",
    "debug": "^4.1.0",
    "postcss-loader": "^3.0.0",
    "regenerator-runtime": "^0.13.1",
    "vue-loader": "^15.4.2",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.5.17",
    "webpack": "^4.25.1",
    "webpack-hot-middleware": "^2.24.3"
  }
}

But even it fails, the current solution was reverting the changes made on https://github.com/nuxt/nuxt.js/pull/4150 with the following code on nuxt.config.js

  build: {
    extend(config, webpackContext) {
      // Find the jsx loader
      const babelLoader = config.module.rules.find(rule =>
         rule.test.toString() === /\.jsx?$/.toString())
      // Replace the resolved loader with the normal one
      babelLoader.use[0].loader = 'babel-loader'
    }
  }

_{This bug report is available on Nuxt community (#c8161)}

[pi0]

@cesasol sorry for inconsistencies. Actually, pnpm or (similar package managers) was not being tested/listed as nuxt official supported package managers and now fixing yarn breaks pnpm! Trying to find a universal workaround that webpack behaves better with loaders.

[manniL]

Rel: https://twitter.com/Cesasol/status/1067283037011025926

Waiting for a ping back ☺️

[manniL]

Friendly reminder @cesasol

[cesasol]

Took me some time but here it is. https://github.com/cesasol/nuxt-pnpm
I could not find a way to make cache or parallel work but everything else does.

[cesasol]

Ok I fixed the issue with the thread loader

[manniL]

@cesasol is this something we should/can add to the nuxt repo itself to make pnpm + nuxt easier? :thinking:

[cesasol]

I don't think there is something that can be done since many features require the flattened structure of node-modules and if the code generated on .nuxt/ requires something like regenerator runtime then it must be installed on the project as a dependency, this issue goes everywhere and is recursive. So maybe transforming my example into a template can be a solution that doesn't break other package managers.

[manniL]

@cesasol That sounds like a good idea! I'm sure creating the repo in nuxt-community would make sense (cc @pi0)

[stevefan1999-personal]

pnpm really saves a lot of time. Even yarn cannot catch up the speed of pnpm in practice, didn't know why nuxt wouldn't work with shamefully-flatten out of the box :(

[manniL]

@stevefan1999-personal If there is a way to introduce a non-breaking change that works, please feel free to submit a PR ☺️

But as there is a workaround, I'll close here for now.

[stevefan1999-personal]

@manniL I mean yeah, it is more of a philosophy problem. NPM enjoyed immutable modules for too long and when we realized that this is a (and created lots of) problem we cannot quit now.

There's an ongoing issue in pnpm land: https://github.com/pnpm/pnpm/issues/801