0

The errors I was getting were:

ERROR in ./~/babel-core/package.json
Module parse failed: /Users/sigfried/Sites/git_projects/supergroup/node_modules/babel-core/package.json Line 2: Unexpected token :
You may need an appropriate loader to handle this file type.
| {
|   "_args": [
|     [
|       "babel-core@^6.4.5",
 @ ./~/babel-core/lib/api/node.js 67:15-39

ERROR in ./~/globals/globals.json
Module parse failed: /Users/sigfried/Sites/git_projects/supergroup/node_modules/globals/globals.json Line 2: Unexpected token :
You may need an appropriate loader to handle this file type.
| {
|   "builtin": {
|       "Array": false,
|       "ArrayBuffer": false,
 @ ./~/globals/index.js 1:17-42

I won't bother providing my package.json and webpack.config.js because I changed it so many times while (blindly, I admit--hence, "voodoo" in the title) following recipes from so many sources that I wouldn't know what to provide. The answer that finally got me past those errors was not on Stack Exchange, so I'm putting it here.

Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143
Sigfried
  • 2,943
  • 3
  • 31
  • 43

1 Answers1

4

I followed advice from

Webpack error with react, "You may need an appropriate loader to handle this file type" with Webpack and Babel, which probably helped me with other problems and certainly helped other people getting the same errors. The thing that finally solved it for me, though, was: https://github.com/pixijs/pixi.js/issues/1854

I hope this collection of answers saves someone else from having to look in so many places.

In response to a comment that this answer becomes useless if the links end up broken and I should include the actual answers in this answer, I will do that. However, I recommend you skip this part and just use the links above if they still work because they contain complete examples of webpack.config.js and package.js and might alert you to problems with your own. (Alternatively, someone who understands webpack better than I do could give another answer that offers real explanation. I'll be happy to delete my answer and pick that one.)

The answer provided in the first link is just:

the loaders option should be nested in a module object.

The second link above gave this answer:

You need to install the es2015 preset:

npm install babel-preset-es2015
and then configure babel-loader:

{
    test: /\.jsx?$/,
    loader: 'babel-loader',
    exclude: /node_modules/,
    query: {
        presets: ['es2015']
    }
}

A less popular answer provided these links:

What finally helped me, I don't know why, was adding a json loader (and npm --save-dev i json-loader, of course.)

module: {
  loaders: [{
    test: /\.json$/,
    loader: 'json-loader'
  }]
}

As per the comments below, the fact that json-loader worked for me probably means that I was doing something else (like bundling Babel itself) wrong. I can longer replicate the problem, but json-loader is unnecessary.

Follow up: I saw the error again! It appeared when I tried require('babel-core') in one of my source files while trying to solve some other problem.

Community
  • 1
  • 1
Sigfried
  • 2,943
  • 3
  • 31
  • 43
  • If the links become unavailable (for whatever reason), this answer becomes useless. Answers you should be self contained. Please include the most relevant information those links in your answer. – Felix Kling Jan 25 '16 at 14:32
  • Thank you (sincerely) for the Stack Overflow etiquette pointer. – Sigfried Jan 25 '16 at 18:12
  • *"What finally helped me, I don't know why"* Well, the error messages say something like *"ERROR in ./~/babel-core/package.json Module parse failed: ... Line 2: Unexpected token : You may need an appropriate loader to handle this file type."*. I.e. JSON files are loaded, but a JSON file is not valid JavaScript, hence the error when it parsed as JavaScript. The json-loader converts JSON to a JavaScript object. You added *"the appropriate loader to handle this file type"*. – Felix Kling Jan 25 '16 at 19:28
  • Ok. That makes sense. But then why do I see other people's (presumably working) webpack.configs compile with babel but without the json loader? – Sigfried Jan 25 '16 at 19:34
  • There is a difference between using Babel to transform the files and actually bundling Babel itself. It seems that your code (somehow) actually has a dependency on Babel. Meaning that Babel itself will be part of the final bundle. If that is not what you want, then you either have another configuration issue or there is some dependency that uses Babel internally. As an example where Babel should be bundled: http://astexplorer.net/ is a tool which lets you compare parsers, so here I explicitly want to make Babel available in the browser and bundle it. – Felix Kling Jan 25 '16 at 19:38
  • No, I'm just trying to use babel so I can write my code with es6. So I must have some other problem. So I guess I'll go ahead and paste my webpack.config and package.json into the question itself. Thanks for the help! – Sigfried Jan 25 '16 at 19:44
  • I'd look at the result bundle file and see if you can trace back where `./~/babel-core/package.json` is included from. – Felix Kling Jan 25 '16 at 20:10
  • 1
    I'm feeling dorkier by the minute. Once I got my webpack config back into shape enough to replicate the problem, I couldn't replicate the problem. So, you're right. I had some other issue, no idea what. But I no longer have the json-loader in there and it works fine. The reason I had to reconstruct the config was that I decided not to use webpack because the thing I'm building at the moment should work fine as a plain node module, to be imported into client-side code later. – Sigfried Jan 25 '16 at 20:14
  • Krasimir: I can't replicate the issue now, but I'm fairly sure Felix was right that I was bundling Babel itself (or something) and that was causing the need for json-loader. There should probably be a different solution than adding json-loader. – Sigfried Jan 27 '16 at 11:37
  • Krasimir: I just added an update to the answer: I'd be curious if you're requiring or importing babel stuff in your source files or just through webpack? – Sigfried Feb 01 '16 at 16:16