Module parse failed: Unexpected token

[greabock]

Versions

package	version
nuxt	1.4.1
vue-cli-plugin-nuxt-starter-template	0.0.6
vue-cli	3.0.0-rc.3
vue	2.5.13

What I doing

running dev (nuxt)

What I do expect

Runing application in dev mode. Console output compiled or something like that.

What happens instead

Console output error:

 error  in ./src/components/AppLogo.vue?vue&type=style&index=0&lang=css

Module parse failed: Unexpected token (10:0)
You may need an appropriate loader to handle this file type.
|
|
| .VueToNuxtLogo {
|   display: inline-block;
|   transform: rotateX(180deg);

 @ ./src/components/AppLogo.vue 3:0-66
 @ ./src/pages/index.vue?vue&type=script&lang=js
 @ ./src/pages/index.vue
 @ ./.nuxt/router.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr ./.nuxt/client.js

And ten more errors like this.

[rwuttke]

I think I can see where this issue is arising from:

TypeError: Cannot read property 'compilation' of undefined

  - ProgressPlugin.js:121 ProgressPlugin.apply                            
    [ait-sms]/[webpack]/lib/ProgressPlugin.js:121:19                      

  - Tapable.js:375 Compiler.apply                                         
    [ait-sms]/[nuxt]/[tapable]/lib/Tapable.js:375:16                      

  - webpack.js:33 webpack                                                 
    [ait-sms]/[nuxt]/[webpack]/lib/webpack.js:33:19                       

  - builder.js:524 compilers.compilersOptions.map.compilersOption         
    [ait-sms]/[nuxt]/lib/builder/builder.js:524:24                        

  - Array.map                                                             

  - builder.js:523 Builder.webpackBuild                                   
    [ait-sms]/[nuxt]/lib/builder/builder.js:523:39                        

  - builder.js:168 Builder.build                                          
    [ait-sms]/[nuxt]/lib/builder/builder.js:168:16                        

Note that the lower references to [webpack] are under [nuxt], but the top entry are directly under the project itself.

Checking through this, I see the following:

[ait-sms]/[nuxt]/[webpack] version is 3.12.0
[ait-sms]/[webpack] version is 4.16.3

I created a new project using vue init nuxt-community/starter-template ait-sms-new

And I get this

[ait-sms-new]/[webpack] version is 3.12.0 [ait-sms]/[nuxt] has no webpack installed here.

I think the problem is that the plugin is installing webpack when it doesn't need to be, and so we have two different versions of webpack being used together.

This can be reproduced:

• vue create hello-world
• cd hello-world
• npm install nuxt

You will then need to create a pages directory and add a basic index.vue to this.

<template>
  <h1>Hello world!</h1>
</template>

Then add "dev": "nuxt" to the scripts object in package.json.

On running npm run dev, you will get the same error.

[akdasa]

Same issue.

[tobystokes]

nuxt 1.4 depends on webpack 3, whereas vue cli 3 is using webpack 4. But nuxt 2 uses webpack 4! So

npm rm nuxt
npm i nuxt-edge

was a workable fix for me, until v2 is official (cc issue #4 for the +1'ers)

[akshaybharambe14]

for me, reinstalling babel and webpack fixed this issue.

npm install babel-core babel-loader babel-preset-es2015 webpack --save-devnpm install babel-core babel-loader babel-preset-es2015 webpack --save-dev

[gringolalia]

Changing mode from universal to spa in nuxt.config.js let me get on with my work for the time being ...

[x-N0]

Take a look at any require() function that you might have over there. It's a crawler, if you have something like:

require(`@/{fromRootPath}`) -CHANGE_TO-> require(`@/path_to/myfolder/{file}`)

Also if you have mode delete it, after viewing: https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-mode/

Deprecated