创建vue项目错误 Error: No parser and no file path given

Question

很抱歉版本号打错了，误导了一些人。因为今天segmentfault ios手机端用sogou输入法编辑问题切换到英文会一直乱打字。。我也不知道什么问题。。实在抱歉

---

原因是prettier 更新到1.13.0导致的
component-compiler-utils 1.3.1 已经更新修复了.

具体, https://github.com/vuejs/comp...

---

error
in ./src/App.vue

Module build failed: Error: No parser and no file path given, couldn't infer a parser.

at normalize (F:\WebStormProjects\a9043-blog-mobile\node_modules\prettier\index.js:7051:13)
at formatWithCursor (F:\WebStormProjects\a9043-blog-mobile\node_modules\prettier\index.js:10370:12)
at F:\WebStormProjects\a9043-blog-mobile\node_modules\prettier\index.js:31115:15
at Object.format (F:\WebStormProjects\a9043-blog-mobile\node_modules\prettier\index.js:31134:12)
at Object.module.exports (F:\WebStormProjects\a9043-blog-mobile\node_modules\vue-loader\lib\template-compiler\index.js:80:23)

@ ./src/App.vue 11:0-354
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

error in ./src/components/HelloWorld.vue

Module build failed: Error: No parser and no file path given, couldn't infer a parser.

at normalize (F:\WebStormProjects\a9043-blog-mobile\node_modules\prettier\index.js:7051:13)
at formatWithCursor (F:\WebStormProjects\a9043-blog-mobile\node_modules\prettier\index.js:10370:12)
at F:\WebStormProjects\a9043-blog-mobile\node_modules\prettier\index.js:31115:15
at Object.format (F:\WebStormProjects\a9043-blog-mobile\node_modules\prettier\index.js:31134:12)
at Object.module.exports (F:\WebStormProjects\a9043-blog-mobile\node_modules\vue-loader\lib\template-compiler\index.js:80:23)

@ ./src/components/HelloWorld.vue 11:0-366
@ ./src/router/index.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

Answer 1

see: https://github.com/vuejs/comp...

抱歉， 因为在github里面track， 没有更新这里。

问题背景：

这里出现的问题是因为prettier， 一个vue-cli的依赖，把一个feature 的移除当作次版本发布。 这个导致npm install 到的@vue/component-compiler-utils 的runtime 出错导致。

和prettier 作者沟通后， 为了避免碎片化， prettier 没有计划发布新的版本来更正这个， 所以我发送了一个PR 到component-compiler-utils并且在PR 合并前提供了一个workaround 去降级prettier 到更新之前的版本。

美国晚上晚些时候Evan（vue 的作者）合并了PR 并发布了新的component-compiler-utils#1.3.1, 对于vue-loader v15，这个问题得以解决。 不过需要手动升级下component-compiler-utils。

---

解决方案：

如果是vue-loader v15

npm update --depth=9999 @vue/component-compiler-utils

如果是vue-loader v14, 因为vue-loader 直接依赖prettier

npm update --depth=9999 vue-loader

Answer 2

第一种解决方案：看看自己的package.json,vue-loader版本是不是15.x以上的。如果不是可以按照下面操作：
1.删除node_modules,yarn.lock, package-lock.json 等文件；
2.npm install --save-dev prettier@1.13.0；
3.把vue-loader版本更新为15.x以上，然后修改webpack.config.js文件，vue-cli的朋友最好把webpack.dev.config.js和webpack.prod.config.js都做如下修改：
// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
// ...
plugins: [ new VueLoaderPlugin() ]
}
4.npm install，就可以了。这个亲测有用。
第二种解决方案，如果不想升级vue-loader版本，可以降级prettier，1.12.1这个版本好像能用，理论上是可以的，但是我没有试过。就算是降级prettier，最好也删除一下lock文件。
这个问题的出现是prettier修改了，不再自动解析了，导致依赖这个的vue-cli运行报错了，（https://github.com/prettier/p...）。然后尤就把component-compiler-utils更新到1.3.1吧这个问题修复了，（https://github.com/vuejs/comp...）。但是使用component-compiler-utils需要vue-loader版本15.x以上，（https://github.com/vuejs/comp...）。所以出现了第一种解决方案。
整理给不爱用谷歌搜索的小伙伴们（遇到问题用谷歌啊，懒死了）。

Answer 3

npm install --save-dev prettier@1.12.0

npm run dev

Answer 4

将prettier@1.13.0降为1.12.0成功解决.

npm install --save-dev prettier@1.12.0

删除 node_modules下_prettier@1.13.0@prettier文件夹

Answer 5

我也是这样,是更新了什么包导致的吗? npm view prettier version 执行之后版本还是 1.13.0怎么办?已经删除了node_modules重新intsall过

Answer 6

尤大已经解决的问题, 题内容1.13.1我打错了
prettier 1.13.0
utils1.3.1

component-compiler-utils 看这个
https://github.com/vuejs/comp...
不需要吧prettier降级了
删掉node-modules重新安装
和package-lock.json

Answer 7

为什么还是有错，重新安装的prettier还是1.13.0版本。
试了好多次方案，终于解决了
vue-loader是13.x/14.x版本的，手动删除node_modules里面的_prettier@1.12.1@prettier和prettier两个文件夹，然后cnpm install --save-dev prettier@1.12.1，这样就没问题了

Answer 8

还是 不行 .为什么 会这样?

Answer 9

安装 cnpm i prettier@~1.12.1这个版本，然后把1.13.0的新版本的包删除了重新运行就好了。

Answer 10

先去node_module删除prettier这个包，再去 cnpm i prettier@~1.12.1，就可以啦，不行就删除package.lock.json再试就可以啦

Answer 11

为什么我不行了

Answer 12

删除了 node_modules
cnpm install --save-dev prettier@1.12.0
还是报错
Module build failed: Error: No parser and no file path given, couldn't infer a p
arser.

Answer 13

1. 首先安装 prettier@1.12.0
2. 移除 node_modules 目录
3. 清除 NPM 的缓存：npm cache clean -f
4. 如果使用了 yarn，清除 yarn 的缓存：yarn cache clean
5. 使用 NPM 重新安装：npm i

Answer 14

mac电脑直接：
rm -rf node_modules
rm package-lock.json
npm install
npm install prettier@~1.12.1

执行完这四个命令，保证ok

win电脑
先手动卸载了本地的prettier
然后再npm install prettier@~1.12.1

原因是因为mac的node_moduls中的包命名直接为该组件的名字，而win要携带版本号
所以mac执行npm install prettier时会覆盖原来的版本，而win则不会，因为win的
文件夹命名格式为prettier@1.12.1或者prettier@1.13.0，所以需要手动卸载一下

Answer 15

npm 3.10.10
使用了以上各种方法均不行
cnpm ls prettier查看发现
└─┬ vue-loader@13.7.1 -> _vue-loader@13.7.1@vue-loader
└── prettier@1.13.0
到项目cd node_modules/vue-loader下
cnpm i prettier@~1.12.1
重新cnpm ls prettier查看
└─┬ vue-loader@13.7.1 -> _vue-loader@13.7.1@vue-loader
└── prettier@1.12.1
重新启动后，成功，估计升级npm也能成功

Answer 16

过两天就没有这个问题了 npm install --save-dev prettier@1.12.0

Answer 17

搞了快1小时解决了：
rm -rf node_modules npm install npm install prettier@~1.12.1
我的成功了
如果有.lock之类的先删掉，还有就是老老实实用npm慢就慢点，cnpm亲测不行，可能还没更新？