Keystone-classic: Babel 7 error. Sign in page

[marcellino-ornelas]

Expected behavior

I am trying to access the keystone admin signin

Actual/Current behavior

Keeps showing me this error. I am using babel 7
GET /keystone/signin 200 6.941 ms 2018-12-27 16:12:47 error building Signin/index.js: Requires Babel "^7.0.0-0", but was loaded with "6.26.0". If you are sure you have a compatible version of @babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn't mention "@babel/core" or "babel-core" to see what is calling Babel. while parsing file: /Users/marcelinoornelas/Desktop/development/marcellino-ornelas/node_modules/object-assign/index.js
This fails because npm install installs babel-core and webpack uses that instead of @babel/core

once you take out babel-core from the node module directory. it gives you this stack trace

GET /keystone/signin 200 10.914 ms Error: Cannot find module 'babel-core' at Function.Module._resolveFilename (internal/modules/cjs/loader.js:571:15) at Function.Module._load (internal/modules/cjs/loader.js:497:25) at Module.require (internal/modules/cjs/loader.js:626:17) at require (internal/modules/cjs/helpers.js:20:18) at Object.<anonymous> (/Users/marcelinoornelas/Desktop/development/marcellino-ornelas/node_modules/babelify/index.js:3:14) at Module._compile (internal/modules/cjs/loader.js:678:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:689:10) at Module.load (internal/modules/cjs/loader.js:589:32) at tryModuleLoad (internal/modules/cjs/loader.js:528:12) at Function.Module._load (internal/modules/cjs/loader.js:520:3) at Module.require (internal/modules/cjs/loader.js:626:17) at require (internal/modules/cjs/helpers.js:20:18) at build (/Users/marcelinoornelas/Desktop/development/marcellino-ornelas/node_modules/keystone/admin/server/middleware/browserify.js:76:18) at ReadFileContext.<anonymous> (/Users/marcelinoornelas/Desktop/development/marcellino-ornelas/node_modules/keystone/admin/server/middleware/browserify.js:140:5) at ReadFileContext.callback (/Users/marcelinoornelas/Desktop/development/marcellino-ornelas/node_modules/graceful-fs/graceful-fs.js:78:16) at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:334:13)
seems like one of your modules babelify thats used in your middleware
keystone/admin/server/middleware/browserify.js:140:5
is still using babel-core. this is breaking babel 7 and causing that error.

Steps to reproduce the actual/current behavior

npm install
node keystone.js

| Software | Version
| ---------------- | -------
| Keystone | 4.0.0
| Node.js | v10.1.0

[stennie]

I am using babel 7

@marcellino-ornelas Did you change this dependency in your package.json? Keystone 4.0.0 requires Babel 6 and there are currently no plans to update to Babel 7 (see discussion on PR#4802).

Regards,
Stennie

[epubreader]

I also has this problem, when I upgrade to babel 7 on front-end, any solution?

[epubreader]

I think it is better use webpack than browserify, it is very strange to use browserify on production environment. and why no one commit any code in one months？

[EuroWhisper]

Hey guys, I just ran into this problem myself with the KeystoneJS admin panel not loading because of problems with clashing Babel versions. I needed Babel v7.x for bundling my React code in the same project as KeystoneJS which (as previously stated) requires Babel v6.x. To solve this, I deleted the .babelrc file, then in webpack added the presets to the options object on my .jsx rule like so:
rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env', '@babel/preset-react'] } }, },

This seems to have resulted in KeystoneJS using the v6 version of Babel that it requires and Webpack using the v7 version of Babel that it requires in order to bundle the React code. Worth noting is that Webpack seems to prioritize using the presets within .babelrc over the presets you specify within your Webpack config. Hence, you have to either not have a .babelrc file or at least remove the presets object from it.

Hopefully this helps other people like me who stumble on this post in their Google searches for problems caused by clashing Babel versions.

[Way2nnadi]

@EuroWhisper Thank you for this solution

[jesperjohansson]

I had this problem when trying to use .babelrc and browserslist with NextJS and KeystoneJS. I got it working again using this .babelrc:
{ "presets": [ [ "next/babel", { "preset-env": { "useBuiltIns": "entry" } } ] ] }

[efernandesng]

I had the same problem when I create a keystone project on other project directory that uses babel 7. To solve I only create a .babelrc with the content {} on keystone project root.