Home > Back-end >  Importing JSON file - should not import the named export from default-exporting module
Importing JSON file - should not import the named export from default-exporting module

Time:02-21

I have a sample JSON response from an API that is about 52,000 lines. I've saved it as TestJSONFile.json in my NextJS project.

This isn't permanent, but just a temporary measure so I can have access to a sample API response without needing to connect/implement the actual API calls at the moment.

The project is working fine and there are no crashes, but there is this warning message:

./src/components/CurrentComponent.js
Should not import the named export 'something' (imported as 'TestJSONFile') from default-exporting module (only default export is available soon)
printWarnings @ hot-dev-client.js?a8a2:88

What can I do to get rid of this warning, just to make sure there are no issues later? I'm not entirely familiar with React so I'm not sure what the best way to handle this would be.

I don't need to call JSON.parse(), since once I manually added the sample response into my project (copy/paste the entire response), the data is already interpreted as a Javascript object and not a JSON string. I tried changing the filename from .json to .js to see if I could work with it that way without the warning, but the file had errors once I changed the extension.

TestJSONFile.json looks like:

{
    "something": [
      {
        "prop1": "prop1value",
        "prop2": "prop2value",
        ...
      },
      {
        "prop1": "prop1value",
        "prop2": "prop2value",
        ...
      },
      ...
}
  

In CurrentComponent.js, I'm importing the JSON values:

import * as SampleResponse from '../tools/TestJSONFile'

And then accessing the data like this:

const data = SampleResponse.something // Already a JS object, no need to parse

And then can work with it like any other object:

for (let item of data) { const prop1 = item.prop1 }

CodePudding user response:

Currently you are importing the JSON file as below

import * as SampleResponse from '../tools/TestJSONFile'

Change it to

import SampleResponse from '../tools/TestJSONFile'

  • Related