Next.js: SyntaxError: /.babelrc: Error while parsing JSON

[HashCode55]

Hi!

I tried to run NextSimpleStarter but got this syntax error -

{ SyntaxError: /.babelrc: Error while parsing JSON - Unexpected EOF at line 1 column 2 of the JSON5 data. Still to read: ""
    at error (/Users/mehulahuja/Desktop/freeways-web-2/node_modules/json5/lib/json5.js:56:25)
    at word (/Users/mehulahuja/Desktop/freeways-web-2/node_modules/json5/lib/json5.js:393:13)
    at value (/Users/mehulahuja/Desktop/freeways-web-2/node_modules/json5/lib/json5.js:493:56)
    at Object.parse (/Users/mehulahuja/Desktop/freeways-web-2/node_modules/json5/lib/json5.js:508:18)
    at ConfigChainBuilder.addConfig (/Users/mehulahuja/Desktop/freeways-web-2/node_modules/babel-core/lib/transformation/file/options/build-config-chain.js:150:65)
    at ConfigChainBuilder.findConfigs (/Users/mehulahuja/Desktop/freeways-web-2/node_modules/babel-core/lib/transformation/file/options/build-config-chain.js:96:16)
    at buildConfigChain (/Users/mehulahuja/Desktop/freeways-web-2/node_modules/babel-core/lib/transformation/file/options/build-config-chain.js:61:13)
    at findBabelConfig (/Users/mehulahuja/Desktop/freeways-web-2/node_modules/next/dist/server/build/babel/find-config.js:25:53)
    at _callee2$ (/Users/mehulahuja/Desktop/freeways-web-2/node_modules/next/dist/server/build/webpack.js:369:60)
    at tryCatch (/Users/mehulahuja/Desktop/freeways-web-2/node_modules/regenerator-runtime/runtime.js:65:40)
    at GeneratorFunctionPrototype.invoke [as _invoke] (/Users/mehulahuja/Desktop/freeways-web-2/node_modules/regenerator-runtime/runtime.js:303:22)
    at GeneratorFunctionPrototype.prototype.(anonymous function) [as next] (/Users/mehulahuja/Desktop/freeways-web-2/node_modules/regenerator-runtime/runtime.js:117:21)
    at step (/Users/mehulahuja/Desktop/freeways-web-2/node_modules/babel-runtime/helpers/asyncToGenerator.js:17:30)
    at /Users/mehulahuja/Desktop/freeways-web-2/node_modules/babel-runtime/helpers/asyncToGenerator.js:35:14
    at Promise.F (/Users/mehulahuja/Desktop/freeways-web-2/node_modules/babel-runtime/node_modules/core-js/library/modules/_export.js:35:28)
    at /Users/mehulahuja/Desktop/freeways-web-2/node_modules/babel-runtime/helpers/asyncToGenerator.js:14:12
    at createCompiler (/Users/mehulahuja/Desktop/freeways-web-2/node_modules/next/dist/server/build/webpack.js:546:17)
    at HotReloader._callee2$ (/Users/mehulahuja/Desktop/freeways-web-2/node_modules/next/dist/server/hot-reloader.js:224:69)
    at tryCatch (/Users/mehulahuja/Desktop/freeways-web-2/node_modules/regenerator-runtime/runtime.js:65:40)
    at GeneratorFunctionPrototype.invoke [as _invoke] (/Users/mehulahuja/Desktop/freeways-web-2/node_modules/regenerator-runtime/runtime.js:303:22)
    at GeneratorFunctionPrototype.prototype.(anonymous function) [as next] (/Users/mehulahuja/Desktop/freeways-web-2/node_modules/regenerator-runtime/runtime.js:117:21)
    at step (/Users/mehulahuja/Desktop/freeways-web-2/node_modules/babel-runtime/helpers/asyncToGenerator.js:17:30)
    at /Users/mehulahuja/Desktop/freeways-web-2/node_modules/babel-runtime/helpers/asyncToGenerator.js:35:14
    at Promise.F (/Users/mehulahuja/Desktop/freeways-web-2/node_modules/babel-runtime/node_modules/core-js/library/modules/_export.js:35:28)
    at HotReloader.<anonymous> (/Users/mehulahuja/Desktop/freeways-web-2/node_modules/babel-runtime/helpers/asyncToGenerator.js:14:12)
    at HotReloader.start (/Users/mehulahuja/Desktop/freeways-web-2/node_modules/next/dist/server/hot-reloader.js:253:22)
    at Server._callee$ (/Users/mehulahuja/Desktop/freeways-web-2/node_modules/next/dist/server/index.js:157:41)
    at tryCatch (/Users/mehulahuja/Desktop/freeways-web-2/node_modules/regenerator-runtime/runtime.js:65:40)
  message: '/.babelrc: Error while parsing JSON - Unexpected EOF at line 1 column 2 of the JSON5 data. Still to read: ""',
  at: 1,
  lineNumber: 1,
  columnNumber: 2 }

I also globally installed next but I'm getting the same error. I followed the same steps on my mint vm and it worked fine.

My host system is OSX (running Sierra)
Node version - 6.10.0

[impronunciable]

Is there any .babelrc file in your project?

[HashCode55]

@impronunciable Nopes, there is no .babelrc in my root or any directory. I tried running the main project, tried NextSimpleStarter to confirm it's not because of my code. Just to be sure, I globally installed next and typed next in CLI. It threw the same error.

[impronunciable]

@HashCode55 just installed NextSimpleStart and worked as expected, you sure there is no babelrc involved?

[HashCode55]

Yeah, I have no babelrc at the root. In fact, as I said it's not a NextSimpleStarter issue. When I do

npm install -g next

and run

next

It still throws the above error.

I and my friend have been trying to debug it since yesterday but no leads.

[sergiodxa]

@HashCode55 can you create a repo to try to replicate this? also check if a parent folder of your root app folder have a .babelrc.

[HashCode55]

@sergiodxa Okay so these are the exact steps I followed with traceback (for running NextSimpleStarter)

Cloning:

TheShiningVortex:Desktop mehulahuja$ git clone https://github.com/ooade/NextSimpleStarter.git
Cloning into 'NextSimpleStarter'...
remote: Counting objects: 263, done.
remote: Compressing objects: 100% (16/16), done.
remote: Total 263 (delta 7), reused 15 (delta 4), pack-reused 243
Receiving objects: 100% (263/263), 241.20 KiB | 29.00 KiB/s, done.
Resolving deltas: 100% (123/123), done.

Installing dependencies:

TheShiningVortex:Desktop mehulahuja$ cd NextSimpleStarter/
TheShiningVortex:NextSimpleStarter mehulahuja$ npm install 

> [email protected] install /Users/mehulahuja/Desktop/NextSimpleStarter/node_modules/fsevents
> node install

[fsevents] Success: "/Users/mehulahuja/Desktop/NextSimpleStarter/node_modules/fsevents/lib/binding/Release/node-v48-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile
npm notice created a lockfile as package-lock.json. You should commit this file.
added 669 packages in 44.24s

Running the dev server:

TheShiningVortex:NextSimpleStarter mehulahuja$ npm run dev 

> [email protected] dev /Users/mehulahuja/Desktop/NextSimpleStarter
> node server

(node:1061) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 2): SyntaxError: /.babelrc: Error while parsing JSON - Unexpected EOF at line 1 column 2 of the JSON5 data. Still to read: ""

The error is not printed as I have not catched the exception, if I do it'll throw the above error

[sergiodxa]

I just tried your same flow and I can't replicate the bug, you _must_ have .babelrc file in a parent directory. I also don't get that warning about an unhandled promise rejection.

[HashCode55]

@sergiodxa How can there be a babelrc present if I just cloned and cd'd into the root to run?

[sergiodxa]

It's not in you app folder, it's inside a parent folder. Imagine this:

You have your app cloned inside ~/projects/NextSimpleStarter but you have ~/projects/.babelrc. Then Next.js detects a .babelrc file in a parent folder (~/projects it's the parent of ~/projects/NextSimpleStarter) and try to use that .babelrc file.

Check for that, that's most probably why you are getting that error. Also try cloning the that repo into another path.

[HashCode55]

@sergiodxa Here:

I created another folder in home named test and inside it I cloned.

[sergiodxa]

Your .babelrc file it's hidden using ls, use ls -a, you have a node_modules in ~/ you probably have one ./babelrc. I'm 100% sure that's the error because I saw more people having this same problem before because of a random .babelrc in a parent folder.

[sergiodxa]

Also check if you have one in /, the error said /.babelrc 🤔

[HashCode55]

@sergiodxa WOW! I'm such an idiot. There was this .babelrc lying at the root of filesystem. Rekt.

Really sorry for wasting your time and a big thanks!

[sergiodxa]

@HashCode55 don't worry :)

[moonshineBoy]

@impronunciable @sergiodxa when I npm run build I get this issue, do you mean when npm run build there shouldn't be .babelrc in the project root?

[mikebutak]

I'm getting the same error as @HashCode55 . What is the solution to dealing with the phantom .babelrc file @sergiodxa, @HashCode55 ? I see that I have the dreaded .babelrc in my directory. Do I delete it?? Thank you!

[mikebutak]

I tried the following fix click here but it gives new errors when I try to run Jest:

Test suite failed to run

    Couldn't find preset "react-native" relative to directory

I don't have any react packages in this project. I will eventually build a front end but for the time being I'm just building an API. here's my packages.json:

{
  "name": "fuel-economy-api",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "jest --watchAll",
    "server-dev": "nodemon --inspect server/server.js",
    "build": "./node_modules/.bin/webpack",
    "build:prod": "./node_modules/.bin/webpack -p",
    "watch": "./node_modules/.bin/webpack --watch"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/mikebutak/Fuel-Economy-API.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/mikebutak/Fuel-Economy-API/issues"
  },
  "homepage": "https://github.com/mikebutak/Fuel-Economy-API#readme",
  "dependencies": {
    "body-parser": "^1.18.3",
    "express": "^4.16.3",
    "knex": "^0.14.6",
    "mysql": "^2.15.0"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "jest": "^22.4.4",
    "nodemon": "^1.17.4",
    "superagent": "^3.8.3",
    "supertest": "^3.1.0",
    "webpack": "^4.8.3",
    "webpack-cli": "^2.1.3",
    "webpack-dev-server": "^3.1.4"
  }
}

Here's my .babelrc:

{
  "env": {
    "test": {
      "presets": ["react-native"],
      "plugins": ["transform-es2015-modules-commonjs"]
    }
  }
}

Here's my test code, (ULTRA BASIC):

describe('Test the root path', () => {
    test('It should response the GET method', (done) => {
        request(app).get('/').then((response) => {
            expect(response.statusCode).toBe(200);
            done();
        });
    });
});

Any clues guys? THANK YOU.