Nuxt.js: Babel transform plugin not working within NuxtJS

[babakness]

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.

_{This question is available on Nuxt.js community (#c1596)}

[homerjam]

Have you tried .babelrc?

[babakness]

Hi James, yes I've tried all of .babelrc, package.json, and nuxt.config.js

[homerjam]

Hmmm. Does nuxt work without the pipeline operator in the code?

[homerjam]

How about extend()ing the webpack config?

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

[calebanthony]

@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)/
        })
      }
    }
}

[babakness]

Yeah, still doesn't work. Tried this:

extend (config, ctx) {
        config.module.rules.push( {
          test: /\.js$/,
          loader: 'babel-loader',
          exclude: /(node_modules)/,
          options: {
            "presets": [
              "es2015",
              "stage-2"
            ],
            "plugins": [
              "espower",
              "transform-runtime",
              "transform-pipeline"
            ]
          }
        })
    }

No luck. The |> operator is still not being interpreted

[homerjam]

Have you managed to get this working outside of nuxt? Maybe you can pinpoint the problem more easily in isolation.

[christophwolff]

Any updates on this?

[benmccallum]

Nuxt's webpack build, including babel-loader is configured here:
https://github.com/nuxt/nuxt.js/blob/40aa0ce41e6bae56939a9559aedbaa1ff7c3e879/lib/webpack/base.config.js#L70

It seems to indicate that it doesn't use the .babelrc config file, as it sets option babelrc: false. Instead it uses what's in nuxt.config.js > babel, merged with their default, prioritizing your setting obviously.

Furthermore, there is already a js file matching babel-loader configured. So I'm finding it, then adjusting the existing one based on what it looks like by default in the file I linked above.

Problem I'm having right now is if I include another directory (vue-bootstrap node_module I want to only import in pieces) it's failing on the spread operator in .nuxt/index.js, which is weird cuz that's not a new file I'm including, it's part of nuxt. Argh!

[mr-e-]

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?

[lenvonsam]

any solution for babel plugin in nuxt.config.js

[Merovex]

I see @clarkdo closed this by changing it to where .babelrc can now be used. However, is this actually fixed?

[mtnptrsn]

Im trying to use transform-regenerator and I have the same issue.

[bitsmakerde]

Hi,

i can't use any babel plugin, in my project. I'm using nuxt-edge with a express server.

What have I do:

nuxt.config.js
`build: {
/*
** You can extend webpack config here
*/
babel: {
plugins: [
["babel-plugin-inline-import"]
],
babelrc: true
},

extend (config, { isDev }) {
if (isDev && process.client) {
config.module.rules.push({
enforce: 'pre',
test: /.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
}
},`

.babelrc
{ "passPerPreset": true, "presets": [ "react", "es2015", "stage-0" ], "plugins": [ ["babel-plugin-inline-import", { "extensions": [ ".gql", ".graphql" ] }] ] }

Who is my error.

Thank you

[usb248]

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

[clarkdo]

Sorry for closing this issue, if you can still reproduce this issue, could you please provide a simple repo ?

And if you're using the custom server like express, nuxt won't transpile the server-side codes, you may need webpack or rollup to build your backend codes.

Another thing is that babelrc in nuxt is false by default, if you're using it, please config it as true

[benmccallum]

Can you explain what you mean by using the custom server? Are you saying if we pick any of the other server options when we setup with the cli that babel won't execute as part of the build/startup build?

Also, what's the benefits of using a custom server (like express) over the default? I'd definitely just use the default if I didn't need anything else and it was good enough.

[clarkdo]

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.

[janzheng]

@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!

[benmccallum]

Definitely good to see someone with success. I haven't really revisited this. But from your example and clarkdo's comments, it seems like that handles transpiration of files in your own app. For me I had an issue getting transpiration occurring on bootstrap JS files in it's node_modules folder, likely because it was being excluded by the default nuxt rule. Im sure it was just a matter of tweaking the extend like you did to setup your own exclude/include and make sure they transpire, I just never had enough time to get it working with what I tried.

[devunion]

@clarkdo Could you attach your .babelrc file also? So, we will have complete solution in one place.

[clarkdo]

@devunion
The babelrc depends on which feature you want to use in you server code, here is an example:

{
  "presets": ["es2015"],
  "plugins": ["transform-runtime",
    "transform-decorators-legacy",
    "transform-class-properties",
    "transform-object-rest-spread",
    "transform-async-to-generator", ["component", [{
      "libraryName": "element-ui",
      "styleLibraryName": "theme-default"
    }]]
  ],
  "comments": false,
  "env": {
    "development": {
      "retainLines": true,
      "sourceMaps": true,
      "comments": true
    }
  }
}

[rnenjoy]

Same here, tries to use:

{
  "presets": [
    ["env", {
      "targets": {
        "node": "9.3.0"
      }
    }]
  ],
  "plugins": [
    "babel-plugin-inline-import",
    ["transform-imports", {
      "vuetify": {
        "transform": "vuetify/es5/components/${member}",
        "preventFullImport": true
      }
    }]
  ]
}

with nuxt-edge, but its not respected.

[clarkdo]

@babakness Since this issue doesn't have any new information for a long time, I'll close it.

Nuxt 2 is going to release and upgrade to babel 7, you can have a glance at nuxt-edge 😸

[Merovex]

This should not have been closed. The defect remains, and there is an example that appears testable.

[clarkdo]

@menthol Could you provide a repo to reproduce the issue ?

[menthol]

@clarkdo ???

[clarkdo]

Sorry @Merovex

[shirohana]

I'm launching a new project with Nuxt, I can use babel-plugin-transform-flow-strip-types in my case. Does it helps?

package.json

  ...
  "dependencies": {
    "nuxt": "^1.4.2"
  },
  "devDependencies": {
    "babel-plugin-transform-flow-strip-types": "^6.22.0",
    "flow-bin": "^0.79.1"
  }
  ...

nuxt.config.js

module.exports = {
  build: {
    babel: {
      plugins: ['transform-flow-strip-types']
    }
  }
}

above: w/o plugins: ['transform-flow-strip-types'] in nuxt.config.js
below: w/ plugins: ['transform-flow-strip-types']

[clarkdo]

BTW, In Nuxt 1.0, if you want to use .babelrc, I think need to config build.babel.babelrc: true

Now babel-loader has changed the logic, we can also use extend for babelrc file
Some thing like : build.babel.extends: path.join(__dirname, "fixtures/babelrc"),

https://github.com/babel/babel-loader/blob/master/src/index.js#L70-L73

[JkmAS]

I have the same issue. I want to use babel-plugin-root-import for server side in nuxt-edge to support ~/path/file imports. But it seems, that the babelrc is ignored.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[manniL]

An interactive CodeSandbox that shows how to use the pipeline-proposal babel plugin with Nuxt 2 can be found here.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.