search

vercel / next.js

The React Framework
https://nextjs.org
MIT License
127.05k stars 27k forks source link

Build error next.js 6.0.0 #4227

Closed paschaldev closed 6 years ago

paschaldev commented 6 years ago

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
billnbell commented 6 years ago

None of these suggestions work for me. We need to use typescript.

package.json:

  "dependencies": {
    "@babel/cli": "^7.0.0-beta.42",
    "@babel/preset-env": "^7.0.0-beta.42",
    "@babel/preset-react": "^7.0.0-beta.42",

.babelrc.js

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

module.exports = {
  "presets": [["next/babel", {"preset-env": {"modules": "commonjs"}}]],
  "plugins": [["transform-define", env],
    "@babel/plugin-proposal-object-rest-spread",
      ["module-resolver", {
      "root": ["/Users/billbell/v/cf-v2/next-admin"],
      "alias": {
        "~": "././core/components",
        "^": "./core/styles",
        "@": "./core",
        "$": "./"
      }
    }]
  ]
}

And next.config.js

const glob = require('glob')
const withTypeScript = require('next-awesome-typescript')

const tsOptions = {}

module.exports = withTypeScript(tsOptions, {
  webpack (cfg) {
    cfg.plugins = cfg.plugins.filter(plugin => {
      if (plugin.constructor.name === 'UglifyJsPlugin') {
        return false
      } else {
        return true
      }
    })
    cfg.module.rules.push({
      test: /pages.*\.test\.+(js|jsx|ts|tsx)$/,
      loader: 'ignore-loader'
    })
    return cfg
  },
  exportPathMap () {
    const pathMap = {}
    glob.sync('pages/**/*.js', {ignore: 'pages/_document.js'}).forEach(s => {
      const path = s.split(/(pages|\.)/)[2].replace(/^\/index$/, '/')
      pathMap[path] = {page: path}
    })
    return pathMap
  }
})

Getting

/Users/billbell/v/cf-v2/next-admin/core/components/Editor/TextEditor.tsx: .value is not a valid Plugin property

supadits commented 6 years ago

I got the same error after upgrade existing project. The error can be reproduced with very simple Express custom server setup Still can not find the solution

EDIT: Using either @wilsonpage npm i -D babel-loader@7 or @martinestigarribiakognitiv npm i -D babel-loader@8.0.0-beta.3 fix below error

package.json

{
  "name": "next2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "babel-node index.js",
  },
  "author": "",
  "license": "MIT",
  "dependencies": {
    "express": "^4.16.3",
    "next": "^6.0.3",
    "react": "^16.4.0",
    "react-dom": "^16.4.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.0.0-beta.49",
    "@babel/core": "^7.0.0-beta.49",
    "@babel/node": "^7.0.0-beta.49",
    "@babel/preset-es2015": "^7.0.0-beta.49"
  }
}

.babelrc

{
    "presets": ["@babel/es2015", "next/babel"]
}

index.js

import express from 'express'
import next from 'next'

const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare()
.then(() => {
    const server = express()

    server.get('*', (req, res) => {
        return handle(req, res)
    })

    server.listen(3333, err => {
        if(err) throw err
        console.log('> Ready on http://localhost:3333')
    })
})
.catch(err => {
    console.error(err.stack)
    process.exit(1)
})

pages/index.js

export default () => (
    <div>This is Index</div>
)

And the result after npm run dev

ERROR  Failed to compile with 1 errors                                                                                                                                     10:48:19

 error  in ./pages/index.js

Module build failed: Error: [BABEL] /Users/art/app_react/next2/pages/index.js: .value is not a valid Plugin property
    at Object.keys.forEach.key (/Users/art/app_react/next2/node_modules/@babel/core/lib/config/validation/plugins.js:52:56)
    at Array.forEach (<anonymous>)
    at validatePluginObject (/Users/art/app_react/next2/node_modules/@babel/core/lib/config/validation/plugins.js:50:20)
    at instantiatePlugin (/Users/art/app_react/next2/node_modules/@babel/core/lib/config/full.js:201:55)
    at cachedFunction (/Users/art/app_react/next2/node_modules/@babel/core/lib/config/caching.js:32:19)
    at loadPluginDescriptor (/Users/art/app_react/next2/node_modules/@babel/core/lib/config/full.js:192:10)
    at config.plugins.map.descriptor (/Users/art/app_react/next2/node_modules/@babel/core/lib/config/full.js:68:16)
    at Array.map (<anonymous>)
    at recurseDescriptors (/Users/art/app_react/next2/node_modules/@babel/core/lib/config/full.js:67:38)
    at loadFullConfig (/Users/art/app_react/next2/node_modules/@babel/core/lib/config/full.js:100:6)
    at process.nextTick (/Users/art/app_react/next2/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/index.js

ModuleBuildError: Module build failed: Error: [BABEL] /Users/art/app_react/next2/pages/index.js: .value is not a valid Plugin property
    at Object.keys.forEach.key (/Users/art/app_react/next2/node_modules/@babel/core/lib/config/validation/plugins.js:52:56)
    at Array.forEach (<anonymous>)
    at validatePluginObject (/Users/art/app_react/next2/node_modules/@babel/core/lib/config/validation/plugins.js:50:20)
    at instantiatePlugin (/Users/art/app_react/next2/node_modules/@babel/core/lib/config/full.js:201:55)
    at cachedFunction (/Users/art/app_react/next2/node_modules/@babel/core/lib/config/caching.js:32:19)
    at loadPluginDescriptor (/Users/art/app_react/next2/node_modules/@babel/core/lib/config/full.js:192:10)
    at config.plugins.map.descriptor (/Users/art/app_react/next2/node_modules/@babel/core/lib/config/full.js:68:16)
    at Array.map (<anonymous>)
    at recurseDescriptors (/Users/art/app_react/next2/node_modules/@babel/core/lib/config/full.js:67:38)
    at loadFullConfig (/Users/art/app_react/next2/node_modules/@babel/core/lib/config/full.js:100:6)
    at process.nextTick (/Users/art/app_react/next2/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)
    at runLoaders (/Users/art/app_react/next2/node_modules/webpack/lib/NormalModule.js:195:19)
    at /Users/art/app_react/next2/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /Users/art/app_react/next2/node_modules/loader-runner/lib/LoaderRunner.js:230:18
    at context.callback (/Users/art/app_react/next2/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /Users/art/app_react/next2/node_modules/babel-loader/lib/index.js:98:23
    at /Users/art/app_react/next2/node_modules/babel-loader/lib/cache.js:120:25
    at /Users/art/app_react/next2/node_modules/babel-loader/lib/transform.js:8:72
    at process.nextTick (/Users/art/app_react/next2/node_modules/@babel/core/lib/transform.js:31:14)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)
> Disposing inactive page(s): /
paschaldev commented 6 years ago

@supadits Remove all these dev dependencies and run npm install again, It should work. 

"@babel/cli": "^7.0.0-beta.49",
    "@babel/core": "^7.0.0-beta.49",
    "@babel/node": "^7.0.0-beta.49",
    "@babel/preset-es2015": "^7.0.0-beta.49"
supadits commented 6 years ago

@paschaldev But then the server code can not have import statement which is used everywhere in current project (and planning to upgrade to 6.0). In addition to that is also async/await.

paschaldev commented 6 years ago

@supadits Next.JS has all these already setup / figured out. You don't need them explicitly. I don't have any in my package.json and I use next 6.

I used to have the same errors like you until I removed the babel dependencies. It will work fine

schoenwaldnils commented 6 years ago

I still also have the same Issue

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

Repo: https://github.com/schoenwaldnils/blog/tree/greenkeeper/next-6.0.3

.babelrc

{
  "presets": [
    "next/babel"
  ],
  "plugins": [
    "inline-react-svg",
    [ "styled-components", {
      "ssr": true,
      "displayName": true,
      "preprocess": false
    }],
    [ "transform-define", "./env-config.js" ]
  ]
}

Sadly I'm stuck there :/

EDIT: First step forward is to use require('@babel/register'); instead of require('babel-register');

billnbell commented 6 years ago

I got this to work finally! next - v6.0.3.

Basically:

  1. rm -rf node_modules
  2. rm -rf .next
  3. rm package-lock.json
  4. npm i
  5. rm .babelrc

We are switching to .babelrc.js - it is easier to manage and works.

Every change you make do those 5 steps. Do not use ^ or ~ for the babel stuff, since it will upgrade you to .49 and that will not work. Also some modules 42, 44 etc will not work. Make sure all are 42.

I noticed that you need to delete package-lock.json and then run npm i to fix it.

To run my tests:

  1. To test prod mode: NODE_ENV=production npx next build, then NODE_ENV=production npx node index OR NODE_ENV=production npx next if you are not using the index.js way. We use Node to set routes, etc.

  2. To test running in browser with webpack: NODE_ENV=development npx node index or NODE_ENV=development npx next

  3. NODE_ENV=production BABEL_ENV=test npx jest -- that is to test using jest

package.json parts:

  "dependencies": {
    "@babel/cli": "7.0.0-beta.42",
    "@babel/core": "7.0.0-beta.42",
    "@babel/plugin-proposal-object-rest-spread": "7.0.0-beta.42",
    "@babel/preset-env": "7.0.0-beta.42",
    "@babel/preset-react": "7.0.0-beta.42",
    "@zeit/next-typescript": "^1.0.1",
     "next": "~6.0.3",
      "jest": "^22.4.3",
      "ts-jest": "^22.4.5",
       "ts-loader": "^3.5.0",
     "babel-loader": "^8.0.0-beta.3",
     "babel-plugin-module-resolver": "^3.1.1"
 "devDependencies": {
    "@babel/core": "7.0.0-beta.42",
    "@babel/plugin-proposal-class-properties": "7.0.0-beta.42",
    "apollo-link-schema": "^1.1.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^7.2.3",
    "babel-jest": "^22.4.4",
    "babel-plugin-add-module-exports": "^0.2.1",
    "babel-preset-es2015": "^6.24.1",
    "jest": "^22.4.3",
}

Later in package.json setup jest:

"jest": {
    "transform": {
      "^.+\\.tsx?$": "babel-jest",
      "^.+\\.jsx?$": "babel-jest"
    },
    "testRegex": "(/__tests__/.*(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
    "testPathIgnorePatterns": [
      "/.next/",
      "/node_modules/"
    ],
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ],
    "moduleNameMapper": {
      "\\~(.*)$": "<rootDir>/core/components/$1",
      "\\^(.*)$": "<rootDir>/core/styles/$1",
      "@(?!babel|rules)(.*)$": "<rootDir>/core/$1",
      "\\$(.*)$": "<rootDir>/$1"
    },
    "setupTestFrameworkScriptFile": "<rootDir>/tests/setupTestFrameworkScript.js",
    "coverageDirectory": "<rootDir>/coverage/",
    "coveragePathIgnorePatterns": [
      "/node_modules/",
      "/.next/",
      "/coverage/"
    ],
    "setupFiles": [
      "<rootDir>/tests/setupTests.js"
    ],
    "globals": {
      "ts-jest": {
        "useBabelrc": true
      }
    }

next.config.js

const glob = require('glob')
const withTypeScript = require('@zeit/next-typescript')
const webpack = require('webpack')

module.exports = withTypeScript({
  webpack (config, options) {
    console.log(options)
    const { isServer } = options

    config.plugins = config.plugins.filter(plugin => {
      if (plugin.constructor.name === 'UglifyJsPlugin') {
        return false
      } else {
        return true
      }
    })
    if (isServer === false) {
      config.plugins.push(
        new webpack.IgnorePlugin(/(worker-farm|fsevents|readline|express)/)
      )
      config.plugins.push(
        new webpack.IgnorePlugin(/node_modules\/worker-farm\/lib\/fork\.js/)
      )
      config.node = {fs: 'empty', 'express': 'empty', 'module': 'empty'}
    }
    config.module.rules.push({
      test: /\.+(js|jsx|ts|tsx)$/,
      exclude: /node_modules/,
      use: {loader: 'babel-loader'}
    })
    config.module.rules.push({
      test: /pages.*\.test\.+(js|jsx|ts|tsx)$/,
      loader: 'ignore-loader'
    })
    console.log(config)
    return config
  },
  exportPathMap () {
    const pathMap = {}
    glob.sync('pages/**/*.js', {ignore: 'pages/_document.js'}).forEach(s => {
      const path = s.split(/(pages|\.)/)[2].replace(/^\/index$/, '/')
      pathMap[path] = {page: path}
    })
    return pathMap
  }

})

And .babelrc.js

const path = require('path');

console.log('next.config.js --->', path.resolve('./'))

module.exports = {
  "env": {
    "test": {
      "presets": ["@babel/preset-env", "next/babel", "@zeit/next-typescript/babel"],
      "plugins": [
        "@babel/plugin-proposal-object-rest-spread",
        ["module-resolver", {
          "root": [path.resolve('./')],
          "alias": {
            "\\~": "./core/components",
            "\\^": "./core/styles",
            "\\@": "./core",
            "\\$": "./"
          }
        }]
      ]
    },
    "production": {
      "presets": ["next/babel", "@zeit/next-typescript/babel"],
      "plugins": [
        ["module-resolver", {
          "root": [path.resolve('./')],
          "alias": {
            "\\~": "./core/components",
            "\\^": "./core/styles",
            "\\@": "./core",
            "\\$": "./"
          }
        }]
      ]
    },
    "development": {
      "presets": ["next/babel", "@zeit/next-typescript/babel"],
      "plugins": [
        ["module-resolver", {
          "root": [path.resolve('./')],
          "alias": {
            "\\~": "./core/components",
            "\\^": "./core/styles",
            "\\@": "./core",
            "\\$": "./"
          }
        }]
      ]
    }
  }
}
banyawat commented 6 years ago

Finally, I've found simplest way to fixed it in next 6.0.0 +

just put babel config like this

/server/.babelrc

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

devDependencies + start script

"scripts": {
    "dev": "babel-node ./server/server.js",
    "build": "next build; babel server -d dist --copy-files",
    "start": "node ./dist/server.js"
} ,
"devDependencies": {
    "@babel/cli": "7.0.0-beta.48",
    "@babel/core": "7.0.0-beta.48",
    "@babel/node": "7.0.0-beta.48",
    "@babel/preset-env": "7.0.0-beta.48"
}
billnbell commented 6 years ago

@banyawat Doesn't next build use webpack too?

khacthanh244 commented 6 years ago

i same issue ` { "presets": [ "next/babel" ], "plugins": [ ["transform-define", "./env-config.js"], ] }

`

teleginzhenya commented 6 years ago

@khacthanh244 You should use commonjs modules in .babelrc.js. Don't forget to update babel-plugin-transform-define to 1.3.0

// .babelrc.js
const env = require("./env-config.js");

module.exports = {
  presets: ["next/babel"],
  plugins: [["transform-define", env]]
};
Zertz commented 6 years ago

We were suffering "works on my machine" syndrome and for us it was as simple as deleting node_modules and reinstalling dependencies with a newer version of yarn.

merrywhether commented 6 years ago

@timneutkens There is a lot of duplicated effort as people individually discover forcing resolutions in yarn (and even having to switch to yarn), and unfortunately most of this knowledge is held in this closed thread. Are there plans to update next6 to a later babel beta version in order to fix this problem (outside of the forks like https://github.com/zeit/next.js/issues/4227#issuecomment-387446918, which I suppose could've been a PR)? Or is the official plan to wait until babel 7 full release unless a good PR comes in?

djskinner commented 6 years ago

Hey @billnbell is your working next6/typescript monorepo available to see anywhere? I have a next5/typescript monorepo but trying to migrate to next6 and not having much luck.

kevhuang commented 6 years ago

I'm running a custom Express server too, and I placed all the server code under ./server, and like @banyawat, I added a .babelrc file directly under the ./server folder, and I was able to run babel-node server/index.js. The .babelrc file just contains the env preset.

// ./server/.babelrc

{
  "presets": ["env"]
}
darrylsepeda commented 6 years ago

In my case, the problem is:

  1. If you use babel-node command, you need to install @babel/node, previously we don't have this because it is inside babel-cli
  2. All babel related packages, change to become "@babel/..." (except for plugins in my case)
  3. Preset in .babelrc update from "[preset-name]" to become "@babel/[preset-name]"

This is how my preset looks like now:

"presets": [
    "next/babel",
    "@babel/preset-react",
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["last 2 versions"]
      }
    }],
  ],

Now everything works fine in Next 6.1.1 šŸŽ‰

DullReferenceException commented 6 years ago

I have simply this:

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

...and even that fails. If I have no .babelrc then things are great, but I need to get my unit tests transpiling.

Update:

This works, and I run my tests with BABEL_ENV=mocha.

{
  "env": {
    "development": {
      "presets": ["next/babel"]
    },
    "production": {
      "presets": ["next/babel"]
    },
    "mocha": {
      "presets": [["next/babel", { "preset-env": { "modules": "commonjs" } }]]
    }
  }
}
pnaika commented 6 years ago

facing same issue, babelrc

{
  "presets": [
    "env",
    "next/babel",
    "stage-2",
    "es2015"],
  "plugins": [
    [
      "module-resolver",
      {
        "root": ["./"]
      }
    ]
  ],
  "env": {
    "development": {
      "presets": ["next/babel"]
    },
    "production": {
      "presets": ["next/babel"]
    },
    "test": {
      "presets": [["next/babel", { "preset-env": { "modules": "commonjs" } }]]
    }
  }
}

dependencies (from package.json)

"@material-ui/core": "^1.5.1",
    "@zeit/next-css": "^0.2.0",
    "@zeit/next-sass": "^0.2.0",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "enzyme": "^3.4.4",
    "enzyme-adapter-react-16": "^1.2.0",
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "22.4.3",
    "babel-plugin-module-resolver": "^3.1.1",
    "jest": "^23.5.0",
    "react-test-renderer": "^16.4.2",
    "react-addons-test-utils": "^15.6.2",
    "file-loader": "^2.0.0",
    "isomorphic-unfetch": "^2.1.1",
    "next": "^6.1.1",
    "node-sass": "^4.9.3",
    "postcss-css-variables": "^0.9.0",
    "postcss-loader": "^3.0.0",
    "raw-loader": "^0.5.1",
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-redux": "^5.0.7",
    "redux": "^4.0.0",
    "redux-devtools-extension": "^2.13.5",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",
    "semantic-ui-css": "^2.3.3",
    "semantic-ui-react": "^0.82.3",
    "url-loader": "^1.1.1"

error

FAIL components/GraphComponent/GraphComponent.spec.js ā— Test suite failed to run

Plugin 0 specified in "/Users/prashanthnaika/Documents/Projects/tweettraders-ui/node_modules/next/babel.js" provided an invalid property of "default" (While processing preset: "/Users/prashanthnaika/Documents/Projects/tweettraders-ui/node_modules/next/babel.js")

  at Plugin.init (node_modules/jest-config/node_modules/babel-core/lib/transformation/plugin.js:131:13)
      at Array.map (<anonymous>)
      at Array.map (<anonymous>)
mannycolon commented 6 years ago

The only way I could make it work was by running https://github.com/babel/babel-upgrade which upgrades any babel transformations you're using.

And I changed my .babelrc file:

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

Also if you're using jest upgrade babel-jest to the latest version and install "babel-core": "7.0.0-bridge.0".

timneutkens commented 6 years ago

Please read my earlier comment: https://github.com/zeit/next.js/issues/4227#issuecomment-385688144

mannycolon commented 6 years ago

@timneutkens I have a question. then how can I use ES6 in my custom server?

timneutkens commented 6 years ago

There's 2 options:

  1. you don't, there's really no need to transpile it if you're using the custom server correctly (just implementing routing / caching)

  2. you put the server into a separate directory server add a server/.babelrc and let babel compile using that.

mannycolon commented 6 years ago

@timneutkens How can I verify if code splitting with Webpack is broken in my project?

martpie commented 6 years ago

I think it's getting a bit far from the original issue report. A lot of persons have subscribed to this issue, so if you could open specific issues for specific problems... šŸ™Œ and keep this thread for the problem described in message nĀ°1 :)

mannycolon commented 6 years ago

Moved my questions to https://spectrum.chat/next-js