0

Hello i'm trying to export multiple classes in react so they can be all rendered in one page. My group makes each handled a component and now where tying to bring it all together. Problem is that when we try to combine the classes we get errors that they have already been declared. Its all a learning process and while looking for solutions we saw that you can import the components and have them rendered but even looking through documentation we were a bit confused. 

import styles from './ViewJobsList.css';
import { Helmet } from 'react-helmet';
import { compA, compB} from './App.js';


class compA extends React.Component {...};


class compB extends React.Component {...};

export default { compA, compB};

Now each class works on its own but together when put like this we get

Parsing error: Identifier 'compA' has already been declared

How can we export these two classes and 1 more in the future?

Improve this question
3
  • Does this answer your question? Export (default) class in ReactJS Commented Apr 29, 2020 at 15:31
  • 1
    You're importing compA and compB and then declaring them in the same file Commented Apr 29, 2020 at 15:32
  • Why are you importing and exporting the compA in the same file? Commented Apr 29, 2020 at 15:32

2 Answers 2

Reset to default
0

If you take out this line:

import { compA, compB} from './App.js';

It'll work.

The reason it's not working at the moment is because you're importing and declaring the functions in the same file. You only want to declare or import - not both.

You only want to use an import statement in files where you want the functions to be pulled across from a new file. Export is used on the file where the functions are declared.

Edit: So to import and export how you want, you need to phrase it like this:

In your app.js, you need to phrase it like:

export { compA, compB };

In your index.js, you then need to:

import { compA, compB } from "./app.js"

**Note!! If your app.js is in a different folder, i.e. a components folder, you will need to add the folder route before app.js, so it would be like:

./components/app.js**

That should be all OK - assuming you have the React and appropriate dependencies imported.

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

so i removed import { compA, compB} from './App.js'; but inorder to make it run properly i had to change export default { compA, compB}; to export default compA; or B which ever one wasnt stated wouldnt run
If you remove default it should work - export default is used for the main function, so you can only declare one through it. So phrase it like: export { compA, compB }
Ah so thats why. We did run into this problem before as of right now even though we removed the default we still get an error. Attempted import error:` './App' does not contain a default export (imported as 'App').` i thought that each export has to be default also thank you for helping me so far.
No problem - default should be what you use really... It's the most efficient way of declaring imports from files, but obviously it's not always possible to do that if it gets more and more complicated. Is it working OK now or do you need anything else?
No sadly not working just yet i have export { compA, compB }; as my export statement on the bottom. but im getting the error Attempted import error: './App' does not contain a default export (imported as 'App'). in the index.js file
|
0

Try and delete line 3 in your snippet viz import { compA, compB} from './App.js';

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.