CRA 2 dynamic JSON import has different behavior in test and browser

[samuelsantia]

Is this a bug report?

Yes, I think so

Did you try recovering your dependencies?

Yes, I tested in a fresh project

Which terms did you search for in User Guide?

Running tests,
search for json

Environment

System:
OS: macOS High Sierra 10.13.6
CPU: x64 Intel(R) Xeon(R) CPU E5-1620 v2 @ 3.70GHz
Binaries:
Node: 10.7.0 - /usr/local/bin/node
Yarn: 1.10.1 - /usr/local/bin/yarn
npm: 6.1.0 - /usr/local/bin/npm
Browsers:
Chrome: 69.0.3497.100
Firefox: 62.0
Safari: 12.0
npmPackages:
react: ^16.5.2 => 16.5.2
react-dom: ^16.5.2 => 16.5.2
react-scripts: 2.0.4 => 2.0.4
npmGlobalPackages:
create-react-app: Not Found

Steps to Reproduce

(Write your steps here:)

1. yarn create create-react-app test
2. cd test
3. Create data.json and loader utility to dynamic import it

// data.json
[
  { "id": "test1", "message": "hello" },
  { "id": "test2", "message": "world" }
]

// loader.js
export default async function loader() {
  const data = await import('./data.json')
  console.log(data)
  return data
}

// index.js
import loader from './loader'

loader()

4. Create a test for loader

// loader.spec.js
import loader from './loader'

describe('loader', () => {
  it('should import json in default key', async () => {
    const actual = await loader()

    expect(actual).toHaveProperty('default')
  })
})

5. Run yarn start
6. Run yarn test

Expected Behavior

The dynamic imported json is the same

Actual Behavior

the console log in browser outputs the esm module with default property

Module {default: Array(2), __esModule: true, Symbol(Symbol.toStringTag): "Module"}

the console log in test outputs the plain js converted array

[ { id: 'test1', message: 'hello' },
{ id: 'test2', message: 'world' } ]

Reproducible Demo

https://github.com/samuelsantia/create-react-app-dynamic-json-issue

I have tried in codesandbox but it not loads the json as module

Thanks for all :)

[miraage]

I guess it works as expected.
In browser you get a result from the import() function, while in tests you get a transformed value (AFAIK both default export and wildcard import are handled by babel plugin)

[samuelsantia]

The problem here is that in test environment you have different approach that in browser.

I mean if you use the dynamic import function to access to json data you should to do anything like:

const data = await import('./data.json').then(m => m.default)

In the browser you obtain the transformed json data through default module key but in test you get undefined because the import is directly transformed and is not exposed inside the default key of ESM module like webpack 4.

I tried to eject and create a jsonTransform for jest but I saw that jest don't allow to transform json files. facebook/jest#2578

I think that both environment should have the same behavior to simplify the tests.

[Timer]

I believe this was fixed? Can you check please?

[samuelsantia]

Yes, now is working as expected :)

Thanks again!