Running into “couldn't infer parser” error usi

Question

I'm getting an error repeatedly when trying to build a new webpack project using vue-cli. I'm following along with the docs on the latest build (3.0.0-beta.11), also tried with an earlier version, which wasn't beta.

When I run yarn serve it attempts to start the dev server and build the project but fails here:

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

About my setup

• Mac OS
• I'm running node v8.5.0
• packages are installed with yarn

The Things I've Attempted

• Different versions of vue-cli to generate a new project. The projects generate and install modules.
• Tried removing the prettier module, but the error still seems to come up.
• Tried reinstalling all modules.

What else might I try to get past this error?

Answer 1

Running npm install prettier@1.12.1 solved it for me. Thanks lsxliron.

Answer 2

As already pointed out by the various resonses, you may need to rollback the version of the prettier package.

in your package.json file, you may need to force npm to use a version (i.e. remove the hat ^)

mine looks something like this

"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"

Answer 3

Known issue and it will be fixed in the next version of vue-cli

In prettier 1.13.0, default parser was removed with a minor version(used to be babylon)

Issue: https://github.com/vuejs/component-compiler-utils/issues/14

Issue at prettier repo: https://github.com/prettier/prettier/issues/4567

Sorry, we committed the age-old semver sin- we knew this was a breaking change, but because it would only affect a subset of our users, we didn't bump the major version, because we didn't want to create friction for our users to upgrade.

To get the old behavior, add parser: "babylon". You may also want to lock prettier to a specific version in your package.json.

Answer 4

Removing the current node_modules folder from the project, adding "prettier": "^1.12.1" to package.json and running npm install solved the issue.

Another option is to run npm install prettier@1.12.1 without removeing the node_modules folder before

Update:

For some users, verion 1.12.1 did not work

@Kivin proposed another solution that can be found here: vue webpack template missing parser

Answer 5

Right now, I tried all the options..downloading and updgrading prettier...but none workied. Until I studied what happened carefully. Apparently, the prettier team removed the default parser which was babylon and in so doing...broke the internet.

Just kidding.

Issue repo

The simplest solution, according to them would be to simply add the parser back. This has been picked up by the Vue team and its expected to be shipped with the latest fix release. If you are using Vue Loader/Yarn, dont even bother to try all the suggestions...I tried them all. What fixed it for me was...go to node_modules\vue-loader\lib\template-compiler ...open index.js and look for

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

and change the lines to:

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

Thats it! Then once the issue got fixed, everything will just be rolled back and you will still be fine.

Try this...it will save you countless minutes of searches....