Build error next.js 6.0.0 #4227
Comments
|
I'm curious, which custom server are you using? |
|
@DevSpeak express |
|
Update: I updated all my babel dependencies and |
|
I have this exact same issue with Babel and Next. |
|
I'm getting Using a custom server (express), withSass and TypeScript. |
|
what about Babel config? babel-cli -> |
|
@sea129 Yeah I have all that. |
|
I've had the same problem since https://github.com/zeit/next.js/releases/tag/6.0.0-canary.3 |
|
please post your .babelrc, next.config.js etc. It's definitely related to which modules you're using in Also please follow the issue template when creating issues, as you can understand it's impossible to help you solve issues you're having based on: "it doesn't work, I get this error" |
|
.babelrc next.config.js |
|
In my case I believe it's related to |
|
@timneutkens Sorry about that .babelrc{
"presets": [
"next/babel",
],
"plugins": [
"styled-jsx/babel",
"@babel/plugin-syntax-dynamic-import",
["lodash", {"id": ["lodash", "semantic-ui-react"]}]
],
"comments": false,
"compact": true,
"env": {
"development": {
"plugins": [
"transform-modules",
"react-hot-loader/babel"
]
}
}
}package.json{
"name": "frontend-next",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "babel-node ./src/server.js",
"dev-mon": "nodemon --watch src/components ./src/server.js --exec=babel-node",
"start": "NODE_ENV=production node ./src/server.js",
"build": "next build",
"analyze": "NODE_ENV=production BUNDLE_ANALYZE=both next build",
"analyze:browser": "NODE_ENV=production BUNDLE_ANALYZE=browser next build",
"analyze:server": "NODE_ENV=production BUNDLE_ANALYZE=server next build"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@zeit/next-sass": "0.1.1",
"apollo-client-preset": "^1.0.8",
"apollo-link-context": "^1.0.8",
"autoprefixer": "^8.4.1",
"babel-loader": "^8.0.0-beta.2",
"cloudinary-react": "^1.0.6",
"compression": "^1.7.2",
"cookie-parser": "^1.4.3",
"cross-fetch": "^2.1.1",
"es6-promise": "^4.2.4",
"graphql": "^0.13.2",
"graphql-tag": "^2.9.1",
"immutability-helper": "^2.7.0",
"lodash": "^4.17.10",
"moment-mini": "^2.19.4",
"next": "^6.0.0",
"next-routes": "^1.4.1",
"password-maker": "^1.1.3",
"postcss": "^6.0.22",
"postcss-colour-functions": "^1.5.2",
"postcss-conditionals": "^2.1.0",
"postcss-cssnext": "^3.0.2",
"postcss-easy-import": "^3.0.0",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.1.4",
"postcss-simple-vars": "^4.1.0",
"prop-types": "^15.6.1",
"react": "^16.3.2",
"react-apollo": "^2.1.3",
"react-dates": "^16.6.1",
"react-document-title": "^2.0.3",
"react-dom": "^16.3.2",
"react-fancy-button": "^1.0.5",
"react-icons-kit": "^1.1.3",
"react-redux": "^5.0.7",
"react-redux-loading-bar": "^4.0.4",
"react-redux-snackbar": "^1.1.0",
"react-toastify": "^4.0.0-rc.5",
"react-validify": "^4.0.0",
"redux": "^4.0.0",
"redux-promise-middleware": "^5.1.1",
"redux-thunk": "^2.2.0",
"semantic-ui-css": "^2.3.1",
"semantic-ui-react": "^0.79.1",
"tailwindcss": "^0.5.2",
"universal-cookie": "^2.1.2"
},
"devDependencies": {
"@babel/cli": "^7.0.0-beta.46",
"@babel/core": "^7.0.0-beta.46",
"@babel/node": "^7.0.0-beta.46",
"@babel/plugin-syntax-dynamic-import": "^7.0.0-beta.46",
"@babel/preset-env": "^7.0.0-beta.46",
"@zeit/next-bundle-analyzer": "^0.1.1",
"babel-plugin-lodash": "^3.3.2",
"babel-plugin-transform-modules": "^0.1.1",
"classnames": "^2.2.5",
"emit-file-loader": "0.0.1",
"extract-text-webpack-plugin": "^3.0.2",
"node-sass": "^4.9.0",
"nodemon": "^1.17.2",
"react-hot-loader": "^4.1.2",
"redux-devtools-extension": "^2.13.2",
"redux-logger": "^3.0.6",
"sass-loader": "^6.0.7",
"style-loader": "^0.20.3",
"styled-jsx": "^2.2.6",
"styled-jsx-css-loader": "^0.3.0",
"uglifyjs-webpack-plugin": "^1.2.5",
"webpack-bundle-analyzer": "^2.11.1"
},
"peerDependencies": {
"node-sass": "^4.7.2"
}
}next.config.jsconst withBundleAnalyzer = require("@zeit/next-bundle-analyzer");
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
const withCSS = require('@zeit/next-css')
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
const getRoutes = require('./src/routes')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const ExtractVendorCSS = new ExtractTextPlugin('static/vendor.css')
const util = require('util')
const webpack = require('webpack')
const path = require('path')
module.exports = withBundleAnalyzer( withCSS({
cssLoaderOptions: {
importLoaders: 1,
},
analyzeServer: ["server", "both"].includes(process.env.BUNDLE_ANALYZE),
analyzeBrowser: ["browser", "both"].includes(process.env.BUNDLE_ANALYZE),
bundleAnalyzerConfig: {
server: {
analyzerMode: 'static',
reportFilename: '../../bundles/server.html'
},
browser: {
analyzerMode: 'static',
reportFilename: '../bundles/client.html'
}
},
webpack(config, options) {
if( process.env.NODE_ENV == 'production') {
config.plugins.push(
new UglifyJSPlugin
)
}
config.module.rules.push( {
test: /\.scss$/,
use: ExtractVendorCSS.extract({
use: [
{
loader: 'css-loader',
options: {
importLoaders: 1
}
},
'sass-loader'
]
}),
include: /node_modules/
} );
//Exclude Semantic UI from css build
config.module.rules.forEach( rule => {
if( String(rule.test).match(/\.css/) ){
rule.exclude = [ /semantic-ui-css/, /react-fancy-button/, /react-dates/, /react-toastify/ ]
}
})
config.module.rules.push({
test: /\.css$/,
use: [
{
loader: 'emit-file-loader',
options: {
name: 'dist/[path][name].[ext]',
},
},
{
loader: 'babel-loader',
options: {
babelrc: false,
extends: path.resolve(__dirname, './.babelrc'),
},
},
'styled-jsx-css-loader',
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: (loader) => [
require('autoprefixer')(),
require('cssnano')({
discardComments: { removeAll: true },
})
]
}
}
],
include: [ /semantic-ui-css/]
});
config.module.rules.push( {
test: /\.css$/,
use: ExtractVendorCSS.extract({
use: [
'css-loader'
]
}),
include: [ /react-fancy-button/, /react-dates/, /react-toastify/ ]
} );
config.plugins.push( ExtractVendorCSS );
config.plugins.push( new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/) )
config.output.publicPath = 'http://localhost:3000/'
//console.log( util.inspect(config , false, null) );
return config
},
exportPathMap: getRoutes,
useFileSystemPublicRoutes: false
})) |
|
@paschaldev if you define settings per environment using {
"env": {
"development": {
"presets": ["next/babel"],
"plugins": [
["styled-components", { "ssr": true, "displayName": true, "preprocess": false }],
["inline-react-svg"]
]
},
"production": {
"presets": ["next/babel"],
"plugins": [
["styled-components", { "ssr": true, "displayName": false, "preprocess": false }],
["inline-react-svg"]
]
},
"test": {
"presets": [["next/babel", { "preset-env": { "modules": "commonjs" } }]],
"plugins": [
["styled-components", { "ssr": true, "displayName": false, "preprocess": false }],
["inline-react-svg"]
]
}
}
}Yes, it's ugly, but it works. |
|
@ghengeveld Did that, same error still .babelrc |
|
There's a lot of things i'm not understanding from your Why are you adding Same for
|
|
So you can literally remove the whole |
|
@timneutkens Thanks for the info. I was browsing the This is what my updated Stripped down everything but I still get the same error |
|
This is my import Document, { Head, Main, NextScript } from 'next/document'
import 'react-fancy-button/dist/FancyButton.scss'
export default class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
render () {
return (
<html>
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel='stylesheet' href='/_next/static/vendor.css' />
<link rel='stylesheet' href='/_next/static/style.css' />
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,300,400,500,700,900" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Quicksand:300,400,500,700" rel="stylesheet"/>
</Head>
<body>
<Main />
<NextScript />
</body>
</html>
)
}
} |
Happened to me too, but only when running the tests (using Reproducible on https://github.com/GabrielDuarteM/portfolio, just run The complete error log can be seen on this Travis build
package.json .babelrc next.config.js |
|
Also experiencing this package.json .babelrc next.config.js |
|
Continued looking at this this morning. I threw together this super simple example app which for me reproduces the error every time. https://github.com/ljanssen5/next-test While playing around with this, I noticed that if I remove the devDependency of babel/core or babel-loader, everything works fine. If they are both there though, the error occurs. So not positive what the issue is exactly yet, but it seems to me that babel-loader 8.0.0-beta.2 and @babel/core 7.0.0-beta.46 are not jiving. |
|
I was finally able to get past this issue. However my solution may not work for all. The app I am working on has a very simple babel setup as seen below. Once I realized that next was already taking care of babel/preset-env, I realized I didnt need to be using a custom babelrc at all or installing any babel packages in my packages.json. After cleaning out the packages.json of babel packages and deleting .babelrc, I am back in business. I don't believe this solution is going to work for everyone as I assume some are going to need to use custom .babelrc, but thought I'd share in case others find themselves in a similar boat as I was. |
|
So lets first start with explaining that you should never add Instead you can provide options to Also when providing options don't set Besides that try running https://github.com/babel/babel-upgrade to upgrade your |
|
@GabrielDuarteM to fix |
|
Guys thanks for the help so far. Thank you @timneutkens for the tips. @ljanssen5 your solution worked for me. I realized the only thing I needed from babel was |
|
@timneutkens I did move the env part to next/babel config, and installed |
|
@GabrielDuarteM, in that case you need to do this: And use |
|
Finally, I've found simplest way to fixed it in next 6.0.0 + just put babel config like this /server/.babelrc devDependencies + start script |
|
@banyawat Doesn't next build use webpack too? |
Hello! I ran into an issue using typescript and jest with next 6.0.0. I was able to work through fixing it and I wanted to share my solution back to next.js, by upgrading the with-jest-typescript example to next 6.0.0. The steps I followed were: 1. `npx babel-upgrade --write` which added babel-core@^7.0.0-bridge.0 to allow jest's babel 6 to play nice with next's babel 7 2. Remove `ts-jest` and replace with `babel-jest` to use babel to transform the typescript code, as is done when the dev and production builds run 3. Update the babelrc to use commonjs modules in test mode to be compatible with jest Also, I removed the `NODE_ENV=test` on the jest task, because jest sets the env to test anyways, and I'm on windows where this code is incorrect. The other option is to use `cross-env` but I felt it was simpler to just remove the environment override. To my knowledge, this PR would help on the following issues: #3663 #4227 #4531 #4528 #4239
Hello! I have got an error while building [gh-pages example](https://github.com/zeit/next.js/tree/canary/examples/gh-pages) with next 6.0.3. I have found solution to use CommonJS modules in `.babelrc` This resolves #4227
|
i same issue ` |
|
@khacthanh244 // .babelrc.js
const env = require("./env-config.js");
module.exports = {
presets: ["next/babel"],
plugins: [["transform-define", env]]
}; |
|
We were suffering "works on my machine" syndrome and for us it was as simple as deleting |
|
@timneutkens There is a lot of duplicated effort as people individually discover forcing resolutions in yarn (and even having to switch to yarn), and unfortunately most of this knowledge is held in this closed thread. Are there plans to update next6 to a later babel beta version in order to fix this problem (outside of the forks like #4227 (comment), which I suppose could've been a PR)? Or is the official plan to wait until babel 7 full release unless a good PR comes in? |
…er and loader options (vercel#4417) This resolves the > .value is not a valid Plugin property error showing up for people in vercel#4227 cc @timneutkens
Hello! I ran into an issue using typescript and jest with next 6.0.0. I was able to work through fixing it and I wanted to share my solution back to next.js, by upgrading the with-jest-typescript example to next 6.0.0. The steps I followed were: 1. `npx babel-upgrade --write` which added babel-core@^7.0.0-bridge.0 to allow jest's babel 6 to play nice with next's babel 7 2. Remove `ts-jest` and replace with `babel-jest` to use babel to transform the typescript code, as is done when the dev and production builds run 3. Update the babelrc to use commonjs modules in test mode to be compatible with jest Also, I removed the `NODE_ENV=test` on the jest task, because jest sets the env to test anyways, and I'm on windows where this code is incorrect. The other option is to use `cross-env` but I felt it was simpler to just remove the environment override. To my knowledge, this PR would help on the following issues: vercel#3663 vercel#4227 vercel#4531 vercel#4528 vercel#4239
Hello! I have got an error while building [gh-pages example](https://github.com/zeit/next.js/tree/canary/examples/gh-pages) with next 6.0.3. I have found solution to use CommonJS modules in `.babelrc` This resolves vercel#4227
|
Hey @billnbell is your working next6/typescript monorepo available to see anywhere? I have a next5/typescript monorepo but trying to migrate to next6 and not having much luck. |
|
I'm running a custom Express server too, and I placed all the server code under |
|
In my case, the problem is:
This is how my preset looks like now: Now everything works fine in Next 6.1.1 🎉 |
|
I have simply this: {
"presets": ["next/babel"]
}...and even that fails. If I have no Update: This works, and I run my tests with {
"env": {
"development": {
"presets": ["next/babel"]
},
"production": {
"presets": ["next/babel"]
},
"mocha": {
"presets": [["next/babel", { "preset-env": { "modules": "commonjs" } }]]
}
}
} |
|
facing same issue, dependencies (from package.json) error
|
|
The only way I could make it work was by running https://github.com/babel/babel-upgrade which upgrades any babel transformations you're using. And I changed my .babelrc file: Also if you're using jest upgrade babel-jest to the latest version and install "babel-core": "7.0.0-bridge.0". |
|
Please read my earlier comment: #4227 (comment) |
|
@timneutkens I have a question. then how can I use ES6 in my custom server? |
|
There's 2 options:
|
|
@timneutkens How can I verify if code splitting with Webpack is broken in my project? |
|
I think it's getting a bit far from the original issue report. A lot of persons have subscribed to this issue, so if you could open specific issues for specific problems... 🙌 and keep this thread for the problem described in message n°1 :) |
|
Moved my questions to https://spectrum.chat/next-js |
and others
I just upgraded to
next@6.0.0, I use a custom server, when I try torun dev, I get an error.Now this is the new error.... See below for complete error message
The text was updated successfully, but these errors were encountered: