Build error next.js 6.0.0

[paschaldev]

I just upgraded to next@6.0.0, I use a custom server, when I try to run dev, I get an error.

npm run dev

> frontend-next@1.0.0 dev /Users/foo/gitlab/next-project/backend
> babel-node ./src/server.js

/Users/foo/gitlab/next-project/backend/node_modules/babel-core/lib/transformation/file/options/option-manager.js:328
        throw e;
        ^

Error: Plugin 0 specified in "/Users/foo/gitlab/next-project/backend/node_modules/next/babel.js" provided an invalid property of "default" (While processing preset: "/Users/foo/gitlab/next-project/backend/node_modules/next/babel.js")
    at Plugin.init (/Users/foo/gitlab/next-project/backend/node_modules/babel-core/lib/transformation/plugin.js:131:13)
    at Function.normalisePlugin (/Users/foo/gitlab/next-project/backend/node_modules/babel-core/lib/transformation/file/options/option-manager.js:152:12)
    at /Users/foo/gitlab/next-project/backend/node_modules/babel-core/lib/transformation/file/options/option-manager.js:184:30
    at Array.map (<anonymous>)
    at Function.normalisePlugins (/Users/foo/gitlab/next-project/backend/node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
    at OptionManager.mergeOptions (/Users/foo/gitlab/next-project/backend/node_modules/babel-core/lib/transformation/file/options/option-manager.js:234:36)
    at /Users/foo/gitlab/next-project/backend/node_modules/babel-core/lib/transformation/file/options/option-manager.js:265:14
    at /Users/foo/gitlab/next-project/backend/node_modules/babel-core/lib/transformation/file/options/option-manager.js:323:22
    at Array.map (<anonymous>)
    at OptionManager.resolvePresets (/Users/foo/gitlab/next-project/backend/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! frontend-next@1.0.0 dev: `babel-node ./src/server.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the frontend-next@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/foo/.npm/_logs/2018-04-30T08_41_09_819Z-debug.log

UPDATE all this passed after upgrading all babel packages to v7

Now this is the new error.... See below for complete error message

ERROR  Failed to compile with 1 errors                                                                                                                                                                                               10:32:07

 error  in ./pages/_document.js

Module build failed: Error: [BABEL] /Users/foo/gitlab/zyombo/backend/pages/_document.js: .value is not a valid Plugin property

[DevSpeak]

I'm curious, which custom server are you using?

[paschaldev]

@DevSpeak express

[paschaldev]

Update: I updated all my babel dependencies and babel-node to version 7 so it passed now. But now, I get this error.

 ERROR  Failed to compile with 1 errors                                                                                                                                                                                               10:32:07

 error  in ./pages/_document.js

Module build failed: Error: [BABEL] /Users/foo/gitlab/zyombo/backend/pages/_document.js: .value is not a valid Plugin property
    at /Users/foo/gitlab/zyombo/backend/node_modules/@babel/core/lib/config/validation/plugins.js:54:56
    at Array.forEach (<anonymous>)
    at validatePluginObject (/Users/foo/gitlab/zyombo/backend/node_modules/@babel/core/lib/config/validation/plugins.js:52:20)
    at /Users/foo/gitlab/zyombo/backend/node_modules/@babel/core/lib/config/full.js:215:53
    at cachedFunction (/Users/foo/gitlab/zyombo/backend/node_modules/@babel/core/lib/config/caching.js:42:17)
    at loadPluginDescriptor (/Users/foo/gitlab/zyombo/backend/node_modules/@babel/core/lib/config/full.js:207:10)
    at /Users/foo/gitlab/zyombo/backend/node_modules/@babel/core/lib/config/full.js:64:16
    at Array.map (<anonymous>)
    at recurseDescriptors (/Users/foo/gitlab/zyombo/backend/node_modules/@babel/core/lib/config/full.js:63:36)
    at loadFullConfig (/Users/foo/gitlab/zyombo/backend/node_modules/@babel/core/lib/config/full.js:112:6)
    at /Users/foo/gitlab/zyombo/backend/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:1878) DeprecationWarning: Module.chunks: Use Module.forEachChunk/mapChunks/getNumberOfChunks/isInChunk/addChunk/removeChunk instead
> Ready on http://localhost:3000
^Cnpm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! frontend-next@1.0.0 dev: `babel-node ./src/server.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the frontend-next@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/foo/.npm/_logs/2018-04-30T09_32_10_682Z-debug.log

[darthchudi]

I have this exact same issue with Babel and Next.

[djskinner]

I'm getting ModuleBuildError: Module build failed: Error: Plugin 0 specified in "base" provided an invalid property of "value"

Using a custom server (express), withSass and TypeScript.

[sea129]

what about Babel config? Examples of the scoped name change:

babel-cli -> @babel/cli babel-core -> @babel/core babel-preset-env -> @babel/preset-env

[paschaldev]

@sea129 Yeah I have all that.

    "@babel/cli": "^7.0.0-beta.46",
    "@babel/core": "^7.0.0-beta.46",
    "@babel/plugin-proposal-export-default-from": "^7.0.0-beta.46",
    "@babel/preset-env": "^7.0.0-beta.46"

[montoias]

I've had the same problem since https://github.com/zeit/next.js/releases/tag/6.0.0-canary.3

[timneutkens]

please post your .babelrc, next.config.js etc. It's definitely related to which modules you're using in .babelrc, since next by itself is fully compatible with babel 7.

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"

[bryan]

.babelrc

{
  "env": {
    "development": {
      "presets": [
        "next/babel",
        "@babel/preset-es2017",
        ["@babel/preset-stage-2", {
          decoratorsLegacy: true
        }],
        "@babel/preset-env",
        "@babel/preset-react",
      ],
      "plugins": [
        "@babel/plugin-proposal-class-properties",
        ["transform-inline-environment-variables", {
          "include": [
            "NODE_ENV",
            "GMAPS_API_KEY",
            "EMBED_API_KEY",
          ]
        }],
        ["inline-dotenv", {
          path: './.env'
        }],
      ]
    },
    "production": {
      "presets": [
        "next/babel",
        "@babel/preset-es2017",
        ["@babel/preset-stage-2", {
          decoratorsLegacy: true
        }],
        "@babel/preset-env",
        "@babel/preset-react",
      ],
      "plugins": [
        "@babel/plugin-proposal-class-properties",
        ["inline-dotenv", {
          path: './.env.production'
        }],
        ["transform-inline-environment-variables", {
          "include": [
            "NODE_ENV",
            "GMAPS_API_KEY",
            "EMBED_API_KEY",
          ]
        }],
      ]
    }
  }
}

next.config.js

const webpack = require('webpack');
const fs = require('fs');
const path = require('path');
const glob = require('glob');
const withPlugins = require('next-compose-plugins');
const withCSS = require('@zeit/next-css');
const optimizedImages = require('next-optimized-images');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = withPlugins([
    withCSS,
    optimizedImages,
  ], {
    webpack: (config, options) => {
      const {dev, isServer} = options;

      config.plugins.push(
        new UglifyJsPlugin({
          test: /\.js($|\?)/i
        }),
      );

      config.module.rules.push(
        {
          test: /\.(css|scss)/,
          loader: 'emit-file-loader',
          options: {
            name: 'dist/[path][name].[ext]'
          }
        },
        {
          test: /\.s(a|c)ss$/,
          exclude: /node_modules/,
          use: ['babel-loader', 'raw-loader', 'postcss-loader',
            { loader: 'sass-loader',
              options: {
                includePaths: ['styles', 'node_modules']
                  .map((d) => path.join(__dirname, d))
                  .map((g) => glob.sync(g))
                  .reduce((a, c) => a.concat(c), [])
              }
            }
          ],
        },
        {
          test: /\.js$/,
          enforce: 'pre',
          exclude: /node_modules/,
          loader: 'eslint-loader',
          options: {
            emitWarning: dev,
          },
        },
      )

      if (dev) {
        config.devtool = 'cheap-module-source-map';
      }

      return config;
    },
  });

[joaovieira]

In my case I believe it's related to ts-jest which uses babel 6. Just bootstraped a Next 5 from with-jest-typescript example a few days ago.

[paschaldev]

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

const 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
}))

[ghengeveld]

@paschaldev if you define settings per environment using env in your .babelrc, you should put all config inside env, and duplicate the config for each environment (except for the differences of course). For example, here's mine:

{
  "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.

[paschaldev]

@ghengeveld Did that, same error still

.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"
            ]
        },
        "production": {

            "plugins": [
                "transform-modules",
                "react-hot-loader/babel"
            ]
        },
        "test": {

            "plugins": [
                "transform-modules",
                "react-hot-loader/babel"
            ]
        },
    }
}

[timneutkens]

There's a lot of things i'm not understanding from your .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"
            ]
        },
        "production": {

            "plugins": [
                "transform-modules",
                "react-hot-loader/babel"
            ]
        },
        "test": {

            "plugins": [
                "transform-modules",
                "react-hot-loader/babel"
            ]
        },
    }
}

Why are you adding "react-hot-loader/babel", it's part of next/babel.

Same for "styled-jsx/babel", it's included in Next.js by default.

transform-modules stops webpack from codesplitting, making your bundles very big.

@babel/plugin-syntax-dynamic-import => dynamic imports are supported in next.

[timneutkens]

So you can literally remove the whole "env" block 👌🕵️, if it still persists you'll have to check if "lodash" supports babel 7.

[paschaldev]

@timneutkens Thanks for the info. I was browsing the next.js source files minutes ago and discovered that also.

This is what my updated .babelrc looks like

{
    "presets": [
        "next/babel",
    ],
    "plugins": [

    ],
    "comments": false,
    "compact": true,
}

Stripped down everything but I still get the same error

 ERROR  Failed to compile with 1 errors                                                 12:11:05 AM

 error  in ./pages/_document.js

Module build failed: Error: [BABEL] /Users/ezeugwupaschal/Documents/Gitlab/zyombo/backend/pages/_document.js: .value is not a valid Plugin property
    at /Users/ezeugwupaschal/Documents/Gitlab/zyombo/backend/node_modules/@babel/core/lib/config/validation/plugins.js:54:56
    at Array.forEach (<anonymous>)
    at validatePluginObject (/Users/ezeugwupaschal/Documents/Gitlab/zyombo/backend/node_modules/@babel/core/lib/config/validation/plugins.js:52:20)
    at /Users/ezeugwupaschal/Documents/Gitlab/zyombo/backend/node_modules/@babel/core/lib/config/full.js:215:53
    at cachedFunction (/Users/ezeugwupaschal/Documents/Gitlab/zyombo/backend/node_modules/@babel/core/lib/config/caching.js:42:17)
    at loadPluginDescriptor (/Users/ezeugwupaschal/Documents/Gitlab/zyombo/backend/node_modules/@babel/core/lib/config/full.js:207:10)
    at /Users/ezeugwupaschal/Documents/Gitlab/zyombo/backend/node_modules/@babel/core/lib/config/full.js:64:16
    at Array.map (<anonymous>)
    at recurseDescriptors (/Users/ezeugwupaschal/Documents/Gitlab/zyombo/backend/node_modules/@babel/core/lib/config/full.js:63:36)
    at loadFullConfig (/Users/ezeugwupaschal/Documents/Gitlab/zyombo/backend/node_modules/@babel/core/lib/config/full.js:112:6)
    at /Users/ezeugwupaschal/Documents/Gitlab/zyombo/backend/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:589) DeprecationWarning: Module.chunks: Use Module.forEachChunk/mapChunks/getNumberOfChunks/isInChunk/addChunk/removeChunk instead
> Ready on http://localhost:3000

[paschaldev]

This is my _document.js file. Th scss file is processed by webpack config in next.config.js

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

[GabeDuarteM]

Plugin 0 specified in "/home/travis/build/GabrielDuarteM/portfolio/node_modules/next/babel.js" provided an invalid property of "default" (While processing preset: "/home/travis/build/GabrielDuarteM/portfolio/node_modules/next/babel.js")

Happened to me too, but only when running the tests (using jest).

Reproducible on https://github.com/GabrielDuarteM/portfolio, just run yarn add next to install the latest next version and run yarn test to run the tests.

The complete error log can be seen on this Travis build

yarn start and yarn build is running fine, only yarn test throws that error.

package.json

{
  "name": "portfolio",
  "version": "1.0.0",
  "main": "index.js",
  "author": "Gabriel Duarte <gabrielqduarte@gmail.com> (https://github.com/GabrielDuarteM/)",
  "license": "MIT",
  "scripts": {
    "start": "next src",
    "start:prod": "next start src -p $PORT",
    "prebuild": "rimraf src/out",
    "build": "next build src && yarn export && cp src/root/* src/out",
    "export": "next export src",
    "deploy": "yarn build && netlify deploy",
    "deploy:staging": "yarn deploy -e staging",
    "test": "jest",
    "lint": "yarn eslint src/**/*.js",
    "ci": "yarn build && yarn test && yarn lint"
  },
  "dependencies": {
    "next": "^6.0.0",
    "react": "^16.3.2",
    "react-dom": "^16.3.2"
  },
  "devDependencies": {
    "babel-eslint": "^8.2.3",
    "babel-preset-env": "^1.6.1",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "eslint": "4.19.1",
    "eslint-config-airbnb": "16.1.0",
    "eslint-config-prettier": "^2.9.0",
    "eslint-plugin-import": "2.11.0",
    "eslint-plugin-jsx-a11y": "6.0.3",
    "eslint-plugin-prettier": "^2.6.0",
    "eslint-plugin-react": "7.7.0",
    "jest": "^22.4.3",
    "prettier": "^1.12.1",
    "rimraf": "^2.6.2",
    "sw-precache-webpack-plugin": "^0.11.5"
  }
}

.babelrc

{
  "env": {
    "production": {
      "presets": [
        [
          "env",
          {
            "modules": false,
            "useBuiltIns": true,
            "targets": {
              "browsers": "> 5%"
            }
          }
        ],
        "next/babel"
      ]
    },
    "development": {
      "presets": [
        [
          "env",
          {
            "modules": false,
            "useBuiltIns": true,
            "targets": {
              "browsers": "> 5%"
            }
          }
        ],
        "next/babel"
      ]
    },
    "test": {
      "presets": [["next/babel", { "preset-env": { "modules": "commonjs" } }]]
    }
  }
}

next.config.js

const SWPrecacheWebpackPlugin = require("sw-precache-webpack-plugin")

module.exports = {
  exportPathMap: function() {
    return {
      "/": { page: "/" },
      "/about": { page: "/about" },
    }
  },
  excludeFile: str => /\*.{spec,test}.js/.test(str),
  webpack: config => {
    config.plugins.push(
      new SWPrecacheWebpackPlugin({
        verbose: true,
        staticFileGlobsIgnorePatterns: [/\.next\//],
        runtimeCaching: [
          {
            handler: "networkFirst",
            urlPattern: /^https?.*/,
          },
        ],
      }),
    )

    return config
  },
}

[ljanssen5]

Also experiencing this

 ERROR  Failed to compile with 1 errors                                                                                 

 error  in ./pages/_document.jsx

Module build failed: Error: [BABEL] /Users/luke/development/code/application/web/pages/_document.jsx: .value is not a valid Plugin property

package.json

{
  "name": "application",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "test": "jest --no-cache",
    "test:debug": "jest --debug",
    "test:verbose": "jest --verbose",
    "test:watch": "jest --watch",
    "test:coverage": "jest -- --coverage --no-cache",
    "test:coverage:view": "jest -- --coverage --no-cache && open coverage/lcov-report/index.html",
    "lint": "eslint .",
    "storybook": "start-storybook -s . -p 6006",
    "build-storybook": "build-storybook",
    "analyze": "export ANALYZE=true && next"
  },
  "dependencies": {
    "classnames": "^2.2.5",
    "es6-promise": "^4.2.4",
    "isomorphic-unfetch": "^2.0.0",
    "js-cookie": "^2.2.0",
    "jsonwebtoken": "^8.2.1",
    "jss": "^9.8.1",
    "material-ui": "^1.0.0-beta.42",
    "moment": "^2.22.1",
    "next": "6.0.0",
    "next-redux-saga": "^2.0.1",
    "next-redux-wrapper": "^1.3.5",
    "prop-types": "^15.6.1",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "react-iframe": "^1.1.0",
    "react-jss": "^8.4.0",
    "react-popper": "^0.10.1",
    "react-redux": "^5.0.6",
    "redux": "^4.0.0",
    "redux-devtools-extension": "^2.13.2",
    "redux-form": "^7.3.0",
    "redux-saga": "^0.16.0",
    "webpack-bundle-analyzer": "^2.11.1"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0-beta.46",
    "@babel/preset-env": "^7.0.0-beta.46",
    "@storybook/addon-actions": "^3.4.3",
    "@storybook/addon-links": "^3.4.3",
    "@storybook/addon-storyshots": "^3.4.3",
    "@storybook/addons": "^3.4.3",
    "@storybook/react": "^3.4.3",
    "@zeit/next-sass": "^0.1.2",
    "babel-loader": "^8.0.0-beta.2",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "eslint": "^4.19.1",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-plugin-import": "^2.11.0",
    "eslint-plugin-jest": "^21.15.1",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-react": "^7.7.0",
    "jest": "^22.4.3",
    "jest-cli": "^22.4.3",
    "node-sass": "^4.9.0",
    "react-addons-test-utils": "^15.6.2",
    "react-test-renderer": "^16.3.2",
    "webpack": "^3.11.0",
    "webpack-bundle-size-analyzer": "^2.7.0"
  }
}

.babelrc

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

next.config.js

const withSass = require('@zeit/next-sass')

module.exports = withSass({
  cssModules: true,
})

[ljanssen5]

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.

[ljanssen5]

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.

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

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.

[timneutkens]

So lets first start with explaining that you should never add @babel/preset-env or babel-preset-env to your .babelrc, since it breaks code splitting with webpack.

Instead you can provide options to next/babel:

{
  "presets": [
    ["next/babel", {
     "preset-env": {
       "targets": {
         "browsers": "> 5%"
       }
     }
    }]
  ]
}

Also when providing options don't set modules: true since that breaks code splitting too.

Besides that try running https://github.com/babel/babel-upgrade to upgrade your .babelrc, it takes care of most of the modules that have to be upgraded.

[timneutkens]

@GabrielDuarteM to fix babel-jest install: "babel-core": "7.0.0-bridge.0"

[paschaldev]

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 @babel/node, so I removed the all other babel related plugins and packages I don't use and everything works perfectly. I'll close this now.

[GabeDuarteM]

@timneutkens I did move the env part to next/babel config, and installed "babel-core": "7.0.0-bridge.0", but now the error is another one. When I run the tests, all of them fail with the following error:

<project root>\jest.setup.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { configure } from "enzyme"
                                                                                                    ^

    SyntaxError: Unexpected token {

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:316:17)

[timneutkens]

@GabrielDuarteM, in that case you need to do this:

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

And use NODE_ENV=test when running tests.

[GabeDuarteM]

@timneutkens I did change modules to true inside the test env, but it still gives me the same error.

jest already sets NODE_ENV=test, but just in case, I explicitly tried running setting it and the error still occurs.

[timneutkens]

It definitely looks like it's not applying the modules transformation though 🤔

[yhjor]

Facing the same problem, here is my .babelrc:

{
  "presets": ["next/babel", "@babel/preset-flow"],
  "plugins": [
    ["styled-components", { "ssr": true, "displayName": true, "preprocess": false }],
    [
      "module-resolver",
      {
        "root": ["./web"],
        "alias": {
          "~": "./web"
        }
      }
    ]
  ],
  "env": {
    "development": {
      "plugins": ["inline-dotenv"]
    },
    "production": {
      "plugins": ["transform-inline-environment-variables"]
    }
  }
}

[timneutkens]

From my earlier comment:

Besides that try running babel/babel-upgrade to upgrade your .babelrc, it takes care of most of the modules that have to be upgraded.

If that doesn't work it could be that one of the modules might be outdated, one that I know supports babel 7 on the latest version is styled-components.

So that leaves module-resolver, inline-dotenv and transform-inline-environment-variables.

Also make sure when using "env" you put everything inside env, instead of having a global list (that's something that also changed if I remember correctly).

[gnapse]

I'm having this issue too. To create an app reproducing the problem you can create a new app based off the with-jest example in this very repo:

yarn create next-app --example with-jest with-jest-app
cd with-jest-app
yarn
yarn test

Here's the output for that last command:

yarn run v1.5.1
$ NODE_ENV=test jest
 FAIL  components/Header.test.js
  ● Test suite failed to run

    Plugin 0 specified in "/Users/ernesto/code/with-jest-app/node_modules/next/babel.js" provided an invalid property of "default" (While processing preset: "/Users/ernesto/code/with-jest-app/node_modules/next/babel.js")

      at Plugin.init (node_modules/babel-core/lib/transformation/plugin.js:131:13)
      at Function.normalisePlugin (node_modules/babel-core/lib/transformation/file/options/option-manager.js:152:12)
      at node_modules/babel-core/lib/transformation/file/options/option-manager.js:184:30
          at Array.map (<anonymous>)
      at Function.normalisePlugins (node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
      at OptionManager.mergeOptions (node_modules/babel-core/lib/transformation/file/options/option-manager.js:234:36)
      at node_modules/babel-core/lib/transformation/file/options/option-manager.js:265:14
      at node_modules/babel-core/lib/transformation/file/options/option-manager.js:323:22
          at Array.map (<anonymous>)
      at OptionManager.resolvePresets (node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        3.005s
Ran all test suites.
error An unexpected error occurred: "Command failed.
Exit code: 1
Command: sh
Arguments: -c NODE_ENV=test jest
Directory: /Users/ernesto/code/with-jest-app
Output:
".
info If you think this is a bug, please open a bug report with the information provided in "/Users/ernesto/code/with-jest-app/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

However, yarn dev works flawlessly.

[winton]

I'm switching back to 5 due to the .value is not a valid Plugin property in development mode with a custom (express) server. Tried all the suggestions here with no success :(

[ewagstaff]

I am also getting that error: _document.js: .value is not a valid Plugin property

It appears somehow linked to babel/core -- it only appears after I explicitly install it. Here's my fallback package.json (I don't get the error with this list of dependencies):

{
  "name": "future-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "next",
    "build": "next build && next export",
    "start": "next start"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/preset-env": "^7.0.0-beta.46",
    "@babel/preset-react": "^7.0.0-beta.46",
    "@zeit/next-less": "^0.2.0",
    "babel-plugin-inline-dotenv": "^1.1.2",
    "babel-plugin-transform-inline-environment-variables": "^0.4.1",
    "less": "^2.7.3",
    "next": "^6.0.0",
    "react": "^16.3.2",
    "react-dom": "^16.3.2"
  }
}

EDIT: More detail -- babel/core v 7.0.0-beta.46 definitely does appear to be the culprit. No issues if I explicitly install v 7.0.0-beta.42.

[vjpr]

next@6.0.0 uses 7.0.0-beta.42.

From my debugging it seems that the babel-loader in Next.js's default config has two plugins.

https://github.com/zeit/next.js/blob/canary/server/build/webpack.js#L18-L19

They are ConfigItems which are created by Next.js upfront for caching/performance purposes.

It is the .value being read on these ConfigItems that is causing the error during validation. They should be transformed into plugin objects I think, but they are failing to do so.

@babel/core#createConfigItem is used to create the ConfigItems.

Maybe the version differences are responsible as @ewagstaff observed? Maybe there were changes made to the createConfigItem api?

...maybe I am on the wrong track too. It's very tricky to figure out what is going on.

---

If I comment out https://github.com/zeit/next.js/blob/canary/server/build/webpack.js#L37-L40 the error disappears.

---

If I stop using createConfigItem the error also disappears:

//var presetItem = (0, _core.createConfigItem)(require('./babel/preset'), {
//  type: 'preset'
//});
//var hotLoaderItem = (0, _core.createConfigItem)(require('react-hot-loader/babel'), {
//  type: 'plugin'
//});
//var reactJsxSourceItem = (0, _core.createConfigItem)(require('@babel/plugin-transform-react-jsx-source'), {
//  type: 'plugin'
//});

var presetItem = require('./babel/preset')
var hotLoaderItem = require('react-hot-loader/babel')
var reactJsxSourceItem = require('@babel/plugin-transform-react-jsx-source')

---

My best guess is...

The issue is probably caused by a change to the createConfigItem api from 42 -> 46, or perhaps @babel/core is being used as a singleton and storing the cached config, which the other instance of @babel/core cannot access.

Maybe @loganfsmyth can shed some light?

[billnbell]

We are having this same issue.

[merrywhether]

As I mentioned in the other similar thread https://github.com/zeit/next.js/issues/4239#issuecomment-386450100, I can at least confirm that forcing beta.42 (I did it via yarn resolutions) does allow everything to work.

[loganfsmyth]

For the people getting the

<project root>\jest.setup.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { configure } from "enzyme"
                                                                                                    ^

    SyntaxError: Unexpected token {

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:316:17)

error, my recommendation would be to install babel-jest. At least in my tests, it appears to be installed in the wrong place, making Jest unable to load it properly.

If you're seeing the error

Plugin 0 specified in "/node_modules/next/babel.js" provided an invalid property of "default" (While processing preset: ...

As mentioned above, you are using a combination of Babel 6 and Babel 7.

As for

.value is not a valid Plugin property

I personally have not been able to reproduce it yet. If someone could make an example repository that I can clone, I'd be happy to take a look.

[gnapse]

you are using a combination of Babel 6 and Babel 7

Any suggestions about how to diagnose this? I'm having that error, but I have no explicit dependency on babel 6.

Here are my relevant files:

next.config.js

const withTypescript = require('@zeit/next-typescript');
module.exports = withTypescript();

.babelrc

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

package.json

{
  "main": "index.js",
  "private": true,
  "scripts": {
    "dev": "next -p 3030",
    "build": "next build",
    "start": "next start",
    "test": "NODE_ENV=test jest",
    "lint": "tslint -c tslint.json '{src,pages}/**/*.{ts,tsx}'",
    "prettify": "prettier --write './**/*.{ts,tsx,js,css,scss,md}'",
    "prettier-check": "prettier --list-different './**/*.{ts,tsx,js,css,scss,md}'",
    "postinstall": "node node_modules/husky/lib/installer/bin install"
  },
  "dependencies": {
    "next": "^6.0.0",
    "react": "^16.3.2",
    "react-dom": "^16.3.2"
  },
  "devDependencies": {
    "@types/jest": "^22.2.3",
    "@types/next": "^2.4.9",
    "@types/react": "^16.3.13",
    "@types/react-dom": "^16.0.5",
    "@zeit/next-typescript": "^0.1.1",
    "babel-core": "^7.0.0-bridge.0",
    "babel-jest": "^22.4.3",
    "husky": "^1.0.0-rc.2",
    "jest": "^22.4.3",
    "lint-staged": "^7.0.5",
    "prettier": "^1.12.1",
    "react-testing-library": "2.4.0",
    "ts-jest": "^22.4.4",
    "tslint": "^5.10.0",
    "tslint-config-prettier": "^1.12.0",
    "tslint-react": "^3.5.1",
    "typescript": "^2.8.3"
  },
  "husky": {
    "hooks": {
      "pre-commit": "yarn lint && lint-staged",
      "pre-push": "yarn lint && yarn test && yarn prettier-check"
    }
  },
  "lint-staged": {
    "./**/*.{ts,tsx,js,css,scss,md}": [
      "prettier --write",
      "git add"
    ]
  }
}

[gnapse]

Also, I insist, this issue should not be closed. The author of the issue closed it after the issue was "fixed" by a recommendation that was later deemed not convenient. (not to mention that I tried that recommendation out of despair, and I still got the error).

And also, as an additional reason to reopen this issue, the with-jest and with-jest-typescript examples in this very repo are having this issue, as I mentioned before.

[gnapse]

Update: this seems to be related to the fact that jest is not yet fully compatible with babel 7. There are some instructions here that supposedly make it all work, but I tried it and it does not.

I found the link to that documentation in this jest github issue, which I'm linking here for reference as well.

[merrywhether]

In your yarn.lock file you can find things that are using babel 6 modules by searching for babel-, but this can be really annoying.

With regard to testing, I'm using jest and babel-jest at 23.0.0-beta.0 and they work fine with babel 7.

You can also go down the resolution forcing path in package.json:

  "resolutions": {
    "@babel/core": "7.0.0-beta.42",
    "@babel/polyfill": "7.0.0-beta.42",
    "@babel/preset-env": "7.0.0-beta.42",
    "@babel/plugin-proposal-class-properties": "7.0.0-beta.42",
    "@babel/plugin-proposal-object-rest-spread": "7.0.0-beta.42",
    "@babel/plugin-proposal-optional-catch-binding": "7.0.0-beta.42",
    "@babel/plugin-transform-runtime": "7.0.0-beta.42",
    "@babel/preset-env": "7.0.0-beta.42",
    "@babel/preset-react": "7.0.0-beta.42",
    "@babel/preset-typescript": "7.0.0-beta.42",
    "@babel/runtime": "7.0.0-beta.42",
    "babel-jest": "23.0.0-beta.0",
    "jest": "23.0.0-beta.0"
  }

This may be more than you need but it does a pretty good job of making sure other babel-7-compatible libs don't wreck your repo.

[billnbell]

Some info to get Babel 7 to work...

http://artsy.github.io/blog/2017/11/27/Babel-7-and-TypeScript/

[gnapse]

@billnbell to be clear, I got typescript to work with babel 7 and next 6. The problem I am having is only with tests and jest. yarn dev works, my web app works. It's yarn test the one that throws the error shown in the output in my earlier comment.

I ended up going back to next v5.1.0, which immediately solves the problem. I'm not saying it's next's fault, but apparently, other libs are creating conflict by not being fully ready to work alongside babel 7.

[timneutkens]

@gnapse check out the updated version of with-jest (updated earlier today), basically you need to add the bridged babel-core module, and then also have babel-jest

[timneutkens]

Also for everyone posting their .babelrc/package.json with @babel/preset-env or preset-env in it. Please read this comment: https://github.com/zeit/next.js/issues/4227#issuecomment-385688144

[gnapse]

you need to add the bridged babel-core module, and then also have babel-jest

Thanks @timneutkens. That did it. I'd swear I had done that exact change before without luck, but apparently not exactly. It's working now!

[billnbell]

I am getting this too

_document.js: .value is not a valid Plugin property

[billnbell]

  at Array.forEach (<anonymous>)
    at validatePluginObject (/Users/billbell/v/cf-v2/next-frontend/node_modules/@babel/core/lib/config/validation/plugins.js:50:20)
    at /Users/billbell/v/cf-v2/next-frontend/node_modules/@babel/core/lib/config/full.js:206:53
    at cachedFunction (/Users/billbell/v/cf-v2/next-frontend/node_modules/@babel/core/lib/config/caching.js:40:17)
    at loadPluginDescriptor (/Users/billbell/v/cf-v2/next-frontend/node_modules/@babel/core/lib/config/full.js:198:10)
    at /Users/billbell/v/cf-v2/next-frontend/node_modules/@babel/core/lib/config/full.js:54:16
    at Array.map (<anonymous>)
    at recurseDescriptors (/Users/billbell/v/cf-v2/next-frontend/node_modules/@babel/core/lib/config/full.js:53:36)
    at loadFullConfig (/Users/billbell/v/cf-v2/next-frontend/node_modules/@babel/core/lib/config/full.js:103:6)
    at /Users/billbell/v/cf-v2/next-frontend/node_modules/@babel/core/lib/transform.js:26:33
    at process._tickCallback (internal/process/next_tick.js:150:11)

 @ multi ./pages/_document.js

And my .babelrc

{
        "presets": [
                "next/babel"
        ],
        "plugins": []
}

[billnbell]

I could only fix it with: Commenting out if (validator) in node_modules/@babel/core/lib/config/validation/plugins.js

function validatePluginObject(obj) {
  Object.keys(obj).forEach(function (key) {
    var validator = VALIDATORS[key];
    //if (validator) validator(key, obj[key]);else throw new Error("." + key + " is not a valid Plugin property");
  });
  return obj;
}