Cannot import Vue: SyntaxError: Unexpected identifier

Question

npm install vue --save

Stuff gets installed and stored in package.json and package-lock.json, including:

"vue": "^2.5.21",   
"vue-router": "^3.0.2",
"vue-server-renderer": "^2.5.21",

But when I run

node src/main.js

with sourcecode (this is the full main.js file, 1 line)

import Vue from 'vue';

I get the error

src/main.js:1
(function (exports, require, module, __filename, __dirname) { import Vue from 'vue'
                                                                     ^^^

SyntaxError: Unexpected identifier

The import line is used in many Hello worlds, something simple must be wrong. Node version is v10.15.0. For example https://v2.vuejs.org/v2/guide/components-registration.html

@Styx My whole main.js is there, it only consists of the import statement, the error is in line 1. — Daniel W.
– Daniel W., Commented Jan 11, 2019 at 10:42
Ah, sorry, I got confused as well. You should use const Vue = require('vue'); instead. — Styx
– Styx, Commented Jan 11, 2019 at 10:48
Vue code needs to run in the browser, not with node. Node is used to build Vue projects with webpack as a precompilcation step which bundles all modules together into code suitable for loading in the web browser (this is what vue-cli does). See Installation for more information. — Decade Moon
– Decade Moon, Commented Jan 11, 2019 at 11:09

tony19 · Accepted Answer · 2022-07-15 23:29:54Z

2

NodeJS supports CommonJS (require/module.exports) modules only, not ES6 (import/export) you were trying to use.

Those examples you're referring to probable mention using babel transpiler. Under the hood it converts using ES6 modules to CommonJS ones, so node could work.

For example, you can create your test project like this:

npm -g i vue-cli
vue init webpack-simple vue-test-project
cd vue-test-project
npm i
npm run dev

This will install Babel transpiler, Webpack bundler and other needed packages. After that you can use ES6 modules as long as you run npm run dev (to run) or npm run build (to build).

Useful link to read: Vue.js → Installation

This is an answer on "Why import doesn't work?" question. As @DecadeMoon has pointed, vue is not supposed to be run in node.

edited Jul 15, 2022 at 23:29

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jan 11, 2019 at 11:13

Styx

10.1k8 gold badges48 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Cannot import Vue: SyntaxError: Unexpected identifier

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related