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

@billnbell please provide a full reproduction repository.

psycura commented 6 years ago

https://github.com/psycura/with-apollo-next Here you can find the repository with same issue

loganfsmyth commented 6 years ago

@psycura Do you have more commits to push potentially? Cloning that repo from scratch and running yarn build errors for me with

$ yarn build
yarn run v1.3.2
warning ../package.json: No license field
$ next build
> Using external babel configuration
> Location: "/private/tmp/with-apollo-next/.babelrc"
> Failed to build
{ Error: (client) ./pages/about.js
Module not found: Error: Can't resolve '../components/Header' in '/private/tmp/with-apollo-next/pages'
resolve '../components/Header' in '/private/tmp/with-apollo-next/pages'
  using description file: /private/tmp/with-apollo-next/package.json (relative path: ./pages)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: /private/tmp/with-apollo-next/package.json (relative path: ./pages)
    using description file: /private/tmp/with-apollo-next/package.json (relative path: ./components/Header)

and if I create that file I get

$ yarn build                    
yarn run v1.3.2
warning ../package.json: No license field
$ next build
> Using external babel configuration
> Location: "/private/tmp/with-apollo-next/.babelrc"
> Failed to build
{ Error: (client) ./components/App.css
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .App {
|   text-align: center;
| }
 @ ./components/App.js 16:0-19
 @ ./pages/about.js
 @ multi ./pages/about.js
psycura commented 6 years ago

@loganfsmyth I updated the repo, but this is strange. Beacuse i stuck at this stage:

`$ yarn dev
yarn dev v0.27.5
$ next
> Using external babel configuration
> Location: "D:\Sites\training\test\with-apollo-next\.babelrc"

 ERROR  Failed to compile with 2 errors                                                                                                                                                                                                             09:18:46

 error  in ./pages/_app.js

Module build failed: Error: [BABEL] D:\Sites\training\test\with-apollo-next\pages\_app.js: .value is not a valid Plugin property
    at D:\Sites\training\test\with-apollo-next\node_modules\@babel\core\lib\config\validation\plugins.js:54:56
    at Array.forEach (<anonymous>)
    at validatePluginObject (D:\Sites\training\test\with-apollo-next\node_modules\@babel\core\lib\config\validation\plugins.js:52:20)
    at D:\Sites\training\test\with-apollo-next\node_modules\@babel\core\lib\config\full.js:215:53
    at cachedFunction (D:\Sites\training\test\with-apollo-next\node_modules\@babel\core\lib\config\caching.js:42:17)
    at loadPluginDescriptor (D:\Sites\training\test\with-apollo-next\node_modules\@babel\core\lib\config\full.js:207:10)
    at D:\Sites\training\test\with-apollo-next\node_modules\@babel\core\lib\config\full.js:64:16
    at Array.map (<anonymous>)
    at recurseDescriptors (D:\Sites\training\test\with-apollo-next\node_modules\@babel\core\lib\config\full.js:63:36)
    at loadFullConfig (D:\Sites\training\test\with-apollo-next\node_modules\@babel\core\lib\config\full.js:112:6)
    at D:\Sites\training\test\with-apollo-next\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/_app.js

 error  in ./pages/_document.js

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

Could you run npm ls @babel/core and let me know the result?

loganfsmyth commented 6 years ago

My guess is what is happening is that you have two copies of @babel/core, one of which is used by Next, and one of which is used by babel-loader, and right now the logic expects them to me the same instance because Next creates the config item, but then passes it off to babel-loader.

afganhalbana commented 6 years ago

Hi @GabrielDuarteM I've just solved probably the same issue like yours, after changing the babel-core to the supported version which is 7.0.0-bridge.0, the next thing you need to do is to change the _modules_ value to anything you want except true, because it doesnt accept true value anymore. Since this error told me so Invariant Violation: [BABEL] /Users/mokapos/node/next-blog/jest.setup.js: Invalid Option: The 'modules' option m ust be either 'false' to indicate no modules, or a module type which can be be one of: 'commonjs' (default), 'amd', 'umd', 'systemjs'. (While processing: "/Use rs/mokapos/node/next-blog/node_modules/next/babel.js$0")

Finally your .babelrc pretty much would be like "test": { "presets": [["next/babel", {"preset-env": {"modules": true}}]] }

psycura commented 6 years ago

@loganfsmyth this if the result of npm ls @babel/core

$ npm ls @babel/core
with-apollo@2.0.0 D:\Sites\training\test\with-apollo-next
`-- @babel/core@7.0.0-beta.44
vjpr commented 6 years ago

@loganfsmyth My guess is what is happening is that you have two copies of @babel/core, one of which is used by Next, and one of which is used by babel-loader, and right now the logic expects them to me the same instance because Next creates the config item, but then passes it off to babel-loader.

Is this an api issue, or is @babel/core used as a singleton to store state?

JasonJJFS commented 6 years ago

I am also facing this issue:

`Module build failed: Error: [BABEL] /Users/jason/WebstormProjects/route-tracker-site/pages/api/v1/track/index.js: .value is not a valid Plugin property at /Users/jason/WebstormProjects/route-tracker-site/node_modules/@babel/core/lib/config/validation/plugins.js:54:56 at Array.forEach () at validatePluginObject (/Users/jason/WebstormProjects/route-tracker-site/node_modules/@babel/core/lib/config/validation/plugins.js:52:20) at /Users/jason/WebstormProjects/route-tracker-site/node_modules/@babel/core/lib/config/full.js:215:53 at cachedFunction (/Users/jason/WebstormProjects/route-tracker-site/node_modules/@babel/core/lib/config/caching.js:42:17) at loadPluginDescriptor (/Users/jason/WebstormProjects/route-tracker-site/node_modules/@babel/core/lib/config/full.js:207:10) at /Users/jason/WebstormProjects/route-tracker-site/node_modules/@babel/core/lib/config/full.js:64:16 at Array.map () at recurseDescriptors (/Users/jason/WebstormProjects/route-tracker-site/node_modules/@babel/core/lib/config/full.js:63:36) at loadFullConfig (/Users/jason/WebstormProjects/route-tracker-site/node_modules/@babel/core/lib/config/full.js:112:6) at /Users/jason/WebstormProjects/route-tracker-site/node_modules/@babel/core/lib/transform.js:28:33 at process._tickCallback (internal/process/next_tick.js:176:11)

@ multi ./pages/api/v1/track/index.js `

My .babelrc is:

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

martpie commented 6 years ago

Here is my own .babelrc 

{
  "env": {
    "development": {
      "presets": ["next/babel"],
      "plugins": [
        "@babel/plugin-transform-flow-strip-types"
      ]
    },
    "production": {
      "presets": ["next/babel"],
      "plugins": [
        "@babel/plugin-transform-flow-strip-types"
      ]
    },
    "test": {
      "presets": [
        [
          "next/babel", {
            "preset-env": {
              "modules": "commonjs"
            }
          }
        ]
      ],
      "plugins": [
        "@babel/plugin-transform-flow-strip-types"
      ]
    }
  }
}

package.json (sample, with Next 6)

"devDependencies": {
        "@babel/core": "^7.0.0-beta.46",
        "@babel/plugin-transform-flow-strip-types": "^7.0.0-beta.46",
        "babel-core": "^7.0.0-bridge.0",
        "babel-eslint": "^8.2.2",
        "babel-jest": "^22.4.3"
}

Stack trace (when running npm run dev and going to localhost:3000, production build is fine): 

Error in ./pages/index.js

Module build failed: Error: [BABEL] /Users/pierre/dev/chatbot/pages/index.js: .value is not a valid Plugin property
    at /Users/pierre/dev/chatbot/node_modules/@babel/core/lib/config/validation/plugins.js:54:56
    at Array.forEach (<anonymous>)
    at validatePluginObject (/Users/pierre/dev/chatbot/node_modules/@babel/core/lib/config/validation/plugins.js:52:20)
    at /Users/pierre/dev/chatbot/node_modules/@babel/core/lib/config/full.js:215:53
    at cachedFunction (/Users/pierre/dev/chatbot/node_modules/@babel/core/lib/config/caching.js:42:17)
    at loadPluginDescriptor (/Users/pierre/dev/chatbot/node_modules/@babel/core/lib/config/full.js:207:10)
    at /Users/pierre/dev/chatbot/node_modules/@babel/core/lib/config/full.js:64:16
    at Array.map (<anonymous>)
    at recurseDescriptors (/Users/pierre/dev/chatbot/node_modules/@babel/core/lib/config/full.js:63:36)
    at loadFullConfig (/Users/pierre/dev/chatbot/node_modules/@babel/core/lib/config/full.js:112:6)
    at /Users/pierre/dev/chatbot/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)

it is somewhat frustrating to see this issue "closed" when a lot of people are being affected by this problem :(

JasonJJFS commented 6 years ago

@DevSpeak I'm using Hapi so I don't think the issue lies here.

vjpr commented 6 years ago

@JasonJJFS @KeitIG Please check that you don't have multiple versions of @babel/core (npm ls @babel/core).

Next uses @babel/core@7.0.0-beta.42 and your deps need to as well.

JasonJJFS commented 6 years ago

@vjpr

OK so ls shows:

├── @babel/core@7.0.0-beta.44 └─┬ jj-node-core@1.0.0 (git+ssh://git@github.com/jjfood/jj-node-core.git#fb83356e4e1fe4b43488ab11549877412ca61312) └── @babel/core@7.0.0-beta.40 extraneous

So I have to upgrade jj-node-core to use core@7.0.0-beta.42 and make sure the root project uses the same?

vjpr commented 6 years ago

@JasonJJFS Yep, @babel/core@7.0.0-beta.42 should be a peer dep of Next. See https://github.com/zeit/next.js/issues/3166#issuecomment-387303690.

JasonJJFS commented 6 years ago

@vjpr

I've brought those into line,

` ├── @babel/core@7.0.0-beta.42 ├─┬ jj-node-core@1.0.0 (git+ssh://git@github.com/jjfood/jj-node-core.git#bc905107578ac124b793e8f732dc1f092f7d05eb) │ └── @babel/core@7.0.0-beta.42 extraneous └─┬ next@6.0.0 └── @babel/core@7.0.0-beta.42

`

However unfortunately I still am seeing

Module build failed: Error: [BABEL] /Users/jason/WebstormProjects/route-tracker-site/pages/api/v1/track/index.js: .value is not a valid Plugin property

Any ideas?

martpie commented 6 years ago

@vjpr even by forcing exact versions, I get the same error, but I am not sure if they are using the same package:

➜  chatbot git:(master) ✗ npm ls @babel/core
chatbot@0.1.0 /Users/pierre/dev/chatbot
├── @babel/core@7.0.0-beta.42
└─┬ next@6.0.0
  └── @babel/core@7.0.0-beta.42 # <- weird, does it means there is twice the same package?

edit, to compare with before:

➜  chatbot git:(hotfix-dev) ✗ npm ls @babel/core
chatbot@0.1.0 /Users/pierre/dev/chatbot
└── @babel/core@7.0.0-beta.46
JasonJJFS commented 6 years ago

@KeitIG

Same here.

JasonJJFS commented 6 years ago

@KeitIG

Try blowing your node_modules away and reinstalling. I now have another issue but the original issues seems to have gone .......

martpie commented 6 years ago

So I forced beta42 deps, nuked node_modules and used yarn instead of npm (v6), and it's working fine again. W-T-F.

There is sth wrong with npm deps resolution.

JasonJJFS commented 6 years ago

OK @vjpr Many thanks, that was the core issue.

@KeitIG

What I've discovered:

FYI my .babelrc.js looks like this

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

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

In my case, I still get .value is not a valid Plugin property failure since my next.config.js is using the approach from the with-polyfills example. If I comment out the line that unshifts my polyfill file, the error disappears:

webpack(config, options) {
    const originalEntry = config.entry;

    config.entry = async () => {
        const entries = await originalEntry();

        if (entries['main.js']) {
            // this line appears to cause ".value is not a valid Plugin property"
            entries['main.js'].unshift('./src/polyfills.js');
        }

        return entries;
    };

    return config 
}

However, if I run the with-polyfills example by itself (through create-next-app), everything works fine. 😞

psycura commented 6 years ago

@JasonJJFS Thx, Man! now build process is ok. But stuck in another error:

Decorating class property failed. Please ensure that transform-class-properties is enabled.
Error: Decorating class property failed. Please ensure that transform-class-properties is enabled.
    at _initializerWarningHelper (D:\Sites\training\test\with-apollo-next\.next\dist\bundles\pages\signup.js:679:9)
    at new signup (D:\Sites\training\test\with-apollo-next\.next\dist\bundles\pages\signup.js:732:14)
    at processChild (D:\Sites\training\test\with-apollo-next\node_modules\react-dom\cjs\react-dom-server.node.development.js:2082:14)
    at resolve (D:\Sites\training\test\with-apollo-next\node_modules\react-dom\cjs\react-dom-server.node.development.js:2048:5)
    at ReactDOMServerRenderer.render (D:\Sites\training\test\with-apollo-next\node_modules\react-dom\cjs\react-dom-server.node.development.js:2333:22)
    at ReactDOMServerRenderer.read (D:\Sites\training\test\with-apollo-next\node_modules\react-dom\cjs\react-dom-server.node.development.js:2307:19)
    at renderToString (D:\Sites\training\test\with-apollo-next\node_modules\react-dom\cjs\react-dom-server.node.development.js:2679:25)
    at renderPage (D:\Sites\training\test\with-apollo-next\node_modules\next\dist\server\render.js:277:26)
    at Function.getInitialProps (pages/_document.js:7:0)
    at _callee$ (D:\Sites\training\test\with-apollo-next\node_modules\next\dist\lib\utils.js:111:30)
    at tryCatch (D:\Sites\training\test\with-apollo-next\node_modules\regenerator-runtime\runtime.js:62:40)
    at Generator.invoke [as _invoke] (D:\Sites\training\test\with-apollo-next\node_modules\regenerator-runtime\runtime.js:296:22)
    at Generator.prototype.(anonymous function) [as next] (D:\Sites\training\test\with-apollo-next\node_modules\regenerator-runtime\runtime.js:114:21)
    at step (D:\Sites\training\test\with-apollo-next\node_modules\next\node_modules\@babel\runtime\helpers\asyncToGenerator.js:12:30)
    at _next (D:\Sites\training\test\with-apollo-next\node_modules\next\node_modules\@babel\runtime\helpers\asyncToGenerator.js:27:9)
    at D:\Sites\training\test\with-apollo-next\node_modules\next\node_modules\@babel\runtime\helpers\asyncToGenerator.js:34:7

and my .bablrc.js:

module.exports= {
    "presets": [
        "next/babel",
        [
            "@babel/preset-stage-0",
            {
                "decoratorsLegacy": true
            }
        ]
    ],
    "plugins": [
        "transform-decorators-legacy",
        "inline-react-svg",
        [
            "transform-assets-import-to-string",
            {
                "baseDir": "static",
                "baseUri": "/"
            }
        ],
        [
            "emotion",
            {
                "inline": true
            }
        ]
    ]
};
bryan commented 6 years ago

Got past the .value error using the tips mentioned above by @JasonJJFS and @vjpr:

But now running into: Error: The default export is not a React Component in page: "/"

😓At this rate, I'll probably will wait until actual babel RC release before trying to upgrade to next 6.

Edit: Solving the default export is not a React Component in page "/", I modified the preset-env as mentioned above and everything works!:

{
  "env": {
    "development": {
      "presets": [
        ["next/babel", {"preset-env": {"modules": "commonjs"}}],
        "@babel/preset-es2017",
        "@babel/preset-stage-2",
      ],
      "plugins": [
        "@babel/plugin-proposal-class-properties",
        ["@babel/plugin-proposal-export-default-from"],
        ["inline-dotenv", {
          path: './.env'
        }],
        ["transform-inline-environment-variables", {
          "include": [
            "NODE_ENV",
            "GMAPS_API_KEY",
            "EMBED_API_KEY",
            "ALGO_PUB_API_KEY",
          ]
        }],
        ...
      ]
    },
  }
}
vjpr commented 6 years ago

@jarib What is in your src/polyfills.js?

vjpr commented 6 years ago

I have a fork that:

Npm: @vjpr/next@6.0.0-vjpr.2 Repo: https://github.com/vjpr/next.js/tree/vjpr/fix-2898-dynamic-nossr-errors

yarn

You can use yarn resolutions to use it. Not tested though.

pnpm

package.json

dependencies: {
  'next': 'npm:@vjpr/next@6.0.0-vjpr.2'
}
pnpm install
jarib commented 6 years ago

@vjpr This is src/polyfills.js:

import 'core-js/fn/array/includes';
import 'core-js/fn/array/find';
import 'core-js/fn/array/find-index';
import 'core-js/fn/array/from';
import 'core-js/fn/string/includes';
import 'core-js/fn/object/assign';
import 'core-js/fn/object/entries';
import 'core-js/fn/set';

However it still fails if I comment out the entire file. Only removing the unshift makes it work.

vjpr commented 6 years ago

@jarib That sounds like a caching issue. Try delete node_modules/.cache after every change you make to your config.

loganfsmyth commented 6 years ago

@vjpr

Is this an api issue, or is @babel/core used as a singleton to store state?

We use instanceof ConfigItem so if you create a config item from a different copy of babel, then that check will fail. If we land https://github.com/babel/babel-loader/issues/598 this should be resolved anyway, so I'll see if I can get that done soon.

JasonJJFS commented 6 years ago

@psycura

Are you using yarn? Try it with yarn. I also had the same issue.

guilhermehn commented 6 years ago

For me the solution was to install babel-loader@7. I inspected the @babel/core/lib/config/validation/plugins.js module and the value coming into L86 was very off.

ConfigItem {
  value: [Function: plugin],
  options: undefined,
  dirname: '/home/gnagatomo/workspace/frontend',
  name: undefined,
  file: undefined }
ConfigItem {
  value: [Function],
  options: undefined,
  dirname: '/home/gnagatomo/workspace/frontend',
  name: undefined,
  file: undefined }

That's when it hit me that maybe the loader was incompatible. Downgrading babel-loader to 7 was the only change needed to correct the issue for me.

I think a migration guide is strongly needed for a better user experience, because the release notes doesn't help at all when looking for breaking changes.

KillerCodeMonkey commented 6 years ago

@joaovieira did you solved this issues with ts-jest?

guilhermehn commented 6 years ago

@billnbell next@6 uses babel-loader@8 https://github.com/zeit/next.js/blob/canary/package.json#L68

joaovieira commented 6 years ago

@KillerCodeMonkey no, sorry. Didn't have much time, so I decided it was better to rollback to v5 for now. It just seems we need to force the other projects to update to a beta version of babel...? 😓 See https://github.com/kulshekhar/ts-jest/issues/495

psycura commented 6 years ago

@JasonJJFS Yes, i`m using Yarn.

jarib commented 6 years ago

@vjpr Right, my polyfill issue was simply a caching issue. The real culprit was my use of https://github.com/survivejs/webpack-merge in next.config.js. After removing it the error is gone.

JasonJJFS commented 6 years ago

@psycura it sounds like a config issue with your transform-class-properties, check the babel docs

avaneeshtripathi commented 6 years ago

I was facing the same issue, i removed all the babel dependencies and .babelrc, nuked node_modules, a fresh install and everything works fine. Next also uses babel internally, may be we don't need to provide ours.

guilhermehn commented 6 years ago

@avaneeshtripathi you don't need to install babel by yourself, next already uses it's own next/babel preset. See https://github.com/zeit/next.js/#customizing-babel-config (next/babel preset source)

ghost commented 6 years ago

I got the same issue here, but interestingly enough, after I adjusted my custom webpack configuration, it went away.

The context is this. I fresh-started a new project using Next.js 6 few days ago, for which I could see what code change introduced the problem. It's kind of weird, but I never took care of Babel versions I depend on. The issue happened only after I customized webpack configuration using next.config.js. My suspect was webpack-merge, and after manually implementing the merge, build started to work again.

I didn't inspect further, but if someone uses a kind of the library, I think just not using it might help. (webpack-merge has no Babel dependency!)

Hope someone find the exact cause of this problem.

wilsonpage commented 6 years ago

npm i babel-loader@7 --save-dev fixed it for me.

08martinm commented 6 years ago

For me, this same error resulted from an issue with yarn.

The following steps resulted in the error below:

  1. Deleting node_modules
  2. Installing dependencies with yarn or yarn install
  3. Starting my app using package.json script for node server/index.js gave me the error:
ERROR  Failed to compile with 1 errors

 error  in ./pages/_document.js

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

Replacing step 2 with npm install enabled me to start my app without any issues though.

To get yarn back in working order, I simply uninstalled and reinstalled yarn globally. Now, running yarn to install these dependencies works just fine and I don't get this error.

Hopefully that will help someone else here.

joaovieira commented 6 years ago

For the ones having issues with ts-jest, there's a PR open to fix it (https://github.com/kulshekhar/ts-jest/pull/512). Though, I've since moved to the next version of next-typescriptwhich just uses babel. This allows to switch to babel-jest instead of ts-jest which is compatible with Next 6. All happy now!

KillerCodeMonkey commented 6 years ago

@joaovieira thanks for your response. i changed my project, but the tests are failing when i am using JavaScript variables in the styles.

like

background-color: ${gray};

my test-presets:

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

Do you have any clue to solve this? Thanks :)

Paddy-Hamilton commented 6 years ago

@wilsonpage fixed it for me too, thanks.

also nuked and node_modules and reinstalled.

joaovieira commented 6 years ago

@KillerCodeMonkey Sorry, I'm using CSS modules.. but tried Styled JSX with interpolation quickly and it didn't cause any compilation error. Don't know if the output is correct though (I see a bunch of jsx-* class names in the snapshots, but don't know if the CSS value is correct). My babel test preset is like that too.

KillerCodeMonkey commented 6 years ago

@joaovieira might it possible to show me your jest.config, please?

joaovieira commented 6 years ago

sure

const TEST_REGEX = '(/__tests__/.*|\\.test)\\.tsx?$';

module.exports = {
  setupFiles: ['<rootDir>/jest.setup.js'],
  moduleFileExtensions: ['ts', 'tsx', 'js', 'json'],
  snapshotSerializers: ['enzyme-to-json/serializer'],
  testPathIgnorePatterns: ['<rootDir>/app/.next/', '<rootDir>/node_modules/'],
  testRegex: TEST_REGEX,
  transform: {
    '^.+\\.tsx?$': 'babel-jest',
  },
  moduleNameMapper: {
    '\\.(jpg|jpeg|png|gif|webp|svg)$': 'identity-obj-proxy',
    '\\.(css|scss)$': '<rootDir>/app/.jest/cssMock.js',
  },
};

where cssMock is an updated version of identity-obj-proxy for es modules - but does not affect you.

I'm on Next 6.0.2.

billnbell commented 6 years ago

Here is the example that we cannot get to work with Next 6 with npm link.

https://github.com/bkonkle/next-6-monorepo

martinestigarribiakognitiv commented 6 years ago

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