SyntaxError: Unexpected token export

[AlexanderReiswich]

After upgrading Nuxt to the latest version 2.5.1 the following highly unhelpful error started popping up:

I can reproduce the error by creating a fresh Nuxt project with a package.json like this:

{
  ...
  "scripts": {
    "dev": "nuxt -p 3002",
    "build": "nuxt build"
  },
  "dependencies": {
    "cross-env": "^5.2.0",
    "nuxt": "^2.5.1",
    "nuxt-property-decorator": "^2.1.3",
    "@nuxtjs/axios": "^5.3.6"
  },
  "devDependencies": {
    "nodemon": "^1.18.9",
    "@nuxtjs/eslint-config": "^0.0.1",
    "@nuxt/babel-preset-app": "^2.5.1",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.15.1",
    "eslint-config-standard": ">=12.0.0",
    "eslint-plugin-import": ">=2.16.0",
    "eslint-plugin-jest": ">=22.3.0",
    "eslint-plugin-node": ">=8.0.1",
    "eslint-plugin-nuxt": ">=0.4.2",
    "eslint-plugin-promise": ">=4.0.1",
    "eslint-plugin-standard": ">=4.0.0",
    "eslint-loader": "^2.1.2",
    "eslint-plugin-vue": "^5.2.2",
    "eslint-config-prettier": "^4.1.0",
    "eslint-plugin-prettier": "^3.0.1",
    "prettier": "^1.16.4"
  }
}

And nuxt.config as per documentation:

build: {
    babel: {
      presets({ isServer }) {
        return [
          [
            '@nuxt/babel-preset-app', { loose: true }
          ]
        ]
      }
    },
    ...

The error occurs as soon as I add nuxt-property-decorator.

[AlexanderReiswich]

And here's a repro in CodeSandbox:

https://codesandbox.io/s/lx0k3o92m

[ChenZhuoSteve]

same problem

[kevinmarrec]

Can be related to dependencies not up to date are sync issues with Nuxt ones. Can you just try vue-property-decorator and remove the extra babel setup to see if you still have the same issue ?

/cc @husayt Maybe you have any help to provide ? I'm not using nuxt-property-decorator so I can't really be helpful.

[AlexanderReiswich]

@kevinmarrec Thanks for the suggestion. Using vue-property-decoratorcauses precisely the same error message, as can be seen here: https://codesandbox.io/s/10r1j8vw0l

However, vue-property-decorator works perfectly fine in a regular vue app, of course, so it must be related to Nuxt somehow...

[ChenZhuoSteve]

@AlexanderReiswich

I found a workaround that works fine in my local environment. Not used in codesandbox.

build: {
    transpile: [
    new RegExp(".*@babel\/runtime\/helpers\/esm/.*", "ig")
    ],
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
    }
}

[lorenzocadamuro]

same problem

[ChenZhuoSteve]

@lorenzocadamuro Can you please try my workaround, I need feedback. nuxt.config.js

build: {
    transpile: [
    new RegExp(".*@babel\/runtime\/helpers\/esm/.*", "ig")
    ],
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
    }
}

[AlexanderReiswich]

@ChenZhuoSteve For me it doesn't solve the issue, unfortunately. The error disappears, but once I create a class component with decorators it reappears again, as can be seen here https://codesandbox.io/s/10r1j8vw0l

Haven't tried it in a local install, but I'm fairly sure the behavior will be the same...

[lorenzocadamuro]

@ChenZhuoSteve yep, it works

@AlexanderReiswich you have to remove the babel configuration

build: {
    babel: {
      presets({ isServer }) {
        return [
          [
            '@nuxt/babel-preset-app', { loose: true }
          ]
        ]
      }
    },
    ...

[AlexanderReiswich]

@lorenzocadamuro I already did... Have you tried adding a class component with Props, Watchers etc.?

Also, once I add i.e. @Prop(String) testpropthe following error appears:

Decorating class property failed. Please ensure that proposal-class-properties is enabled and set to use loose mode. To use proposal-class-properties in spec mode with decorators, wait for the next major version of decorators in stage 2.

[lorenzocadamuro]

@AlexanderReiswich yes I did. I also tried to create my own decorator.

This is my build configuration:

  /*
   ** Build configuration
   */
  build: {
    transpile: [new RegExp('.*@babel/runtime/helpers/esm/.*', 'ig')],
    /*
     ** You can extend webpack config here
     */
    extend(config, ctx) {}
  }

Have you set the "experimentalDecorators": true on your tsconfig.json and installed @nuxt/typescript dependence?

My component looks like this:

<script>
import { Vue, Component } from 'nuxt-property-decorator'
import { NoCache } from '~/decorators'

@Component({
  components: {},
  props: {}
})
export default class Carousel extends Vue {
...

[lorenzocadamuro]

@AlexanderReiswich ok actually I have the same your problem with the Decorators of https://github.com/ktsn/vuex-class/

@Watch decorator works

[AlexanderReiswich]

@lorenzocadamuro I was trying to get it to work in a non-TS Nuxt installation, which is why I don't have a @nuxt/typescript dependency nor a tsconfig.json in the project.

For me, something like this works:

@Component({
  props: ['testProp']
})

But this doesn't:

export default class LogoComponent extends Vue {
  @Prop(String) testProp

[lorenzocadamuro]

@AlexanderReiswich same

Regarding @Watch?

[AlexanderReiswich]

@lorenzocadamuro Same thing for watch, works within @Component decorator, but when used as its own decorator i.e.:

@Watch("test")
  onTestChanged(val, oldVal) {
    console.log(val);
  }

Same error "Unexpected token export" happens.

However, if I add the @Watch decorator without restarting the app, it works fine. The error occurs only after I re-run the app.

[ChenZhuoSteve]

build: {
    terser: false,
    transpile: [
    new RegExp(".*@babel\/runtime\/helpers\/.*", "i")
    ],
    presets({ isServer }) {
    return [
        [
        "@nuxt/babel-preset-app", { loose: true }
        ]
    ]
    },
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
    }
}

Got different error messages.

[AlexanderReiswich]

@ChenZhuoSteve Nice, this helped! The following config is now working fine for me:

  build: {
    transpile: [new RegExp(".*@babel/runtime/helpers/.*", "i")],
    babel: {
      plugins: [
        ["@babel/plugin-proposal-decorators", { legacy: true }],
        ["@babel/plugin-proposal-class-properties", { loose: true }]
      ]
    },
    extend(config, ctx) {}
  }

[husayt]

The transpile shouldn't be necessary. Actually do you still have this issue with nuxt 2.6.0? If yes could you provide a reproducible simple project on codesandbox. I will then try to come with a solution. For me it works all fine.

[AlexanderReiswich]

@husayt Indeed, seems like it's been fixed in 2.6.0+! For me it's now working with the configuration from the documentation (without transpile) with 2.6.1.

[husayt]

Seems like resolved with new Nuxt version. There were a number of issues with 2.5.0 and 2.6.x is addressing most of them. It's difficult to add lots of new features, while making sure old stuff keeps working. Kudos to Nuxt team for amazing work. I can't wait v.3