Invalid JSON import in React-CodePudding

i got this error while trying import data from JSON file in the App component below:

Uncaught TypeError: start is undefined

import './App.css';
import PreNavbar from './Components/PreNavbar';
import Navbar from "./Components/Navbar.js";
import {BrowserRouter as Router} from "react-router-dom";
import Slider from "./Components/Slider.js";
import banner from "./data/data.json";

function App( ) {
  return (
    

    <Router>

      <PreNavbar />
      <Navbar />
      <Slider start = {banner.start} />

    
    </Router>
  );
}

export default App;

Here is the Slider component:

import React from 'react';
import Carousel from 'react-bootstrap/Carousel';

const Slider = ({start}) => {
  return (
    <Carousel>

      {start.map((item, index) => (

        <Carousel.Item>
          <img className='d-block w-100' src={item}
            alt="First slide" />

      </Carousel.Item>

      ))}


    </Carousel>
  )
}

export default Slider;

If i use {} in banner export, like so:

import {banner} from "./data/data.json";

I face this other error:

ERROR in ./src/App.js
Should not import the named export 'banner'.'start' (imported as 'banner') from default-exporting module (only default export is available soon)

CodePudding user response：

Try passing a default value to your start prop on the <Slider /> component such as:

import React from 'react'
import Carousel from 'react-bootstrap/Carousel'

const Slider = ({start = []}) => { 
  return (
    <Carousel>
      {start.map((item, index) => (
         <Carousel.Item>
           <img className='d-block w-100' key={item} src={item} alt="First slide" />
         </Carousel.Item>
      ))}
    </Carousel>
) }

export default Slider;

Or you can add optional chaining like:

import React from 'react'
import Carousel from 'react-bootstrap/Carousel'

const Slider = ({start}) => { 
  return (
    <Carousel>
      {start?.map((item, index) => (
         <Carousel.Item>
           <img className='d-block w-100' key={item} src={item} alt="First slide" />
         </Carousel.Item>
      ))}
    </Carousel>
) }

export default Slider;

Or both:

import React from 'react'
import Carousel from 'react-bootstrap/Carousel'

const Slider = ({start = []}) => { 
  return (
    <Carousel>
      {start?.map((item, index) => (
         <Carousel.Item>
           <img className='d-block w-100' key={item} src={item} alt="First slide" />
         </Carousel.Item>
      ))}
    </Carousel>
) }

export default Slider;

I think the latter is the best approach to solving this issue. This may be happening because the app is still loading the JSON file data and when you are mounting the component, and since it expects the start prop to be loaded from the start, instead of being an undefined or null value, it throws an error.