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

Created by: 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 :)