Nuxt.js: SyntaxError: Unexpected token import

[WisdomEye]

Version

v2.4.0

Reproduction link

https://github.com/nuxt/nuxt.js/issues/

Steps to reproduce

Fresh install of nuxt 2.4.0
Run:

npm run build

Then install pm2
Then try register the app with:

pm2 start .nuxt/server.js --watch

The app is registered and die with error on pm2 logs:

../.nuxt/server.js:1
(function (exports, require, module, __filename, __dirname) { import { stringify } from 'querystring' 

SyntaxError: Unexpected token import
  at createScript (vm.js:80:10)
  at Object.runInThisContext (vm.js:139:10)
  at Module._compile (module.js:617:28)
  at Object.Module._extensions..js (module.js:664:10)
  at Module.load (module.js:566:32)
  at tryModuleLoad (module.js:506:12)
  at Function.Module._load (module.js:498:3)
  at Function._load (/usr/lib/node_modules/pm2/node_modules/@pm2/io/build/main/metrics/httpMetrics.js:172:43)
  at Object.<anonymous> (/usr/lib/node_modules/pm2/lib/ProcessContainerFork.js:27:21)
  at Module._compile (module.js:653:30)

Same error about token issue occours if I try use Passenger.

What is expected ?

Load in both Passenger and PM2 without errors (on this issue, fixing the token error about import { stringify })

What is actually happening?

Can not run because the error on token importing { stringify }

Additional comments?

Vanilla Vue run on both: Passenger and PM2 without errors.

_{This bug report is available on Nuxt community (#c8928)}

[manniL]

PLease provide an example repo or similar.

[galvez]

Remove node_modules, remove yarn.lock/package-lock.json and reinstall.

[jloewe]

I get a similar error when running node .nuxt/server.js.
I upgraded from 2.4.5 to 2.5.1 and I deleted package-lock.json and node-modules before the upgrade.

(function (exports, require, module, __filename, __dirname) { import { stringify } from 'querystring'
                                                                     ^
SyntaxError: Unexpected token {

Full Stacktrace

(function (exports, require, module, __filename, __dirname) { import { stringify } from 'querystring'
                                                                     ^

SyntaxError: Unexpected token {
    at new Script (vm.js:79:7)
    at createScript (vm.js:251:10)
    at Object.runInThisContext (vm.js:303:10)
    at Module._compile (internal/modules/cjs/loader.js:657:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:742:12)
    at startup (internal/bootstrap/node.js:283:19)

Reproduction

Code: https://github.com/jloewe/nuxt-unexpected-token-repro
Sandbox: https://codesandbox.io/s/github/jloewe/nuxt-unexpected-token-repro

[WisdomEye]

I have tried install lastest version, and also install stable and then upgrade following the steps of the hint from @jloewe sayed, without success.

I have forget the specify my enviroment:

Debian: Stretch 9.8 (x64)
npm: 6.9.0
node: v8.15.1
apache: 2.4.25
pm2: 3.4.0
passenger: 5.0.30

How to setup passenger on Apache using Vanilla Vue:

# Tell Apache and Passenger where your app's code directory is
DocumentRoot "{DOCROOT_CLIENT}/dist"
PassengerAppRoot {DOCROOT_CLIENT}

# Tell Passenger that your app is a Node.js app
PassengerAppType node
PassengerStartupFile {DOCROOT_CLIENT}/dist/js/App.js

How to setup pm2 on Apache using Vanilla Vue:

ProxyPass / http://127.0.0.1:3000/
ProxyPassReverse / http://127.0.0.1:3000/
ProxyPreserveHost On

You need change for your current available port.

[pi0]

That may be because of babel.config.js existence in the project folder. This has been fixed for upcoming 2.5.2.

[WisdomEye]

@pi0
I don't think this is the source of problem, at last on Vanilla Vue enabling all features like:

vue create test

Babel
Typescript
Progressive Web App (PWA) Support
Touter
Vuex
CSS pre-processors
Linter / Formatter
Unit Testing
E2E testing

Use class-style component syntax -> Y

Use Babel alongside TypeScript for auto-detected polyfills -> Y

Use history mode for router -> Y

Sass/SCSS (with node-sass)

ESLint + Prettier

Lint on Save
Lint and fix on commit

Mocha + Chai

Cypress

In dedicated config files

Then will create babel.config.js also, and works, in Passenger and PM2 also.

[jloewe]

@pi0
I currently don't have a babel.config.js in my Project Folder.
But I have a babel block in my nuxt.config.js.

nuxt.config.js - babel

...
babel: {
      presets: ["@nuxt/babel-preset-app"],
      plugins: [
        "@babel/plugin-transform-runtime"
      ]
},
...

https://github.com/jloewe/nuxt-unexpected-token-repro/blob/master/nuxt.config.js

[manniL]

@jloewe that preset is used by default and AFAIK y

[jloewe]

@manniL I deleted it. Thank you for the info.

After I deleted the babel block from nuxt.config.js everything worked fine.

I also deleted

• @babel/cli
• @babel/core
• @babel/plugin-transform-runtime
• @nuxt/babel-preset-app

from package.json

Updated version of my code. Now working:
https://codesandbox.io/s/7m6v78m3v0

[NextStepGuru]

this isn't very helpful.

i removed @babel/* - removed my node_modules & package-lock

then i used yarn and everything is working exactly as expected.

something must be jacked up with NPM.

[stale[bot]]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as 🕐Pending will not be automatically marked as stale.

[visualbam]

I'm running into the same issue/error.

nuxt: 2.6.2
npm: 6.4.1
node: 10.15.3
pm2: 3.5.0

• I've tried using npm, deleted .nuxt and node_modules and using yarn to no avail.
• I don't have a .babel.config.js or babel block in my .nuxt.config.

I'll try to get an example repo up but was wondering if anyone else has gone through the problem differently?

Edit: This is happening on freshly created nuxt apps using both npm / yarn
Edit2: Pretty sure this happens when you try running pm2 off of a dev build instead of prod

[savasturkoglu1]

Any solution ?
I have try all contributes, remove and reinstall node-modules and package-lock, upgrade pm2 , upgrade nuxt version, its not worked for me.

[NextStepGuru]

Any solution ?
I have try all contributes, remove and reinstall node-modules and package-lock, upgrade pm2 , upgrade nuxt version, its not worked for me.

did you try deleting your .nuxt auto-generated folder as well? with the nuxt 2.6.2 version - i haven't seen this problem happen any more.

[savasturkoglu1]

@NextStepGuru

Any solution ?
I have try all contributes, remove and reinstall node-modules and package-lock, upgrade pm2 , upgrade nuxt version, its not worked for me.

did you try deleting your .nuxt auto-generated folder as well? with the nuxt 2.6.2 version - i haven't seen this problem happen any more.

No I did not try it, which folder I must remove do you know

[NextStepGuru]

well typica

@NextStepGuru

Any solution ?
I have try all contributes, remove and reinstall node-modules and package-lock, upgrade pm2 , upgrade nuxt version, its not worked for me.

did you try deleting your .nuxt auto-generated folder as well? with the nuxt 2.6.2 version - i haven't seen this problem happen any more.

No I did not try it, which folder I must remove do you know

typically its the .nuxt folder in the root of your project.

[savasturkoglu1]

well typica

@NextStepGuru

Any solution ?
I have try all contributes, remove and reinstall node-modules and package-lock, upgrade pm2 , upgrade nuxt version, its not worked for me.

did you try deleting your .nuxt auto-generated folder as well? with the nuxt 2.6.2 version - i haven't seen this problem happen any more.

No I did not try it, which folder I must remove do you know

typically its the .nuxt folder in the root of your project.

I tried this. remove .nuxt compile and " npm run build" again but this not solved my problem, my website yesterday was working normally, today not working, İ dont understant

[savasturkoglu1]

when I run 'npm start' my web site works normaly, but when I run 'pm2 start npm -- start' get 503 error, and given
..... (function (exports, require, module, __filename, __dirname) { import { stringify } from 'querystring'
log

[KonstantinVlasov]

Hi @savasturkoglu1!
I have the same issue, after upgrade to 2.6.x
Did you resolve this problem?

[WisdomEye]

Hi @savasturkoglu1!
I have the same issue, after upgrade to 2.6.x
Did you resolve this problem?

Did you removed the lock files?
Try:

delete package-lock.json
delete node_modules

Upate the package.json to desired version

Run:

npm install

[rchl]

Many comments here refer to issues when using node .nuxt/server.js to start nuxt. You can't do that, regardless if using pm2 or not, as node won't be able to parse ES imports syntax. You need to start using nuxt starter script (for example ./node_modules/.bin/nuxt start). So I think this bug report is invalid.

[manniL]

@rchl Kind of, yes.

If you use Nuxt.js programmatically and see this error, try you could use node -r esm path/to/server.js. Anyway, please think about using serverMiddleware or a standalone API for your project (you can read my take on Nuxt + API if you want).

If you don't, it might be related to not having transpiled node modules, but then it's usually Unexpected Token <

[rchl]

@manniL Yes, but I was referring specificially to comments that mentioned running .nuxt/server.js directly which means they are not running nuxt programatically.

[Anaphase]

I'm not sure if I'm in the right place here, but I've been trying to get babel to transpile es6 imports within server/index.js and I can't seem to figure out how to get that to work... I've tried changing the npm run dev command to have nodemon run server/index.js with babel-node, but since the project has no .babelrc I have to define one for babel-node to read.

Should I just have nuxt read from the .babelrc with something like nuxt-babel? Or am I missing something obvious here? Is it possible to have babel transpile es6 imports statements on server-side scripts? This is my first few hours with Nuxt so I'm sorry if this is a stupid question.

[rchl]

@Anaphase https://discord.nuxtjs.org/ is better place to ask such questions.

[JohnieXu]

@jloewe that preset is used by default and AFAIK y

After I deleting the plugins block, i still got an error Unexpected token export

https://codesandbox.io/s/tool-81cc1

[heshamelmasry77]

https://discord.nuxtjs.org/

not good at all, because now a person like me trying to find a solution for this bug and i am expecting to find it here.