How to resolve react export error for JSON in react js?-CodePudding

I'm conditionally rendering components based on JSON. But I'm getting this error "Should not import the named export 'main' (imported as 'main') from default-exporting module (only default export is available soon)"

My mappingJson.js works fine (no errors) and the file looks like this (simplified for debugging).

import React, { Component } from "react";
import Plyr from "plyr-react";
require("../mediaData.json");

class mappingJson extends Component {
  render() {
    if (this.props.data) {
      var surgeryData = this.props.data.surgeryMedia;
    }

    return (
      <div>
        {surgeryData.map((data) => (
          
            
                  <div >
                    {data.type === "img" ? (
                      <img height="140" src={data.media} alt="candidatePic" />
                    ) : data.type === "audio" ? (
                      <div>
                        {data.txt}
                        <Plyr
                          source={{
                            type: data.type,
                            sources: [
                              {
                                src: data.media,
                              },
                            ],
                          }}
                        />
                      </div>
                    ) : data.type === "video" ? (
                      <div>
                        {data.txt}
                        <Plyr
                          source={{
                            type: data.type,
                            sources: [
                              {
                                src: data.media,
                                provider: "youtube",
                              },
                            ],
                          }}
                        />
                      </div>
                    ) : (
                      <div>{data.txt}</div>
                    )}
                  </div>
                
        ))}
      </div>
    );
  }
}

export default mappingJson;

That component is then passed to my ExplorePage.js with the JSON file to do the mapping. It looks like this. The error I'm getting is on line 4. The error is "Should not import the named export 'main' (imported as 'main') from default-exporting module (only default export is available soon)"

import React, { Component, useLayoutEffect } from "react";
import styles from "./index.module.css";
import Explore from "../Explore/index"
import {main} from "../mediaData.json" (Line that throws error)!!

class ExplorePage extends Component {
  render() {
    return (
      <div>
        <Explore data={main}></Explore>
      </div>
    );
  }
}

export default ExplorePage;

Any assistance would be appreciated. Thanks in advance.

Note: Removing the brackets around {main} gets rid of the error but then the data doesn't get exported and the explorePage is blank

CodePudding user response：

try importing your data like this:

import mediaData from "../mediaData.json"

then you should be able to access your data by deconstructing:

const { main } = mediaData; //keep the rest of the code the same

data={mediaData.main} //if you don't want to deconstruct

The reason you are getting an error is because it is trying to find a default export for "media" in your json file.