加载基本反应应用程序时导出错误

Question

i am learning react. but my basic sample is not working. my app.js file is like below

import React, { Component} from 'react';
import './App.css';
import { Greet } from './components/Greet';
class App extends Component {
  render() {
    return <div className="App"> 
    <Greet></Greet>
     </div>
  }
}
export default App;

my component file is like below

import React from 'react';
function Greet(){
    return <h1>Test</h1>
}

when i load my application, error said Attempted import error: 'Greet' is not exported from './components/Greet'. What is this error. how i fix ?

Answer 1

import React from 'react';

export function Greet(){
    return <h1>Test</h1>
}

Answer 2

You didn't export Greet function, so you couldn't import it in the App.tsx

import React from 'react';
export function Greet(){
  return <h1>Test</h1>
}

Answer 3

You forgot to export the Greet component.

Just add export before function Greet() :

import React from 'react';
export function Greet(){
     return <h1>Test</h1>
};