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.