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?

OBre_1_1
  • 13
  • 2

2 Answers2

0

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

Nicolas Peron
  • 124
  • 1
  • 8
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.

Jon Nicholson
  • 927
  • 1
  • 8
  • 29
  • 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 – OBre_1_1 Apr 29 '20 at 15:42
  • 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 } – Jon Nicholson Apr 29 '20 at 15:44
  • 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. – OBre_1_1 Apr 29 '20 at 15:49
  • 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? – Jon Nicholson Apr 29 '20 at 16:00
  • 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 – OBre_1_1 Apr 29 '20 at 16:04
  • I have added an 'edit' to my answer above - hopefully should clarify. – Jon Nicholson Apr 29 '20 at 16:12