React Profile App

JavaScript
1

hello I am tyrying to refractor some of my links to some of my components into a single import statement. So I made a seperate index.js in my components folder , but now I am getting a error:

./src/App.jsAttempted import error: 'BikeCarousel' is not exported from './components/index'.

Below is snippets of code from relevant files:

From App.js:

import ‘./index.css’;

import ‘./styles.scss’;

import meImg from ‘./Profile-Pics/IMG_20220223_163516978.jpg’;

import Niagra from ‘./Profile-Pics/Niagra.jpg’;

import Bay from ‘./Profile-Pics/Bay.jpg’;

// import NavBar from ‘./components/navBar’;

// import text from ‘./components/text’;

// import BikeCarousel from ‘./components/BikeCarousel’;

// import TxtMap from ‘./components/TxtMap’;

// import BikeTrips from ‘./components/BikeTrips’;

// import ProjectGrid from ‘./components/ProjectGrid’;

// import CertificateGrid from ‘./components/CertificateGrid’;

import {

NavBar,

text,

BikeCarousel,

TxtMap,

BikeTrips,

ProjectGrid,

CertificateGrid,

}
…

From /components/index.js:

import NavBar from ‘./navBar’;

import text from ‘./text’;

import BikeCarousel from ‘./BikeCarousel’;

import TxtMap from ‘./TxtMap’;

import BikeTrips from ‘./BikeTrips’;

import ProjectGrid from ‘./ProjectGrid’;

import CertificateGrid from ‘./CertificateGrid’;

export default {

NavBar,

text,

BikeCarousel,

TxtMap,

BikeTrips,

ProjectGrid,

CertificateGrid,

};

From /components/BikeCarousel .js:

import moustache from ‘…/Profile-Pics/moustache.jpg’;

import giant from ‘…/Profile-Pics/giant.jpg’;

const BikeCarousel = () => {

return (

    <div

        ...

    </div>

);

};

export default BikeCarousel;

2

Try to use this to export from /components/index.js, for all the component you want to export.

export { default as BikeCarousel } from ‘./BikeCarousel’;
export { default as BikeTrips } from ‘./BikeTrips’;
// ...and so on
4

That did the trick :D. Is there ways to do that in a single line . I tried to do it as you can see but it didnt work.

5

I’m not sure about that, but you can read more from this answer.

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.