nuxt: Babel transform plugin not working within NuxtJS

Hello, I’m trying to use the newly approved to Stage-1 pipeline operator in a project.

https://github.com/SuperPaintman/babel-plugin-transform-pipeline

https://github.com/babel/proposals/issues/29

I have the following

babel: {  
      "presets": [
        "es2015",
        "stage-2"
      ],
      "plugins": [
        "espower",
        "transform-runtime",
        "transform-pipeline"
      ]
    }

in nuxt.config.js, .babelrc (without the “babel” key), and package.json. Yet I’m still getting “Syntax Error: Unexpected Token”

Any advise on how to get this working with Nuxt would be appreciated. I’ve tried restarting the server.

<div align="right">_{This question is available on Nuxt.js community (#c1596)}</div>

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 34 (8 by maintainers)

Most upvoted comments

I have the same issue … I don’t understand why this issue is closed while nobody can use babel plugin in nuxt …

usb248 on May 29, 2018

I am having the same issue. I have included the babel spread operator in my nuxt.config:

build: { babel: { 'plugins': ['transform-object-rest-spread'] } }

and I still get a compile error Unexpected Token. I too have tried using a .babelrc and I also get errors regarding the spread operator on internal nuxt files. If nuxt is using spread internally then why can’t we?

mr-e- on Jan 25, 2018

Any updates on this?

christophwolff on Oct 20, 2017

@homerjam is right about the extend(). Just adding in the .babelrc isn’t enough, you also have to tell Webpack to use it.

So first make sure your .babelrc is set up. Then, in your nuxt.config.js:

build: {
    extend (config, ctx) {
      if (ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        }, {
          test: /\.js$/,
          loader: 'babel-loader',
          exclude: /(node_modules)/
        })
      }
    }
}

calebanthony on Oct 6, 2017

I mean if you’re using the custom server, the source codes belong to your server, such as router, api, model and so on, they won’t be transpiled by nuxt, because these codes are outside the nuxt.

Hope you can understand my poor English, sorry for this.

The benefits of a customer is that you can make your project be a more full functionalities application. Nuxt is more involved in frontend pages and rendering. You can implement your complex backend logic (API, router, DB/Cache interaction) with custom server, it also can make you have an organized MVC architecture on the server side.

clarkdo on Jun 9, 2018

any solution for babel plugin in nuxt.config.js

lenvonsam on Feb 2, 2018

@clarkdo is right, this is how I got object-spread to work:

First I made sure to install the babel plugins I needed, by running: npm install --save-dev babel-cli babel-preset-es2015 and npm install --save-dev babel-plugin-transform-object-rest-spread

Then I added babel to the build section, specifying what presets and plugins to use, and then I added babel-loader like mentioned above:

build: {
    babel: {
      presets: ['es2015', 'stage-2'],
      plugins: ["transform-vue-jsx", "transform-runtime", "transform-object-rest-spread"],
    },
    extend (config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push(
        {
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        },{
          test: /\.js$/,
          loader: 'babel-loader',
          exclude: /(node_modules)/
        })
      }
    }
}

Then I also had to add the .babelrc file with all the same plugins specified in there.

Hope this helps!

janzheng on Jun 9, 2018