migration from 5 to 6

[sarkistlt]

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.

[thisJJ]

I try migration from 5 to 6 in my own project.
It has so many fails.

{ TypeError: Invalid attempt to spread non-iterable instance
    at _nonIterableSpread (/project/.next/dist/bundles/pages/index.js:3004:39)
    at _toConsumableArray (/project/.next/dist/bundles/pages/index.js:3002:95)
    at Object../store.js (store.js:9:0)

[sarkistlt]

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

[timneutkens]

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 babel-jest to the latest version and install "babel-core": "7.0.0-bridge.0".

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)

[sarkistlt]

I tried to follow your steps. A couple things:

• babel-plugin-transform-define doesn't work you need to use babel-plugin-transform-define-fileIssue with babel 7 FormidableLabs/babel-plugin-transform-define#43, and in your .babelrc it should look like [ "transform-define-file", { "filePath": "./config/default.json" } ] instead of [ "transform-define-file","./config/default.json" ]

and I'm still getting error:

Module build failed: Error: [BABEL] /{path}/pages/_document.js: .value is not a valid Plugin property
    at {path}/node_modules/@babel/core/lib/config/validation/plugins.js:54:56
    at Array.forEach (<anonymous>)
    at validatePluginObject ({path}/node_modules/@babel/core/lib/config/validation/plugins.js:52:20)
    at {path}/node_modules/@babel/core/lib/config/full.js:215:53
    at cachedFunction ({path}/node_modules/@babel/core/lib/config/caching.js:42:17)
    at loadPluginDescriptor ({path}/node_modules/@babel/core/lib/config/full.js:207:10)
    at {path}/node_modules/@babel/core/lib/config/full.js:64:16
    at Array.map (<anonymous>)
    at recurseDescriptors ({path}/node_modules/@babel/core/lib/config/full.js:63:36)
    at loadFullConfig ({path}/node_modules/@babel/core/lib/config/full.js:112:6)
    at {path}/node_modules/@babel/core/lib/transform.js:28:33
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)

 @ multi ./pages/_document.js

(node:78137) DeprecationWarning: Module.chunks: Use Module.forEachChunk/mapChunks/getNumberOfChunks/isInChunk/addChunk/removeChunk instead

so it works fine without _document.js but I need to customize it, and I'm getting that error even with super simple _document.js file

[timneutkens]

@sarkistlt can you provide a reproduction?

Regarding transform-define, for zeit.co we actually switch to .babelrc.js, which saves is an extra file:

const env = {
  VERSION: require('./package').version
}

module.exports = {
  presets: ['next/babel'],
  plugins: [['transform-define', env]]
}

[sarkistlt]

nice, yes works fine with [email protected] if using .babelrc.js instead of .babelrc, but error with _document.js still the same

[timneutkens]

@sarkistlt could you provide a minimal reproduction for it?

[sarkistlt]

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"
  }

[timneutkens]

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 .babelrc configurations that can now be optimized. I'm going to write some extra documentation on it.

[klujanrosas]

After some digging, I see that for some reason a ConfigItem instance containing 'value', 'options', 'dirname' and 'file' is being passed down to babel.

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.
I tracked down the origin of those fields to /server/build/babel/preset.js, but I don't see any issues over there.

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.

[timneutkens]

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

[timneutkens]

If everyone replying to this thread could post their .babelrc and next.config.js when they run into issues that'd be great.

[klujanrosas]

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

[sarkistlt]

@timneutkens thanks for comments, but still getting the same error. also in your example you show {"preset-env": {"modules": true}} but how it can work? you need to define modules, commonjs es6 etc. or skip that option at all. anyway that's not the main question, main is to figure out where this error coming from and how to fix it

[Vadorequest]

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?

[klujanrosas]

@Vadorequest look here

[timneutkens]

I guess you should just remove the top level "presets" and "plugins" @klujanrosas

[klujanrosas]

@timneutkens I did that with no success, build still failing
Thanks for the help, I'll hold on updating for now I guess. 😞

[jpbourgeon]

Hello

I use electron-next and I face the same issue, although my setup is fairly simple.

What I did so far

I tried the solutions from this thread and others (#4227) and I managed to make the jest tests pass again.

• I deleted package-lock.json, node_modules, .next and the build output folders
• I ran https://github.com/babel/babel-upgrade and did a fresh install
• I switched to .babelrc.js

Click to expand next.config.js

/* eslint-disable no-param-reassign */
module.exports = {
  webpack(config) {
    config.target = 'electron-renderer';

    // Hide the "dependency is a critical expression" warnings
    // There's no need to care about them
    config.module.exprContextCritical = false;

    // Prevent huge sourcemaps from being created,
    // makes the devtools much faster
    config.devtool = false;

    // Make `react-dom/server` work
    if (config.resolve.alias) {
      delete config.resolve.alias.react;
      delete config.resolve.alias['react-dom'];
    }

    return config;
  },
  exportPathMap() {
    return {
      '/start': { page: '/start' },
      '/result': { page: '/result' },
    };
  },
};

Click to expand .babelrc.js

module.exports = {
  "env": {
    "development": {
      "presets": ["next/babel"]
    },
    "production": {
      "presets": ["next/babel"]
    },
    "test": {
      "presets": [["next/babel", {"preset-env": {"modules": "commonjs"}}]]
    }
  }
};

In dev mode

In dev mode I encounter the following error: Module build failed: Error: [BABEL] //path/to/_document.js: .value is not a valid Plugin property, electron opens correctly in dev mode and displays a basic error message: Failed to load resource: the server responded with a status of 500 (Internal Server Error).

Click to expand dev mode full error message

Defining routes from exportPathMap
> Using external babel configuration
> Location: "\\path\to\app\.babelrc.js"
 ERROR  Failed to compile with 1 errors 09:18:49

 error  in ./renderer/pages/_document.js

Module build failed: Error: [BABEL] \\path\to\app\renderer\pages\_document.js: .value is not a valid Plugin property
    at \\path\to\app\node_modules\@babel\core\lib\config\validation\plugins.js:54:56
    at Array.forEach (<anonymous>)
    at validatePluginObject (\\path\to\app\node_modules\@babel\core\lib\config\validation\plugins.js:52:20)
    at \\path\to\app\node_modules\@babel\core\lib\config\full.js:215:53
    at cachedFunction (\\path\to\app\node_modules\@babel\core\lib\config\caching.js:42:17)
    at loadPluginDescriptor (\\path\to\app\node_modules\@babel\core\lib\config\full.js:207:10)
    at \\path\to\app\node_modules\@babel\core\lib\config\full.js:64:16
    at Array.map (<anonymous>)
    at recurseDescriptors (\\path\to\app\node_modules\@babel\core\lib\config\full.js:63:36)
    at loadFullConfig (\\path\to\app\node_modules\@babel\core\lib\config\full.js:112:6)
    at \\path\to\app\node_modules\@babel\core\lib\transform.js:28:33
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)

 @ multi ./pages/_document.js

(node:12988) DeprecationWarning: Module.chunks: Use Module.forEachChunk/mapChunks/getNumberOfChunks/isInChunk/addChunk/removeChunk instead
{ Error: Cannot find module '\\path\to\app\renderer\.next\build-manifest.json'
    at Module._resolveFilename (module.js:543:15)
    at Function.Module._resolveFilename (\\path\to\app\node_modules\electron\dist\resources\electron.asar\common\reset-search-paths.js:35:12)
    at Function.Module._load (module.js:473:25)
    at Module.require (module.js:586:17)
    at require (internal/module.js:11:18)
    at _callee3$ (\\path\to\app\node_modules\next\dist\server\render.js:203:29)
    at tryCatch (\\path\to\app\node_modules\regenerator-runtime\runtime.js:62:40)
    at Generator.invoke [as _invoke] (\\path\to\app\node_modules\regenerator-runtime\runtime.js:296:22)
    at Generator.prototype.(anonymous function) [as next] (\\path\to\app\node_modules\regenerator-runtime\runtime.js:114:21)
    at step (\\path\to\app\node_modules\@babel\runtime\helpers\asyncToGenerator.js:12:30)
    at _next (\\path\to\app\node_modules\@babel\runtime\helpers\asyncToGenerator.js:27:9)
    at <anonymous> code: 'MODULE_NOT_FOUND' }

In production

The 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 Failed to load resource: net::ERR_FILE_NOT_FOUND /C:/_next/static/commons/main-b99c937787045365dda8.js.

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 ?

[merrywhether]

I've been running next5 in a lerna monorepo with yarn workspaces, and upgrading to next6 in-place got me the .value is not a valid Plugin property error. As I've fought with issues caused by module hoisting before (as well as resulting babel6/7 clashes), I pulled my app out of the monorepo into a test directory, doing a fresh non-workspace installation of all the node_modules and the error went away.

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

module.exports = {
  presets: [
    [
      'next/babel',
      {
        'preset-env': {
          targets: {
            browsers: ['> 1%', 'ios >= 9'],
            node: '8.10',
          },
          debug: true,
        },
        'styled-jsx': {
          plugins: [
            [
              'styled-jsx-plugin-sass',
              {
                sassOptions: {
                  includePaths: [
                    ...
                  ],
                },
              },
            ],
          ],
        },
      },
    ],
    '@babel/typescript',
  ],
  plugins: [
    '@babel/plugin-proposal-optional-catch-binding',
    ['relay', { artifactDirectory: './__relay__' }],
  ],
};

next.config.js:

const { resolve } = require('path');
const { cwd } = require('process');
const withBundleAnalyzer = require('@zeit/next-bundle-analyzer');

const tsRegex = /\.(j|t)sx?$/;

module.exports = withTypescript(
  withBundleAnalyzer({
    // bundle analyzer config
    analyzeServer: ['server', 'both'].includes(process.env.BUNDLE_ANALYZE),
    analyzeBrowser: ['browser', 'both'].includes(process.env.BUNDLE_ANALYZE),
    bundleAnalyzerConfig: {
      server: {
        analyzerMode: 'static',
        reportFilename: '../../.next/analysis/server.html',
      },
      browser: {
        analyzerMode: 'static',
        reportFilename: '../.next/analysis/client.html',
      },
    },

    // custom webpack config
    webpack: (config, { buildId, dev, isServer, defaultLoaders }) => {
      // add ts support
      config.resolve.extensions.push('.ts', '.tsx');
      config.module.rules.forEach(rule => {
        if (rule.test.test('file.js')) {
          rule.test = tsRegex;
          if (rule.loader === 'hot-self-accept-loader') {
            rule.options.extensions = tsRegex;
          }
        }
      });

      return config;
    },
  }),
);

function withTypescript(nextConfig) {
  if (!nextConfig.pageExtensions) {
    nextConfig.pageExtensions = ['tsx', 'ts', 'jsx', 'js'];
  } else if (nextConfig.pageExtensions.indexOf('ts') === -1) {
    nextConfig.pageExtensions.unshift('ts');
    nextConfig.pageExtensions.unshift('tsx');
  }

  return nextConfig;
}

(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:
As referenced in the other thread, downgrading to beta.42 (and forcing all @babel-related resolutions in yarn to the same) fixed the issue for me.

[vjpr]

Regarding .value is not a valid Plugin property, see #4227 (comment)

[klujanrosas]

Following what was discussed in #4227 I managed to get my build working.
What I did was basically:

• Force all babel related deps to meet @7.0.0-beta.42
• Nuke node_modules
• yarn
• That's it

[oliviertassinari]

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).

[felixnoriel]

Hi, I have a problem when I migrated from NextJS 6. I'm getting 404 when importing all NextJs scripts eg: www.url.com/_next/BUILD_ID/page/index.js

• problem occurs only during production build, dev is fine
• please see 404 on loading next scripts when migrated to NextJS 6 #4408

[blackbing]

@timneutkens I also have weird problem in upgrade to [email protected] from 5.1.0，I have executed babel-upgrade. here is my config. Could you please help to point out my problem? Many thanks.

.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"
              ]
            }
          }
        ]
      ]
    }
  }
}

[timneutkens]

I've updated the instructions for customizing .babelrc here: https://github.com/zeit/next.js#customizing-babel-config

Still very much wondering why people add the following to their config:

"@babel/preset-react",
"@babel/preset-env"

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 env key and also presets and plugins there, try moving those into each env block.

[madhums]

I was getting errors after upgrade, but followed comments from @timneutkens, tried babel-upgrade and removed @babel/preset-env in the presets section of .babelrc and that was it! Upgrade was quite easy!

[blackbing]

@timneutkens thanks, I use babel-node to compile my server.js，if I remove @babel/preset-env, it will break error like this

$ babel-node src/server
/Users/bingo/Projects/xxx/src/server.js:4
import express from 'express';
^^^^^^

Do you have any suggestion for that?

[timneutkens]

https://babeljs.io/docs/usage/cli/#options

You can use --presets to provide @babel/preset-env babel-node --presets "@babel/preset-env" src/server

[blackbing]

@timneutkens awesome!! I upgrade to NEXT@6 🎉🎉🎉🎉🎉🎉

[martinestigarribiakognitiv]

@sarkistlt Installing "babel-loader": "8.0.0-beta.3" fixed it for me.

[codinronan]

@timneutkens You are the man, that worked for me too. I am going to comment in the other issue.

[blackbing]

@timneutkens I have another question about jest.
As your suggestion(#4239 (comment)), I removed these

"@babel/preset-react",
"@babel/preset-env"

However, after upgrade to babel7, I got this error

/config/jest/setup.js:3
    import "../../src/server/serverConfig";
    ^^^^^^
    SyntaxError: Unexpected token import

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?

[timneutkens]

@blackbing the with-jest example shows how to configure it correctly: https://github.com/zeit/next.js/blob/canary/examples/with-jest/.babelrc

[codinronan]

Can confirm that the updated with-jest example works correctly with the updated Babel.

[blackbing]

@timneutkens @codinronan I create a repo #4501 to reproduce my problem.

https://github.com/blackbing/next-with-jest-style-jsx-error

[stanleyfok]

I also faced the error:

Module build failed: Error: [BABEL] /{path}/pages/_document.js: .value is not a valid Plugin property

success upgrade nextjs to version 6 with these steps:

rename .babelrc to .babelrc.js
do babel-upgrade: npx babel-upgrade --write --install
then resolve all warning after babel-upgrade

my babel upgrade related pkgs include:

"@babel/core": "7.0.0-beta.42"
"babel-loader": "^8.0.0-beta.3"
"babel-core": "^7.0.0-bridge.0"

[mocheng]

@timneutkens I happens to find that @babel/preset-env has module: false option by default https://github.com/zeit/next.js/blob/6.0.3/server/build/babel/preset.js#L29 . This makes it act differently from default behaivor.

In my project, some files are built by babel cli. If there is only next/babel in .babelrc, it doesn't transform import and export. I have to add @babel/preset-env explicitly in .babelrc, or have next/babel config as below.

  "presets": [
    [
      "next/babel",
      {
        "preset-env": {
          "modules": "commonjs"
        }
      }
    ]
   ],

I'm wondering why next/babel have modules option off by default. It looks OK to leave it as @babel/preset-env default option.

[timneutkens]

Read: #4227 (comment)

You're disabling tree shaking.

[vinodloha]

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
Module build failed: Error: [BABEL] /Users/vin/react-next/app/pages/_document.js: You gave us a visitor for the node type ClassPrivateProperty but it's not a valid type

.babelrc.js ----->

  plugins: [
    [
      "module-resolver",
      {
        root: ["./app"],
        alias: {
          "~": "./node_modules"
        },
        cwd: "babelrc"
      }
    ]
  ],
  env: {
    development: {
      presets: ["next/babel", "@babel/preset-flow"],
      plugins: [
        [
          "@quickbaseoss/babel-plugin-styled-components-css-namespace",
          {
            cssNamespace: "app"
          }
        ],
        [
          "babel-plugin-styled-components",
          {
            ssr: true
          }
        ]
      ]
    },
    production: {
      presets: ["next/babel"],
      plugins: [
        ["@quickbaseoss/babel-plugin-styled-components-css-namespace", { cssNamespace: "app" }],
        [
          "babel-plugin-styled-components",
          {
            ssr: true
          }
        ]
      ]
    },
    test: {
      presets: [
        [
          "next/babel",
          {
            "preset-env": {
              modules: "commonjs"
            }
          }
        ]
      ]
    }
  }
};

package.json --->

  "name": "next-react",
  "version": "1.0.0",
  "description": "Next React",
  "main": "./server/index.js",
  "browser": {
    "winston": false
  },
  "scripts": {
    "flow": "flow",
    "flow:install": "flow-typed install",
    "flow:coverage": "flow-coverage-report -i 'app/**/*.js' -x 'app/**/*.test.js' -x 'app/**/*.style.js' -t html -t json -t text -o reports/flow/ --threshold 70",
    "build": "rimraf ./app/.next && next build ./app",
    "dev": "rimraf ./app/.next && yarn install && yarn run dev:serve",
    "dev:serve": "node ./server/index.js",
    "prod": "yarn install && yarn run build && yarn run prod:serve",
    "prod:serve": "cross-env NODE_ENV=production node ./server/index.js",
    "mock": "canned -p 9876 ./mock",
    "dev:mock": "yarn install && npm-run-all --parallel mock \"dev:serve -- --mock\"",
    "start": "yarn run prod",
    "lint:js": "eslint app/ server/ --fix",
    "lint:css": "stylelint app/",
    "lint": "yarn run lint:js && yarn run lint:css",
    "test": "cross-env NODE_ENV=test jest --config ./config/jest.config.js ",
    "test:watch": "cross-env NODE_ENV=test jest --config ./config/jest.config.js",
    "storybook": "start-storybook -p 9001 -c .storybook",
    "audit": "yarn run start -- --report",
    "docgen": "react-docgen ./app --pretty",
    "esdoc": "esdoc",
    "precommit": "yarn run lint",
    "prepush": "yarn run test",
    "generate": "plop --plopfile generators/index.js",
    "size": "size-limit"
  },
  "author": "Vinod",
  "dependencies": {
    "@babel/cli": "^7.0.0",
    "@babel/core": "^7.0.0",
    "@babel/preset-flow": "^7.0.0",
    "@quickbaseoss/babel-plugin-styled-components-css-namespace": "0.0.10",
    "@zeit/next-bundle-analyzer": "^0.1.1",
    "agentkeepalive": "^3.4.1",
    "axios": "^0.18.0",
    "buildify": "^0.4.0",
    "compression": "^1.7.1",
    "console-probe": "^3.3.0",
    "cookie-parser": "^1.4.3",
    "copy-webpack-plugin": "^4.5.1",
    "cron": "^1.3.0",
    "cross-env": "^5.1.3",
    "dotenv": "^4.0.0",
    "es6-promise": "^4.2.2",
    "eslint-import-resolver-babel-module": "^4.0.0",
    "express": "^4.16.2",
    "express-device": "^0.4.2",
    "fetch-jsonp": "^1.1.3",
    "flow-bin": "^0.62.0",
    "flow-typed": "^2.2.3",
    "harp-minify": "^0.4.0",
    "he": "^1.1.1",
    "helmet": "^3.9.0",
    "hoist-non-react-statics": "^2.3.1",
    "http-proxy-middleware": "^0.17.4",
    "immutable": "^3.8.2",
    "invariant": "^2.2.2",
    "isomorphic-unfetch": "^2.0.0",
    "jest-styled-components": "^5.0.0",
    "lodash": "^4.17.4",
    "memory-cache": "^0.2.0",
    "moment": "^2.22.1",
    "next": "^6.1.1",
    "next-redux-saga": "^3.0.0-beta.1",
    "next-redux-wrapper": "^2.0.0",
    "next-routes": "^1.4.2",
    "node": "8.9.4",
    "normalizr": "^3.2.4",
    "nprogress": "^0.2.0",
    "prop-types": "^15.6.0",
    "react": "^16.3.0",
    "react-dom": "^16.2.0",
    "react-immutable-proptypes": "^2.1.0",
    "react-redux": "^5.0.6",
    "react-router-dom": "^4.2.2",
    "react-transition-group": "^2.3.0",
    "react-typekit": "^1.1.2",
    "redux": "^3.7.2",
    "redux-devtools-extension": "^2.13.2",
    "redux-immutable": "^4.0.0",
    "redux-logger": "^3.0.6",
    "redux-saga": "^0.16.0",
    "reselect": "^3.0.1",
    "string-replace-webpack-plugin": "^0.1.3",
    "styled-components": "^3.2.3",
    "sw-precache-webpack-plugin": "^0.11.4",
    "uglifyjs-webpack-plugin": "^1.1.6",
    "winston": "^2.4.0",
    "winston-logrotate": "^1.3.0"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/preset-flow": "^7.0.0",
    "@storybook/addon-storyshots": "^3.3.9",
    "@storybook/react": "^3.3.9",
    "autoprefixer": "^7.2.5",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^8.2.1",
    "babel-loader": "^8.0.2",
    "babel-plugin-module-alias": "^1.6.0",
    "babel-plugin-module-resolver": "^2.7.1",
    "babel-plugin-styled-components": "^1.5.0",
    "canned": "^0.3.10",
    "enzyme": "^3.2.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "enzyme-to-json": "^3.3.1",
    "esdoc": "^1.0.4",
    "esdoc-ecmascript-proposal-plugin": "^1.0.0",
    "esdoc-flow-type-plugin": "^1.0.1",
    "esdoc-jsx-plugin": "^1.0.0",
    "esdoc-react-plugin": "^1.0.1",
    "esdoc-standard-plugin": "^1.0.0",
    "eslint": "^4.15.0",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-plugin-flowtype": "^2.40.1",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-jest": "^21.7.0",
    "eslint-plugin-jsx-a11y": "^6.0.2",
    "eslint-plugin-react": "^7.4.0",
    "eslint-plugin-redux-saga": "^0.6.0",
    "flow-coverage-report": "^0.4.1",
    "husky": "^0.14.3",
    "jest": "^23.3.0",
    "jest-sonar-reporter": "^1.3.0",
    "lighthouse": "^2.7.0",
    "npm-run-all": "^4.1.2",
    "plop": "^1.9.1",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.10",
    "raw-loader": "^0.5.1",
    "react-docgen": "^2.20.0",
    "react-live": "^1.7.1",
    "redux-mock-store": "^1.4.0",
    "rimraf": "^2.6.2",
    "size-limit": "^0.14.0",
    "stylelint": "^8.4.0",
    "stylelint-config-standard": "^18.0.0",
    "stylelint-config-styled-components": "^0.1.1",
    "stylelint-processor-styled-components": "^1.2.2"
  },
  "engines": {
    "node": ">=8.9.4"
  },
  "jestSonar": {
    "reportPath": "reports/tests",
    "reportFile": "test-reporter.xml",
    "indent": 4
  },
  "resolutions": {
    "eslint-scope": "3.7.1"
  }
}

[timneutkens]

• "babel-loader": "^8.0.2", should be removed
• "@babel/core": "^7.0.0", should be removed or downgraded to 7.0.0-beta.42 (Next 7 will use 7.0.0 because it's a breaking change on top of this beta)
• "@babel/preset-flow": "^7.0.0", should be downgraded to 7.0.0-beta.42

That's a lot of packages for 1 package.json 😄

Just as a side note: fetch-jsonp isomorphic-unfetch and axios all do almost the same thing.

[TrueGeek]

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:

import stylesNotification from './stylesNotifications.scss';

Click to expand .babelrc

{
  "presets": [
    ["next/babel", {
      "preset-env": {
        "modules": "commonjs"
      },
      "transform-runtime": {},
      "styled-jsx": {
        "plugins": [
          [
            "styled-jsx-plugin-sass",
            {
              "sassOptions": {
                "includePaths": [
                  "./app/components/common/_style"
               ] 
              }
            }
          ]
        ]        
      },
      "class-properties": {}
    }]
  ],
  "plugins": [
    [
      "babel-plugin-module-resolver",
      {
        "root": [
          "./app"
        ]
      }
    ],
    "@babel/plugin-transform-object-assign",
    "@babel/plugin-transform-object-super"
  ],
  
  "env": {
    "development": {
      "plugins": [
        "inline-dotenv"
      ]
    }
  }

}

Click to expand next.config.js

const { mergeResolve, mergeRules, mergePlugins } = require('./webpack/merge');

module.exports = {
  webpack: config => {
    const webpackConfig = require('./webpack.config');
    mergeResolve(config, webpackConfig);
    mergeRules(config, webpackConfig);
    mergePlugins(config, webpackConfig);

    return config;
  },
  distDir: './.next',
};

Thank you

[timneutkens]

I'm going to close this issue as it's pretty outdated by now.

@TrueGeek "modules": "commonjs" should never be added, it disables webpack tree shaking.