How to export and import React on another App

Question

I've two Apps App1 and App2, both of them are created using create-react-app. Where as App1 is created as a package using rollup and then npm link/npm link package name.

While importing on App2 I'm getting Attempted import error: 'App2' doesn't not contain a default export (imported as Header)

On App1 I've this in App.js

import Header from './Header'    

function App () {
return (
   <div className="App">
    <Header text='hello' />
   </div>
);
}

 export default App

I've created this App1 as a package, now How to access Header component from App2

import Header from 'App1'
function App () {
return (
  <div className="App">
   <Header text='new text' />
 </div>
 );
}
export default App

Answer 1

You need to export Header in App1 like this.

...
export { Header };
export default App;

And, in App2, you can import the Header component from App1 this way:

import { Header } from 'App1';

function App() {
  return (
    <div className="App">
      <Header text="new text" />
    </div>
  );
}

export default App;

Let me know, If the issue still persist.