migration from 5 to 6 #4239
Comments
|
I try migration from 5 to 6 in my own project. |
|
it's not mistakes most of it coming from major babel update from 6 to 7, but still, having a manual or roadmap would be super useful, otherwise you need to spend N amount of times to bring it all together |
|
The only thing that is not backwards compatible (but it is when you don't use .babelrc) is the upgrade to Babel 7, the rest of the changes are incremental features and fixes. The only thing you have to do is run https://github.com/babel/babel-upgrade, and upgrade any other babel transformations you were already using. Also if you're using jest upgrade These are the things I had to do to upgrade zeit.co to support babel 7. So for me it took ~15minutes to upgrade. Besides having to make a small change to markdown-in-js to support babel 7 (took me 15mins also) |
|
I tried to follow your steps. A couple things:
and I'm still getting error: so it works fine without |
|
@sarkistlt can you provide a reproduction? Regarding transform-define, for zeit.co we actually switch to const env = {
VERSION: require('./package').version
}
module.exports = {
presets: ['next/babel'],
plugins: [['transform-define', env]]
} |
|
nice, yes works fine with |
|
@sarkistlt could you provide a minimal reproduction for it? |
|
project is pretty big, so I can share my configs: for front-end const development = require('./config-client/default.json');
const staging = require('./config-client/staging.json');
const production = require('./config-client/production.json');
module.exports = {
presets: [
'next/babel',
'@babel/preset-flow',
'@babel/preset-react',
[
'@babel/preset-stage-0',
{
decoratorsLegacy: true,
},
],
[
'@babel/preset-env',
{
targets: {
browsers: [
'>= 5%',
],
},
},
],
],
plugins: [
'@babel/plugin-transform-react-inline-elements',
'@babel/plugin-proposal-object-rest-spread',
'@babel/plugin-proposal-class-properties',
'@babel/plugin-transform-runtime',
[
'import',
{
libraryName: 'antd',
},
],
],
env: {
development: {
plugins: [
['transform-define', development],
],
},
staging: {
presets: [
[
'minify',
{
mangle: false,
evaluate: false,
},
],
],
plugins: [
['transform-define', staging],
],
comments: false,
compact: true,
minified: true,
},
production: {
presets: [
[
'minify',
{
mangle: false,
evaluate: false,
},
],
],
plugins: [
['transform-define', production],
],
comments: false,
compact: true,
minified: true,
},
},
};for server: module.exports = {
presets: [
'@babel/preset-flow',
'@babel/preset-stage-0',
[
'@babel/preset-env',
{
targets: {
node: 'current',
},
},
],
],
env: {
production: {
comments: false,
compact: true,
},
},
};package.json: "devDependencies": {
"@babel/cli": "7.0.0-beta.44",
"@babel/core": "^7.0.0-beta.46",
"@babel/node": "7.0.0-beta.44",
"@babel/plugin-proposal-class-properties": "^7.0.0-beta.46",
"@babel/plugin-proposal-object-rest-spread": "^7.0.0-beta.46",
"@babel/plugin-transform-react-inline-elements": "7.0.0-beta.44",
"@babel/plugin-transform-runtime": "^7.0.0-beta.46",
"@babel/polyfill": "7.0.0-beta.44",
"@babel/preset-env": "7.0.0-beta.44",
"@babel/preset-flow": "^7.0.0-beta.46",
"@babel/preset-react": "7.0.0-beta.44",
"@babel/preset-stage-0": "7.0.0-beta.44",
"@storybook/addon-actions": "^3.2.14",
"@storybook/addon-links": "^3.2.14",
"@storybook/addon-notes": "^3.2.14",
"@storybook/react": "^3.2.14",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^8.2.3",
"babel-jest": "^22.4.3",
"babel-loader": "^8.0.0-beta.0",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-import": "^1.7.0",
"babel-plugin-transform-define": "^1.3.0",
"babel-preset-minify": "^0.4.0",
"clean-webpack-plugin": "^0.1.17",
"eslint": "^4.10.0",
"eslint-config-airbnb": "^16.1.0",
"eslint-plugin-babel": "^4.1.2",
"eslint-plugin-flowtype": "^2.39.1",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.4.0",
"file-loader": "^0.11.1",
"flow-bin": "^0.71.0",
"jest": "^22.4.3",
"raw-loader": "^0.5.1",
"react-test-renderer": "^16.1.0",
"react-transform-catch-errors": "^1.0.2",
"redux-devtools": "^3.4.1",
"redux-devtools-extension": "^2.13.2",
"uglifyjs-webpack-plugin": "^1.1.5",
"webpack": "3.10.0",
"webpack-node-externals": "^1.6.0"
} |
|
Added comments inline: const development = require('./config-client/default.json');
const staging = require('./config-client/staging.json');
const production = require('./config-client/production.json');
module.exports = {
presets: [
'next/babel',
'@babel/preset-flow', // correct
'@babel/preset-react', // not needed (included in next)
[
'@babel/preset-stage-0',
{
decoratorsLegacy: true,
},
],
[
'@babel/preset-env', // absolutely don't do this, it breaks code splitting in webpack, instead use the suggestion I did here: https://github.com/zeit/next.js/issues/4227#issuecomment-385742319
{
targets: {
browsers: [
'>= 5%',
],
},
},
],
],
plugins: [
'@babel/plugin-transform-react-inline-elements',
'@babel/plugin-proposal-object-rest-spread', // is included in next, should be removed
'@babel/plugin-proposal-class-properties', // is included in next, should be removed
'@babel/plugin-transform-runtime', // is in included in next, should be removed
[
'import',
{
libraryName: 'antd',
},
],
],
env: {
development: {
plugins: [
['transform-define', development], // fine
],
},
staging: {
presets: [
[
'minify', // why add minify here, we run uglify over the whole code bundles
{
mangle: false,
evaluate: false,
},
],
],
plugins: [
['transform-define', staging],
],
comments: false,
compact: true,
minified: true,
},
production: {
presets: [
[
'minify', // why add minify here, we run uglify over the whole code bundles
{
mangle: false,
evaluate: false,
},
],
],
plugins: [
['transform-define', production],
],
comments: false,
compact: true,
minified: true,
},
},
};At least this release points out a lot of interesting |
|
After some digging, I see that for some reason a There it performs a validation against allowed keys (See here), and it fails on the previously mentioned ones, causing it to throw with " ${field} is not a valid Plugin property" (here) If one were to filter out validation for those fields the application will compile & run with no issues. If one were to monkey-patch babel to exclude those fields, it works, obviously it isn't a fix or a solution, that's as far as I got. |
|
@klujanrosas yeah but it seems weird to me because we have a lot of integration tests and everything runs fine. Also zeit.co is running on this version without any issues. |
|
If everyone replying to this thread could post their .babelrc and next.config.js when they run into issues that'd be great. |
|
@timneutkens I'm sorry, here they are: .babelrc.js const nextPreset = 'next/babel'
const presets = [
[
'@babel/preset-stage-0',
{
decoratorsLegacy: true
}
]
]
const commonPlugins = [
'inline-import-graphql-ast',
[
'styled-components',
{
ssr: true,
displayName: true,
preprocess: false
}
],
[
'module-resolver',
{
root: ['./'],
alias: {
routes: './routes',
lib: './lib',
utils: './utils',
components: './components',
queries: './graphql/queries',
mutations: './graphql/mutations',
fragments: './graphql/fragments',
styles: './styles',
constants: './constants',
types: './types'
}
}
]
]
const productionPlugins = ['transform-remove-console']
module.exports = {
presets: [nextPreset, ...presets],
plugins: [...commonPlugins],
env: {
development: {
presets: [nextPreset, ...presets],
plugins: [...commonPlugins]
},
production: {
presets: [nextPreset, ...presets],
plugins: [...commonPlugins, ...productionPlugins]
}
}
}next.config.js require('dotenv').config()
// eslint-disable-next-line import/no-extraneous-dependencies
const webpack = require('webpack')
const withSass = require('@zeit/next-sass')
const withCss = require('@zeit/next-css')
const withBundleAnalyzer = require('@zeit/next-bundle-analyzer')
const commonsChunkConfig = require('@zeit/next-css/commons-chunk-config')
const { BUNDLE_ANALYZE } = process.env
module.exports = withSass(withCss(withBundleAnalyzer({
analyzeServer: ['server', 'both'].includes(BUNDLE_ANALYZE),
analyzeBrowser: ['browser', 'both'].includes(BUNDLE_ANALYZE),
bundleAnalyzerConfig: {
server: {
analyzerMode: 'static',
reportFilename: '../../bundles/server.html'
},
browser: {
analyzerMode: 'static',
reportFilename: '../bundles/client.html'
}
},
webpack: (config, { dev }) => {
if (dev) {
// This is being worked on as part of improved source maps support
// https://github.com/zeit/next.js/pull/4156/
// eslint-disable-next-line no-param-reassign
config.devtool = 'cheap-module-source-map'
}
config.plugins.push(new webpack.EnvironmentPlugin(process.env))
// Add support for both css and scss
// https://github.com/zeit/next-plugins/issues/127
return commonsChunkConfig(config, /\.(sass|scss|css)$/)
}
}))) |
|
@timneutkens thanks for comments, but still getting the same error. also in your example you show |
|
Is there a history or changelog for v6? I always look at a history.md or changelog.md in open-source root directory but there are none in this repo. Maybe elsewhere? |
|
@Vadorequest look here |
|
I guess you should just remove the top level |
|
@timneutkens I did that with no success, build still failing |
|
Hello I use electron-next and I face the same issue, although my setup is fairly simple. What I did so farI tried the solutions from this thread and others (#4227) and I managed to make the jest tests pass again.
Click to expand next.config.js
Click to expand .babelrc.js
In dev modeIn dev mode I encounter the following error: Click to expand dev mode full error message
In productionThe app builds correctly in production. When I run it, it displays the start page UI, however it is not reactive ; no action is triggered, the state stays empty behind the scene. The DevTools console shows This is not the app root path but the drive's root. This may be my next step. Do you know how I can fix this path, or have any other suggestion about my config ? |
|
I've been running next5 in a lerna monorepo with yarn workspaces, and upgrading to next6 in-place got me the The only difference in code is that I had to strip out usages of "local" packages, but they were all UI related, so I don't think that should've caused a big difference. All of the config is the same. .babelrc.js next.config.js: (with babel7, the next Typescript plugin is outdated as you can just use babel-loader directly now) Based on this, I'm guessing that the error message (at least in my case) was related to another babel6/7 clash (other option is some other workspaces-related issue). Going to try to fix it in the monorepo now and will report back with more info. Update: |
|
Regarding |
|
Following what was discussed in #4227 I managed to get my build working.
|
|
Here is what the migration looks like for Material-UI: mui/material-ui#10964 (We have upgraded Babel because It was the simplest path to upgrade Next to v6). |
|
Hi, I have a problem when I migrated from NextJS 6. I'm getting 404 when importing all NextJs scripts eg:
|
518: 2018-05-22のJS: Firefox 61の開発者ツール、Next.js 6、Data-Forge r=azu a=azu * [Comparing develop...jser-week-384 · jser/jser.github.io](https://github.com/jser/jser.github.io/compare/jser-week-384?expand=1&short_path=dd5e5a3#diff-dd5e5a3cb084b1158cbebdea0aebcf46 "Comparing develop...jser-week-384 · jser/jser.github.io") * [New in Firefox 61: Developer Edition – Mozilla Hacks – the Web developer blog](https://hacks.mozilla.org/2018/05/new-in-firefox-61-developer-edition/ "New in Firefox 61: Developer Edition – Mozilla Hacks – the Web developer blog") * [Debugging Modern Web Applications – Mozilla Hacks – the Web developer blog](https://hacks.mozilla.org/2018/05/debugging-modern-web-applications/ "Debugging Modern Web Applications – Mozilla Hacks – the Web developer blog") * [TestCafe v0.20.0 Released | TestCafe](http://devexpress.github.io/testcafe/blog/testcafe-v0-20-0-released.html "TestCafe v0.20.0 Released | TestCafe") * [Data-Forge](http://www.data-forge-js.com/ "Data-Forge") * [data-forge-ts/concepts.md at master · data-forge/data-forge-ts](https://github.com/data-forge/data-forge-ts/blob/master/docs/concepts.md "data-forge-ts/concepts.md at master · data-forge/data-forge-ts") * [Manning | Data Wrangling with JavaScript](https://www.manning.com/books/data-wrangling-with-javascript?a_aid=datawranglingwithjavascript&a_bid=acc654f9 "Manning | Data Wrangling with JavaScript") * [ZEIT – Next.js 6 and Nextjs.org](https://zeit.co/blog/next6 "ZEIT – Next.js 6 and Nextjs.org") * [migration from 5 to 6 · Issue #4239 · zeit/next.js](vercel/next.js#4239 "migration from 5 to 6 · Issue #4239 · zeit/next.js") * [babel/babel-upgrade: Tool for upgrading babel versions (v7): `npx babel-upgrade`](https://github.com/babel/babel-upgrade "babel/babel-upgrade: Tool for upgrading babel versions (v7): `npx babel-upgrade`") Co-authored-by: azu <azuciao@gmail.com> Co-authored-by: probot-for-jser-info[bot] <probot-for-jser-info[bot]@users.noreply.github.com> Co-authored-by: azu <azu@users.noreply.github.com>
|
@timneutkens I also have weird problem in upgrade to Next@6.0.4-canary.0 from 5.1.0，I have executed .babelrc {
"presets": [
"@babel/preset-react",
"@babel/preset-env",
[
"@babel/preset-stage-0",
{
"decoratorsLegacy": true
}
]
],
"plugins": [
[
"import-static-files",
{
"baseDir": "/static",
"hash": true
}
],
[
"module-resolver",
{
"root": [
"."
],
"alias": {
"styles": "./src/styles"
},
"cwd": "babelrc"
}
],
[
"inline-import",
{
"extensions": [
".css"
]
}
],
[
"wrap-in-js",
{
"extensions": [
"css$",
"scss$"
]
}
]
],
"env": {
"test": {
"presets": [
[
"@babel/preset-env",
{
"modules": "commonjs"
}
],
[
"next/babel",
{
"styled-jsx": {
"plugins": [
"styled-jsx-plugin-sass"
]
}
}
]
]
},
"development": {
"plugins": [
"idx"
],
"presets": [
[
"next/babel",
{
"styled-jsx": {
"plugins": [
"styled-jsx-plugin-sass"
]
}
}
]
]
},
"production": {
"plugins": [
"idx"
],
"presets": [
[
"next/babel",
{
"styled-jsx": {
"plugins": [
"styled-jsx-plugin-sass"
]
}
}
]
]
}
}
}next.config.js {
"presets": [
"@babel/preset-react",
"@babel/preset-env",
[
"@babel/preset-stage-0",
{
"decoratorsLegacy": true
}
]
],
"plugins": [
[
"import-static-files",
{
"baseDir": "/static",
"hash": true
}
],
[
"module-resolver",
{
"root": [
"."
],
"alias": {
"styles": "./src/styles"
},
"cwd": "babelrc"
}
],
[
"inline-import",
{
"extensions": [
".css"
]
}
],
[
"wrap-in-js",
{
"extensions": [
"css$",
"scss$"
]
}
]
],
"env": {
"test": {
"presets": [
[
"@babel/preset-env",
{
"modules": "commonjs"
}
],
[
"next/babel",
{
"styled-jsx": {
"plugins": [
"styled-jsx-plugin-sass"
]
}
}
]
]
},
"development": {
"plugins": [
"idx"
],
"presets": [
[
"next/babel",
{
"styled-jsx": {
"plugins": [
"styled-jsx-plugin-sass"
]
}
}
]
]
},
"production": {
"plugins": [
"idx"
],
"presets": [
[
"next/babel",
{
"styled-jsx": {
"plugins": [
"styled-jsx-plugin-sass"
]
}
}
]
]
}
}
} |
|
I've updated the instructions for customizing Still very much wondering why people add the following to their config: It doesn't add anything and already breaks code splitting with webpack. In your case @blackbing it's probably that you have a top level |
|
I was getting errors after upgrade, but followed comments from @timneutkens, tried babel-upgrade and removed |
|
@timneutkens thanks, I use Do you have any suggestion for that? |
|
https://babeljs.io/docs/usage/cli/#options You can use |
|
@timneutkens awesome!! I upgrade to NEXT@6 🎉🎉🎉🎉🎉🎉 |
|
@sarkistlt Installing "babel-loader": "8.0.0-beta.3" fixed it for me. |
|
@timneutkens You are the man, that worked for me too. I am going to comment in the other issue. |
|
@timneutkens I have another question about jest. However, after upgrade to babel7, I got this error But if I add env config like with-jest, it will make the same error like this(#4265) Do you have any idea about this problem? |
|
@blackbing the with-jest example shows how to configure it correctly: https://github.com/zeit/next.js/blob/canary/examples/with-jest/.babelrc |
|
Can confirm that the updated with-jest example works correctly with the updated Babel. |
|
@timneutkens @codinronan I create a repo #4501 to reproduce my problem. |
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 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
|
I also faced the error: success upgrade nextjs to version 6 with these steps: rename .babelrc to .babelrc.js my babel upgrade related pkgs include: |
|
@timneutkens I happens to find that In my project, some files are built by I'm wondering why |
|
Read: #4227 (comment) You're disabling tree shaking. |
|
I tried following many hints on this thread but unfortunately my migration to next 6 problem still persist. @timneutkens any pointer? thanks in advance! error in ./app/pages/_document.js .babelrc.js -----> package.json ---> |
That's a lot of packages for 1 package.json 😄 Just as a side note: |
|
Would someone mind looking over my .babelrc? I've upgrade to 6 and updated Babel. It's giving an error "stylesNotification is not defined". I'm just importing the scss like I've always done:
Click to expand .babelrcClick to expand next.config.jsThank you |
|
I'm going to close this issue as it's pretty outdated by now. @TrueGeek |
Hi, basically question is: is there any migration guide?
I just don't really want to spend hrs on migrating existed project, but if it would be any kind of guid then at least we can approximately know how long it may take or if it worth to migrate existed project or not.
The text was updated successfully, but these errors were encountered: