Npm run dev fails with following error

Hello guys,

I’m new to vue.js and enjoying the tutorials to get me up to speed. Thought I would try to install an existing project, this one here, seems the developer has flown th coop. Anyways when I try to run npm run dev I get the following errors



 ERROR  in ./.nuxt/router.js                          friendly-errors 14:49:13

Module parse failed: Unexpected token (7:24)          friendly-errors 14:49:13
You may need an appropriate loader to handle this file type.
| 
| var _56711104 = function _56711104() {
>   return interopDefault(import('../pages/all-recipes/index.vue'
|   /* webpackChunkName: "pages/all-recipes/index" */
|   ));
                                                      friendly-errors 14:49:13
 @ ./.nuxt/index.js 8:0-43 61:19-31
 @ ./.nuxt/client.js
 @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js

And in my router js I have the following code:

import Vue from 'vue'
import Router from 'vue-router'
import { interopDefault } from './utils'

const _56711104 = () => interopDefault(import('../pages/all-recipes/index.vue' /* webpackChunkName: "pages/all-recipes/index" */))
const _0b5d7630 = () => interopDefault(import('../pages/recipes/index.vue' /* webpackChunkName: "pages/recipes/index" */))

I don’t know where to start debugging yet, does the above ring any bells with anyone?

The error basically says that there is no loader that could compile .vue file, perhaps it’s missing vue-loader.

Aside from your problem, why dont you try install your vue app from vue-cli?

Thanks for reply, I thought the vue cli was just for starting new projects, I didn’t know it could install existing projects, I will definetly look into that. I used vue ui to import the project and I see it has vue lazyload 1.0.6 as wanted but the the most recent is 1.2.6, not sure if vue lazyload is the same thing as vue-loader? Do I edit the composer.json to require version 1.2.6 and run npm install again?

not sure if vue lazyload is the same thing as vue-loader

I don’t think they’re the same thing. This Vue lazyload is to load the image only when they’re visible on screen, while vue-loader is a webpack loader to read and compile .vue files.

I thought the vue cli was just for starting new projects, I didn’t know it could install existing projects

What I meant was that you can generate a new Vue app from vue-cli because all the configuration are preloaded and should be working properly. After that, you can slowly migrate your existing Vue files slowly while ensuring the app doesn’t break.

Maybe this stackoverflow can help you to relate.

Added vue-loader to the project and no change, still says

Module parse failed: Unexpected token (7:24)          friendly-errors 18:36:00
You may need an appropriate loader to handle this file type.
| 
| var _56711104 = function _56711104() {
>   return interopDefault(import('../pages/all-recipes/index.vue'
|   /* webpackChunkName: "pages/all-recipes/index" */
|   ));

Is there anything else I can try?

Just noticed the is an analyse script available in the vue ui, here is the output:

$ nuxt build --analyse
ℹ Production build

✔ Builder initialized
✔ Nuxt files generated

ℹ Compiling Client

✔ Client: Compiled with some errors in 14.73s


Hash: a13ec8ac83aae239db3a
Version: webpack 4.34.0
Time: 14732ms
Built at: 06/13/2019 10:53:13
                  Asset       Size  Chunks  Chunk Names
034f6d8dc510e3db4225.js   1.45 KiB       2  runtime
68ba4dae2cce66f5d707.js   50.8 KiB       0  app
8480a55ae65f6d04c9b0.js    118 KiB       1  commons.app
               LICENSES  462 bytes          
Entrypoint app = 034f6d8dc510e3db4225.js 8480a55ae65f6d04c9b0.js 68ba4dae2cce66f5d707.js

ERROR in ./.nuxt/router.js 7:24
Module parse failed: Unexpected token (7:24)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| 
| var _56711104 = function _56711104() {
>   return interopDefault(import('../pages/all-recipes/index.vue'
|   /* webpackChunkName: "pages/all-recipes/index" */
|   ));
 @ ./.nuxt/index.js 8:0-43 61:19-31
 @ ./.nuxt/client.js
 @ multi ./.nuxt/client.js


 FATAL  Nuxt Build Error

  at WebpackBundler.webpackCompile (node_modules/@nuxt/webpack/dist/webpack.js:5367:13)
  at processTicksAndRejections (internal/process/task_queues.js:89:5)
  at async WebpackBundler.build (node_modules/@nuxt/webpack/dist/webpack.js:5313:5)
  at async Builder.build (node_modules/@nuxt/builder/dist/builder.js:5580:5)
  at async Object.run (node_modules/@nuxt/cli/dist/cli-build.js:96:7)
  at async NuxtCommand.run (node_modules/@nuxt/cli/dist/cli-chunk.js:2614:7)

Does this output ring any bells?

How do you add it? Have you add the loader to your webpack config?

I just used the vue ui in the browser “Install Dependences” I don’t see webpack in my “Project Dependences”

Hmmm I don’t have much idea from that situation, since I’m not familiar with your current app environment. Sorry.

If things got stuck, I would still recommend you to install fresh Vue app and slowly migrate your source code to the new Vue app.

Thanks for your help, started from scratch again. Following the advice from here I changed the port from 3000 (default) too 3333 like so:

  # ...
  "scripts": {
    "dev": "PORT=3333 node_modules/.bin/nuxt"
  # ...

Then I imported it to vue ui and when I try to run the dev script I get:

$ PORT 3333 node_modules/.bin/nuxt
/bin/sh: 1: PORT: not found

Total task duration: 0.02s

Tried various other ports with the same result. Is the syntax correct “dev”: “PORT=3333 node_modules/.bin/nuxt”, or is there somewhere else that the port needs to be stated other that the package.json? Oh and I used the vue ui to update all the packages, what a cool tool!