Importing json files result in SyntaxError: Unexpected token m in JSON at position 0

[johann-sonntagbauer]

💥 Regression Report

After upgrade of jest-runtime to 24.8.0 the json file import stopped working because the json file is not imported but transformed into following string

module.exports = "permanentComponentConfigurations.json";

As a workaround I provided a json transformation like so

package.json

    "transform": {
      ".+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
      ".+\\.css$": "<rootDir>/config/jest/cssTransform.js",
      ".+\\.json": "<rootDir>/config/jest/jsonTransform.js",
      "(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
    },

(The configuration from package.json is based on Create-React-App)

jsonTransform.js

module.exports = {
  process(src) {
    return src;
  }
};

Last working version

Worked up to version: 24.7.1

Stopped working in version: 24.8.0

To Reproduce

Import a json file in js like

import PERMANENT_CONFIGURATIONS from 'core/service/config/permanentComponentConfigurations.json';

With 24.8.0 json files are transformed as well. But the resulting json file import results to following content

module.exports = "permanentComponentConfigurations.json";

Expected behavior

The imported json file should be JSON.parsed like before with 24.7.1 per default. If someone needs custom transformation, providing a transformation file is fine, but it should not be a requirement.

Link to repl or repo (highly encouraged)

Please provide either a repl.it demo or a minimal repository on GitHub.

Issues without a reproduction link are likely to stall.

Run npx envinfo --preset jest

  System:
    OS: Windows 10
    CPU: (4) x64 Intel(R) Xeon(R) CPU E3-1226 v3 @ 3.30GHz
  Binaries:
    Node: 10.15.3 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.15.2 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD

[SimenB]

I'd guess this is from #8278, not sure though. Could you provide a reproduction repo?

[johann-sonntagbauer]

@SimenB I am currently working on the reproduction repo.

[johann-sonntagbauer]

@SimenB The problem was an issue in the yarn lockfile. Jest Runtime was listed with 24.8.0 but still 24.7.1 was installed. Therefor the default transformation was not applied.

Sorry for reporting to eagerly.

[SimenB]

no problem! glad it wasn't a bug 🙂

[sakulstra]

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'
}

[FlaviooLima]

@sakulstra After 3 hours of debugging, I must say...
You saved my day!
I'm almost in tears !!!!

[yordis]

@SimenB do I suppose to add a new transformation for JSON now? I understand why it is failing but I don't understand what I should do about it.

Retrospective on this #8278

It was definitely a breaking change, or at least as a consumer. Everything starts failing because of this.

Probably better to document with more details of the consequences of these changes in the future instead of simply being a small mention in a non-breaking change changelog.

[SimenB]

The default json transform should work fine, you just need to make sure your own transform does not hit it.

@scotthovestadt might consider reverting and landing in 25? We can add a warning if the pattern matches .json today saying that json is not supported until 25, and if the user does not want to transform json to fix the pattern?

[yordis]

@SimenB well, I would prefer to follow SemVer but we are here already.

What I will encourage you is to update the changelog with better documentation about this.

For example, adding this.

The default json transform should work fine, you just need to make sure your own transform does not hit it.

CRA will break because of this btw, https://github.com/facebook/create-react-app/blob/e831b6b1fad1f82f425f8e9af19fb460b4ec21e3/packages/react-scripts/scripts/utils/createJestConfig.js#L50

They need to ignore JSON extension as well (this was the fixed in my side)

[vish288]

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

it needs to be
transform:

{
   ...,
    '.+\\.(jsx?)$': 'babel-jest' // if you have jsx file,
    '.+\\.(js|jsx|ts|tsx)$': 'babel-jest' //depending on which ever set.
}

[tscislo]

Hi Guys!
Im using jest 24.8.0 and this is my transform config

"transform": {
"^.+\.json": "/scripts/test/transformJSON.js", -> I had to add this dummy transformer for JSONs to work, what am I doing wrong?
"^.+\.js": "babel-jest",
"^.+\.(ts|js|html)$": "ts-jest"
}

[dbanksdesign]

I am getting this issue still, I pushed what I have to a branch: https://github.com/amzn/style-dictionary/tree/updating-jest

Using Jest 24.8.0, my transform looks like:

    "transform": {
      "^.+\\.json5?$": "json5-jest",
      "^.+\\.jsx?$": "babel-jest"
    }

Travis build with tests failing:
https://travis-ci.org/amzn/style-dictionary/builds/552967613

[crunchbar]

For anyone having issues with json5, try adding the below to your package.json

{
  "jest": {
    "transform": {
      "^.+\\.json5$": "json5-jest"
    },
    "moduleFileExtensions": [
      "json5"
    ]
  }
}

[hatton]

I had this problem and it turned out to be that I had let my version of babel-jest fall behind. Updating to 26.0.1 fixed it.

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.