使用 vue-cli 遇到“无法推断解析器”错误答案

【问题标题】：Running into "couldn't infer parser" error using vue-cli使用 vue-cli 遇到“无法推断解析器”错误
【发布时间】：2018-11-06 10:21:57
【问题描述】：

我在尝试使用 vue-cli 构建新的 webpack 项目时反复收到错误消息。我正在关注最新版本 (3.0.0-beta.11) 上的文档，还尝试使用不是 beta 的早期版本。

当我运行 yarn serve 时，它会尝试启动开发服务器并构建项目，但在这里失败：

error  in ./src/App.vue?vue&type=template&id=7ba5bd90

Module build failed: Error: No parser and no file path given, couldn't infer a parser.
    at normalize (/Users/cory/Code/chickadee/my-project/node_modules/prettier/index.js:7051:13)
    at formatWithCursor (/Users/cory/Code/chickadee/my-project/node_modules/prettier/index.js:10370:12)
    at /Users/cory/Code/chickadee/my-project/node_modules/prettier/index.js:31115:15
    at Object.format (/Users/cory/Code/chickadee/my-project/node_modules/prettier/index.js:31134:12)
    at actuallyCompile (/Users/cory/Code/chickadee/my-project/node_modules/@vue/component-compiler-utils/dist/compileTemplate.js:93:29)
    at compileTemplate (/Users/cory/Code/chickadee/my-project/node_modules/@vue/component-compiler-utils/dist/compileTemplate.js:26:16)
    at Object.module.exports (/Users/cory/Code/chickadee/my-project/node_modules/vue-loader/lib/loaders/templateLoader.js:42:20)

 @ ./src/App.vue?vue&type=template&id=7ba5bd90 1:0-194 1:0-194
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client/index.js (webpack)/hot/dev-server.js ./src/main.js

关于我的设置

Mac 操作系统
我正在运行 node v8.5.0
安装包时使用yarn

我尝试过的事情

不同版本的vue-cli 生成一个新项目。项目生成并安装模块。
尝试删除 prettier 模块，但错误似乎仍然出现。
尝试重新安装所有模块。

我还可以尝试什么来克服这个错误？

【问题讨论】：

确认照你的做，也没有运气！！！等待这个 PR：github.com/vuejs/component-compiler-utils/pull/…

标签： node.js webpack vue.js vue-cli prettier

【解决方案1】：

现在，我尝试了所有选项..下载和升级更漂亮...但没有一个成功。直到我仔细研究了发生的事情。显然，更漂亮的团队删除了默认解析器 babylon 并这样做......破坏了互联网。

开个玩笑。

Issue repo

根据他们的说法，最简单的解决方案是简单地添加解析器。这已被 Vue 团队采纳，预计将与最新的修复版本一起发布。如果您使用的是 Vue Loader/Yarn，甚至不必费心去尝试所有的建议……我都试过了。为我解决的问题是……去 node_modules\vue-loader\lib\template-compiler ...打开 index.js 并寻找

// prettify render fn if (!isProduction) { code = prettier.format(code, { semi: false}) }

并将这些行更改为：

// prettify render fn
if (!isProduction) {
  code = prettier.format(code, { semi: false, parser: 'babylon' })
}

就是这样！然后，一旦问题得到解决，一切都会被回滚，你仍然会没事的。

试试这个...它将为您节省无数分钟的搜索时间....

【讨论】：

【解决方案2】：

正如各种反应已经指出的那样，您可能需要回滚更漂亮的软件包的版本。

在您的 package.json 文件中，您可能需要强制 npm 使用一个版本（即移除帽子 ^）

我的看起来像这样

"devDependencies": {

"prettier": "1.12.1",
"typescript": "^2.6.1",
"vue": "^2.5.16",
"vue-styleguidist": "^1.4.4",
"vue-webpack-loaders": "^1.0.6",
"webpack": "^3.1.0"

【讨论】：

【解决方案3】：

从项目中删除当前的node_modules 文件夹，将"prettier": "^1.12.1" 添加到package.json 并运行npm install 解决了这个问题。

另一种选择是运行 npm install prettier@1.12.1 而不删除之前的 node_modules 文件夹

更新：

对于某些用户，版本 1.12.1 不起作用

@Kivin 提出了另一个解决方案，可以在这里找到：vue webpack template missing parser

【讨论】：

我不知道为什么，但我尝试使用yarn 降级到1.2.1，但它似乎不起作用。起作用的是npm install --save-dev prettier@1.12.1。但看起来你在这里做的是同样的事情，只是简单地替换了所有的模块。

【解决方案4】：

运行npm install prettier@1.12.1 为我解决了这个问题。谢谢lsxliron。

【讨论】：

每次安装当前 vue-cli 版本后，您都需要这样做，然后在 vue-cli 更新后将其从依赖项中删除。

【解决方案5】：

已知问题，在下一版本的 vue-cli 中将是 fixed

在更漂亮的 1.13.0 中，默认解析器被删除了一个次要版本（曾经是巴比伦）

问题：https://github.com/vuejs/component-compiler-utils/issues/14

prettier repo 上的问题：https://github.com/prettier/prettier/issues/4567

抱歉，我们犯下了古老的 semver 罪过 - 我们知道这是一个重大更改，但因为它只会影响我们的一部分用户，所以我们没有修改主要版本，因为我们不想为我们的用户升级制造摩擦。

要获得旧行为，请添加 parser: "babylon"。 您可能还希望将 prettier 锁定到 package.json 中的特定版本。

【讨论】：