Vue-cli: pnpm error

Created on 10 Oct 2018 · 8Comments · Source: vuejs/vue-cli

Version

3.0.5

Node and OS info

node 8.9.4 npm 5.6.0 pnpm 2.16.3 win7 sp3 (Microsoft Windows [版本 6.1.7601])

Steps to reproduce

Install and run dependencies after creating projects
pnpm install --shamefully-flatten
pnpm run serve

What is expected?

App running at:

Local: http://localhost:8080/
Network: http://192.168.0.218:8080/

What is actually happening?

......
ERROR Failed to compile with 1 errors 08:39:15

This dependency was not found:

-!../node_modules/.registry.npm.taobao.org/cache-loader/1.2.2/[email protected]/n
ode_modules/cache-loader/dist/cjs.js??ref--13-0!../node_modules/.registry.npm.ta
obao.org/babel-loader/8.0.4/@babel![email protected]/node_modules/babel-loader/
lib/index.js!../node_modules/.registry.npm.taobao.org/ts-loader/4.5.0/node_modul
es/ts-loader/index.js??ref--13-2!../node_modules/.registry.npm.taobao.org/cache-
loader/1.2.2/[email protected]/node_modules/cache-loader/dist/cjs.js??ref--0-0!../n
ode_modules/.registry.npm.taobao.org/vue-loader/15.4.2/[email protected]/node_mod
ules/vue-loader/lib/index.js??vue-loader-options!./App.vue?vue&type=script&lang=
ts& in ./src/App.vue?vue&type=script&lang=ts&
To install it, you can run: npm install --save -!../node_modules/.registry.npm.t
aobao.org/cache-loader/1.2.2/[email protected]/node_modules/cache-loader/dist/cjs.j
s??ref--13-0!../node_modules/.registry.npm.taobao.org/babel-loader/8.0.4/@babel!
[email protected]/node_modules/babel-loader/lib/index.js!../node_modules/.regis
try.npm.taobao.org/ts-loader/4.5.0/node_modules/ts-loader/index.js??ref--13-2!..
/node_modules/.registry.npm.taobao.org/cache-loader/1.2.2/[email protected]/node_mo
dules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/.registry.npm.taobao.or
g/vue-loader/15.4.2/[email protected]/node_modules/vue-loader/lib/index.js??vue-l
oader-options!./App.vue?vue&type=script&lang=ts&
No type errors found
No lint errors found
Version: typescript 3.1.2, tslint 5.11.0
Time: 3989ms

App.vue
Remove the

All 8 comments

Please provide a reproduction as required in the issue generator. Currently, we can only guess which options you used for project creation, which hinders a meaningful investigation of your issue.

LinusBorg on 11 Oct 2018

安装配置"zouhir/jarvis"后显示无法加载模块"../node_modules/.registry.npm.taobao.org/babel-loader/8.0.4/@babel"
实际目录如下
../node_modules/.registry.npm.taobao.org/babel-loader/8.0.4/@babel![email protected]/node_modules/babel-loader/lib/index.js
猜测"@babel!core"应该是"@babel/core",猜测无法加载的模块是"babel-loader"
删除相关的目录后，单独安装模块"babel-loader"后解决问题

liangjl76 on 11 Oct 2018

reproduction
https://github.com/liangjl76/vue-cli-3.0.5-pnpm.git

liangjl76 on 12 Oct 2018

@babel/core正式版已经出来了，为什么引用beta版?
"babel-loader":"^8.0.0",要求引用"@babel/core": "^7.0.0"，引用beta版与之产生了冲突。

liangjl76 on 12 Oct 2018

this issue is also reported on glitch.com, which uses pnpm by default: https://support.glitch.com/t/unsure-how-to-read-these-error-messages/6356/6

pixelyunicorn on 24 Jan 2019

[OUTDATED]
Use this instruction only if you have old Vue CLI 3 app < 3.4.1 (vue --version) & pnpm v3 (pnpm -v):

Probably, this problem comes from babel-loader paths resolving, because babel-loader is dependency of @vue/cli-plugin-babel

Solved by this way:

Delete whole node_modules folder

Run pnpm i -D babel-loader --shamefully-flatten (will install babel-loader as your project's local dev-dependency instead of dependency of @vue/cli-plugin-babel)

Run pnpm i --shamefully-flatten (the important thing here is shamefully-flatten option)

(optional):
Create .npmrc file and paste into it: shamefully-flatten=true - this will force pnpm to use shamefully-flatten each time you use pnpm in your project's directory (where .npmrc located in)

UPDATE: _7 October 2019_

Starting from pnpm v4.0.0, option shamefully-flatten renamed to shamefully-hoist.
For those who googled my answer - you guys no need to install babel-loader separately (as described above), just simply do:

Delete whole node_modules folder
Run pnpm i --shamefully-hoist
(the important thing here is --shamefully-hoist option - will force flattening of node_modules structure for better module resolving during build task)
npm run build - Profit! Vue CLI 3 app successfully built
(optional):
Create .npmrc file and paste & save: shamefully-hoist=true - this will force to use shamefully-hoist each time you use pnpm in your project's directory (where .npmrc located in)