-
-
Notifications
You must be signed in to change notification settings - Fork 4.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Babel transform plugin not working within NuxtJS #1776
Comments
Have you tried |
Hi James, yes I've tried all of |
Hmmm. Does nuxt work without the pipeline operator in the code? |
How about
|
@homerjam is right about the So first make sure your 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)/
})
}
}
} |
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 |
Have you managed to get this working outside of nuxt? Maybe you can pinpoint the problem more easily in isolation. |
Any updates on this? |
Nuxt's webpack build, including babel-loader is configured here: 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! |
I am having the same issue. I have included the babel spread operator in my nuxt.config:
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? |
any solution for babel plugin in nuxt.config.js |
I see @clarkdo closed this by changing it to where .babelrc can now be used. However, is this actually fixed? |
Im trying to use transform-regenerator and I have the same issue. |
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 extend (config, { isDev }) { .babelrc Who is my error. Thank you |
I have the same issue ... I don't understand why this issue is closed while nobody can use babel plugin in nuxt ... |
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 |
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. |
I mean if you're using the custom server, the source codes belong to your server, such as 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. |
@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: Then I added
Then I also had to add the Hope this helps! |
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. |
@clarkdo Could you attach your .babelrc file also? So, we will have complete solution in one place. |
@devunion {
"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
}
}
} |
Same here, tries to use:
with nuxt-edge, but its not respected. |
@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 😸 |
This should not have been closed. The defect remains, and there is an example that appears testable. |
@menthol Could you provide a repo to reproduce the issue ? |
@clarkdo ??? |
Sorry @Merovex |
I'm launching a new project with Nuxt, I can use package.json ...
"dependencies": {
"nuxt": "^1.4.2"
},
"devDependencies": {
"babel-plugin-transform-flow-strip-types": "^6.22.0",
"flow-bin": "^0.79.1"
}
... nuxt.config.jsmodule.exports = {
build: {
babel: {
plugins: ['transform-flow-strip-types']
}
}
} above: w/o |
BTW, In Nuxt 1.0, if you want to use .babelrc, I think need to config Now https://github.com/babel/babel-loader/blob/master/src/index.js#L70-L73 |
I have the same issue. I want to use |
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. |
An interactive CodeSandbox that shows how to use the pipeline-proposal babel plugin with Nuxt 2 can be found here. |
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. |
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
babel/proposals#29
I have the following
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.
The text was updated successfully, but these errors were encountered: