Next.js: Next 2.3.0 Build Errors

Created on 4 May 2017 · 24Comments · Source: vercel/next.js

Failed to build on /var/folders/ys/lmdgwcfx4vv8w60w68ztzdfm0000gn/T/e219bf14-76f7-492a-b13c-545576e427fb
{ Error: ./~/react-tap-event-plugin/src/injectTapEventPlugin.js
Module not found: Error: Can't resolve 'react-dom/lib/EventPluginHub' in '/Users/tknipfer/Desktop/plate/node_modules/react-tap-event-plugin/src'
resolve 'react-dom/lib/EventPluginHub' in '/Users/tknipfer/Desktop/plate/node_modules/react-tap-event-plugin/src'
  Parsed request is a module
  using description file: /Users/tknipfer/Desktop/plate/node_modules/react-tap-event-plugin/package.json (relative path: ./src)

Running into this when doing a build with the latest next release

Note from maintainers:

Fix

next.config.js

module.exports = {
  webpack: function (c) {
    if (c.resolve.alias) {
      delete c.resolve.alias['react']
      delete c.resolve.alias['react-dom']
    }
    return c
  }
}

Source

knipferrc

👍23

Most helpful comment

@chhuang I understand that. Let me see what we can do about this.
For now, we can try to remove these aliases using a custom webpack config.

// next.config.js
module.exports = {
  webpack: function (c) {
    if (c.resolve.alias) {
      delete c.resolve.alias['react']
      delete c.resolve.alias['react-dom']
    }
    return c
  }
}

EDIT: I've tested ^^ code and it works.

arunoda on 5 May 2017

👍16 🎉4 😕1

All 24 comments

Hmm. I didn't see this from any of our apps.
Could you send us a sample repo?

Or try to remove node_modules dir and try again.

arunoda on 4 May 2017

Yeah sure here is my repo: https://github.com/knipferrc/plate/tree/next

I removed node_modules as well.

knipferrc on 4 May 2017

I guess that the React production aliasing introduced with #1855 messes with imports from react-dom/lib (which are not supported anyway)?

sorin-davidoi on 4 May 2017

I can't run this app. Getting this:

> NODE_ENV=development node server

module.js:472
    throw err;
    ^

Error: Cannot find module '../../../env-config'
    at Function.Module._resolveFilename (module.js:470:15)
    at Function.Module._load (module.js:418:25)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/private/tmp/plate/server/graphql/schemas/getUserProfile.js:2:13)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)

Could you fix that and let us know?

arunoda on 4 May 2017

Getting a similar error when building with 2.3.1 but with different lib.

> Failed to build on /var/folders/01/62l740px2cdf7pt71c398n180000gn/T/2475d29f-f372-48ac-8179-8ef5ecefb86a
{ Error: ./~/react-addons-transition-group/index.js
Module not found: Error: Can't resolve 'react/lib/ReactTransitionGroup' in '/Users/juan/Documents/Beakyn/GSP/_labs/gsp-account-react/node_modules/react-addons-transition-group'
resolve 'react/lib/ReactTransitionGroup' in '/Users/juan/Documents/Beakyn/GSP/_labs/gsp-account-react/node_modules/react-addons-transition-group'
  Parsed request is a module
  using description file: /Users/juan/Documents/Beakyn/GSP/_labs/gsp-account-react/node_modules/react-addons-transition-group/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
...

This doesn't happen on 2.2
Removed node_modules and reinstalled.

Thank you.

juanpujol on 5 May 2017

👍5

I guess @sorin-davidoi is right.
Can someone send me a minimal sample repo where I can work on this see what's going on?
That'd be really helpful.

arunoda on 5 May 2017

I'm getting the same error for ReactTransitionGroup on 2.2

> Using external babel configuration
> location: "/Users/chh/Dropbox/_code/.babelrc"
> Using "webpack" config function defined in next.config.js.
> Failed to build on /var/folders/3g/36b7smhs3_90v9g_832y7r740000gn/T/357a1a0b-4117-44e8-a342-bdccfacb7004
{ Error: ./~/react-addons-css-transition-group/index.js
Module not found: Error: Can't resolve 'react/lib/ReactCSSTransitionGroup' in '/Users/chh/Dropbox/_code/node_modules/react-addons-css-transition-group'
resolve 'react/lib/ReactCSSTransitionGroup' in '/Users/chh/Dropbox/_code/node_modules/react-addons-css-transition-group'
  Parsed request is a module
  using description file: /Users/chh/Dropbox/_code/node_modules/react-addons-css-transition-group/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration

Edit: sorry, I'm on 2.3.1. My build passes with 2.2

chhuang on 5 May 2017

👍1

@chhuang old package is deprecated.
May be try using https://github.com/reactjs/react-transition-group as a replacement.

arunoda on 5 May 2017

@arunoda this is a third party lib using it, I don't have control of it.

chhuang on 5 May 2017

Getting this on 2.0 as well. Not sure why.

package.json is as follows:

{
  "version": "1.0.0",
  "scripts": {
    "test": "jest __tests__/*",
    "build": "next build",
    "start": "node server/index.js",
    "dev": "NODE_ENV=development && nodemon --watch server server/index.js",
    "postinstall": "heroku-nextjs-build"
  },
  "author": "tgoldenberg",
  "dependencies": {
    "@mars/heroku-nextjs-build": "^1.1.0",
    "auth0-js": "^8.2.0",
    "babel-plugin-root-import": "^5.0.0",
    "babel-plugin-syntax-async-functions": "^6.13.0",
    "babel-plugin-transform-class-properties": "^6.23.0",
    "babel-plugin-transform-flow-strip-types": "^6.22.0",
    "babel-plugin-transform-regenerator": "^6.22.0",
    "babel-plugin-wrap-in-js": "^1.1.1",
    "babel-polyfill": "^6.22.0",
    "babel-preset-airbnb": "^2.2.3",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.22.0",
    "babel-register": "^6.22.0",
    "body-parser": "^1.16.0",
    "btoa": "^1.1.2",
    "colors": "^1.1.2",
    "cron": "^1.2.1",
    "crypto": "^0.0.3",
    "d3": "^3.5.17",
    "dotenv": "^4.0.0",
    "express": "^4.14.1",
    "express-jwt": "^5.1.0",
    "fs": "^0.0.1-security",
    "halogen": "^0.2.0",
    "http": "^0.0.0",
    "https": "^1.0.0",
    "js-cookie": "^2.1.3",
    "jwks-rsa": "^1.1.1",
    "jwt-decode": "^2.1.0",
    "lodash": "^4.17.4",
    "mailchimp-api-v3": "^1.7.0",
    "mandrill-api": "^1.0.45",
    "material-ui": "^0.16.7",
    "moment": "^2.17.1",
    "mongoose": "^4.8.1",
    "morgan": "^1.8.0",
    "next": "^2.0.0",
    "njwt": "^0.4.0",
    "node-sass": "^4.5.0",
    "plaid": "^2.0.2",
    "raw-loader": "^0.5.1",
    "rd3": "^0.7.4",
    "react": "^15.4.2",
    "react-addons-css-transition-group": "^15.4.2",
    "react-addons-pure-render-mixin": "^15.4.2",
    "react-addons-transition-group": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-ga": "^2.1.2",
    "react-phone-number-input": "^0.10.1",
    "react-rangeslider": "^2.0.1",
    "react-redux": "^5.0.2",
    "react-responsive": "^1.2.6",
    "react-select": "^1.0.0-rc.3",
    "react-social-icons": "^2.5.1",
    "react-tap-event-plugin": "^2.0.1",
    "react-test-renderer": "^15.4.2",
    "redux": "^3.6.0",
    "redux-devtools-extension": "^2.13.0",
    "redux-logger": "^2.8.1",
    "redux-thunk": "^2.2.0",
    "request-promise": "^4.1.1",
    "requestretry": "^1.12.0",
    "sass-loader": "^4.1.1",
    "underscore": "^1.8.3",
    "us-bank-account-validator": "^0.1.0",
    "wdt-loading": "^0.1.0",
    "webpack": "^2.3.3"
  },
  "engines": {
    "node": "7.x"
  },
  "cacheDirectories": [
    "nextjs/node_modules"
  ],
  "devDependencies": {
    "babel": "^6.5.2",
    "babel-eslint": "^7.1.1",
    "babel-jest": "^18.0.0",
    "babel-plugin-syntax-async-functions": "^6.13.0",
    "babel-plugin-transform-flow-strip-types": "^6.22.0",
    "babel-plugin-transform-regenerator": "^6.22.0",
    "babel-plugin-wrap-in-js": "^1.1.1",
    "babel-polyfill": "^6.22.0",
    "babel-preset-airbnb": "^2.2.3",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.22.0",
    "enzyme": "^2.7.1",
    "eslint": "^3.15.0",
    "eslint-config-airbnb": "^14.0.0",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-jsx-a11y": "^4.0.0",
    "eslint-plugin-react": "^6.9.0",
    "flow-bin": "^0.38.0",
    "jest": "^18.1.0",
    "jest-cli": "^18.1.0",
    "react-addons-test-utils": "^15.4.2"
  }
}

tgoldenberg on 5 May 2017

@tgoldenberg make sure that version you have installed is the same version listed in your package.json:

npm list --depth=0

chhuang on 5 May 2017

@chhuang I understand that. Let me see what we can do about this.
For now, we can try to remove these aliases using a custom webpack config.

// next.config.js
module.exports = {
  webpack: function (c) {
    if (c.resolve.alias) {
      delete c.resolve.alias['react']
      delete c.resolve.alias['react-dom']
    }
    return c
  }
}

EDIT: I've tested ^^ code and it works.

arunoda on 5 May 2017

👍16 🎉4 😕1

@arunoda Thanks! I've put up a sample repo, running npm run build will fail:

https://github.com/chhuang/next.js/tree/master/examples/basic-css

chhuang on 5 May 2017

👍1

We can't fix this issue until everyone moves away from react-addons to their own independent alternatives. In this case for the react-transition-group package.

In the meantime, I'll suggest to do this as a way around.

I'll keep this issue open as a reference.

arunoda on 5 May 2017

Thank you @arunoda. The above config fixed the issue for me.

tgoldenberg on 5 May 2017

👍1

@arunoda with your fix, I get this when I run npm run dev:

> Using "webpack" config function defined in next.config.js.
TypeError: Cannot convert undefined or null to object
    at Object.webpack (/Users/chh/Dropbox/3-work/next.js/examples/basic-css/next.config.js:6:26)

// next.config.js
const webpack = require('webpack');

module.exports = {
  webpack: (config) => {

    delete config.resolve.alias['react'];
    delete config.resolve.alias['react-dom'];

    return config;
  }
};

chhuang on 5 May 2017

@chhuang I got the same error. wrapping the deletes with if (config.resolve.alias) allowed me to run locally, as:

    if (config.resolve.alias) {
      delete config.resolve.alias['react']
      delete config.resolve.alias['react-dom']
    }

fyockm on 5 May 2017

👍4

@fyockm good one. Thanks.
(Updated my original code)

arunoda on 5 May 2017

@arunoda I think you forgot to change c to config in your suggestion

maxlivinci on 6 May 2017

👍1

I am able to run build and start a local server after changing next.config.js but I still cannot push up to Heroku. Is it because I customized .babelrc for Ant Design, as suggested in issues #484?

Module build failed: ReferenceError: Unknown plugin "import" specified in "/tmp/build_3209d692d315564c9241ca4818b94f49/.babelrc" at 0, attempted to resolve relative to "/tmp/build_3209d692d315564c9241ca4818b94f49"

Solved
For people having the same issue as me, move babel-plugin-import from devDependencies to dependencies, because it doesn't push up to Heroku for production otherwise.

Set start to next start -p $PORT and add "heroku-postbuild": "next build" in package.json.

raycent on 17 May 2017

👍1

@arunoda It seems that the workaround solves the issue with running next build but breaks the new next export. I'm getting the following:

> [email protected] export /path/to/repo/example-repo
> next export

  Exporting to: /path/to/repo/example-repo/out

Build your with "next build" before running "next start".

npm ERR! Linux 4.10.0-21-generic
npm ERR! argv "/path/to/.nvm/versions/node/v6.10.3/bin/node" "/path/to/.nvm/versions/node/v6.10.3/bin/npm" "run" "export"
npm ERR! node v6.10.3
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] export: `next export`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] export script 'next export'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the example-repo package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     next export
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs example-repo
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls example-repo
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /path/to/repo/example-repo/npm-debug.log

Also, npm-debug.log says:

...
Args: [ '-c', 'next export' ]
Returned: code: 1  signal: null
Failed to exec export script
verbose stack Error: [email protected] export: `next export`
verbose stack Exit status 1
...

My next.config.js is:

module.exports = {
  distDir: 'build',
  exportPathMap: () => {
    return {
      "/": { page: "/" },
    }
  },
  webpack: function (c) {
    if (c.resolve.alias) {
      delete c.resolve.alias['react']
      delete c.resolve.alias['react-dom']
    }
    return c
  },
}

Please note: Removing the custom dist directory distDir: 'build', line solves this issue i.e. brings up no more errors.

Hope this helps someone as it took me ages to figure out!

jasdeepkhalsa on 13 Jun 2017

We've reverted #1855 with https://github.com/zeit/next.js/pull/2422 and hope we don't need to do this hack anymore.

arunoda on 2 Jul 2017

💯 👍

timneutkens on 2 Jul 2017

I had this same issue with 5.1.0, using the proposed solution works fine.

module.exports = {
  webpack: function (c) {
    if (c.resolve.alias) {
      delete c.resolve.alias['react']
      delete c.resolve.alias['react-dom']
    }
    return c
  }
}