Attempted import error: 'App' is not exported from './App'

Question

I'm working on a currency converter app, I got the code from code pen (https://codepen.io/jmean/pen/Oxmgxp). I'm trying to run this code and I get this error: ./src/index.js Attempted import error: 'App' is not exported from './App'.

I've tried adding export default App(); on index.js and also on App.js file but its not working.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import {App} from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

I expected the code to compile and display on the browser like it does on code pen.

Answer 1

If it's a default export, you don't need to put the import in curly braces.

import App from './App';

is what you should write.

Answer 2

There are two ways to structure the import/export pair.

Default:

App.js

export default class App { ... }

index.js

import App from './App';

Named:

App.js

export class App { ... }

index.js

import { App } from './App';

Answer 3

I had an error importing react on App component, it was a fool problem i was importing in a bad way the react core.

this compiled but had that error

import {ComponentName} from "./ComponentName"

this worked:

import ComponentName from './ComponentName'

it was strange, but hope helps!

Answer 4

There are two ways to export,

Named Export

With named exports, one can have multiple named exports per file. Then import the specific exports they want surrounded in braces. The name of imported module has to be the same as the name of the exported module.

// imports
import { MyComponent } from "./MyComponent";

// exports from ./MyComponent.js file
export const MyComponent = () => {}

Default Export

One can have only one default export per file. When we import we have to specify a name and import like:

// import
import MyDefaultComponent from "./MyDefaultExport";

// export
const MyComponent = () => {}
export default MyComponent;

Note: The naming of import is completely independent in default export and we can use any name we like.

Answer 5

What for me worked is to specify whole file name:

import { App } from './App.js';

or

import { App } from './App.jsx';

If you have in the end export default, then you don't put {} on import App from './App.js'; If you don't have it then you put {}.