Webpack: Parse json failed with webpack4

[iqingting]

I'm submitting a bug report

Webpack Version:
4.6.0

Babel Core Version:
6.26.3

Babel Loader Version:
7.1.4

Please tell us about your environment:
OSX 10.13.4

Current behavior:

This error occurs after using babel-loader.

// index.js
import json from './index.json'

// index.json
{
  "key": "value"
}

ERROR in ./index.json
Module build failed: SyntaxError: Unexpected token, expected ; (2:7)

  1 | {
> 2 |   "key": "value"
    |        ^
  3 | }
  4 |

Expected/desired behavior:
parse json as expected.

• What is the motivation / use case for changing the behavior?

git clone git@github.com:rguanghui/webpack-demo.git
npm i
npm run build

[alexzherdev]

I believe your issue is that the /\.js/ test in webpack config doesn't have a $ at the end, so it also matches .json files.

[iqingting]

sorry for my careless

[FlaviooLima]

I know that is probably not related. But if I got here probably someone will too.
But I did get a similar error and @sakulstra solution worked 100% for me:
jestjs/jest#8426 (comment)

just a small addition for people accidentally stepping over this:

if you've been using

transform: {
    ...,
    '*.': 'babel-jest'
}
28.8 was a breaking change as it will break your json imports. You might want to e.g. restrict the transform to only transform js files.

transform: {
   ...,
    '^.+\\.(js)$': 'babel-jest'
}

[guanzo]

I believe your issue is that the /.js/ test in webpack config doesn't have a $ at the end, so it also matches .json files.

😭😭😭

Lessons learned:

1. Always define a condition for a webpack loader. If you don't, the loader will apply to EVERY file... not what you want.
2. If possible, always use ^ and $ in your regex, to restrict the scope of the selector.

The devil is in the details 😭