错误 uncaught referenceerror is not defined 已经解决

React项目场景：

解决前：
package.json

"dependencies": {
    "@babel/runtime": "^7.13.7",
    "@types/webpack": "^4.41.26",
    "del": "4",
    "jquery": "^3.5.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "@babel/cli": "^7.13.0",
    "@babel/core": "^7.13.1",
    "@babel/plugin-proposal-object-rest-spread": "^7.13.0",
    "@babel/plugin-transform-runtime": "^7.13.7",
    "@babel/preset-env": "^7.13.5",
    "@babel/preset-react": "^7.12.13",
    "babel-loader": "^8.2.2",
    "babel-plugin-transform-runtime": "^6.23.0",
    ····

main.js

import React from 'react'  //首字母必须大写
import ReactDom from 'react-dom' //首字母必须大写
import Home from './components/Home.js'
var person1 = {
    name:'zs',
    age:20,
    gender:'男',
    address:'北京'
}
var person2 = {
    name:'ls',
    age:23,
    gender:'男',
    address:'武汉'
}
ReactDom.render(<Home {...person2}></Home>,document.getElementById('app'))

Home.js

import React from 'react';
 
function Home(props) { 
    return <div className={props.name}>
        <h1 className={props.age}>这是Home组件中的H1标签--{props.name}</h1>
    </div>
 };

export default Home;

问题描述及解决方法：

报错 uncaught referenceerror: Home is not defined 指引用出错，这里是引用语法出错，解决方法见下面main.js，import {Home} from’./components/Home.js’

也有其它问题造成，如：
a.出现这个错误，最可能的是引用的各个js的调用顺序有误，重新调整其引用顺序看看能否解决？
b.还有一个原因就是在引用js时，路径出错，不是项目中正确的文件路径。
c.还有一个原因是js中有某些值是不存在的。

解决后：

package.json

"dependencies": {
    "@babel/runtime": "^7.13.7",
    "@types/webpack": "^4.41.26",
    "del": "4",
    "jquery": "^3.5.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "@babel/cli": "^7.13.0",
    "@babel/core": "^7.13.1",
    "@babel/plugin-proposal-object-rest-spread": "^7.13.0",
    "@babel/plugin-transform-runtime": "^7.13.7",
    "@babel/preset-env": "^7.13.5",
    "@babel/preset-react": "^7.12.13",
    "babel-loader": "^8.2.2",
    "babel-plugin-transform-runtime": "^6.23.0",
    ····

main.js

import React from 'react'  //首字母必须大写
import ReactDom from 'react-dom' //首字母必须大写
import {Home}  from'./components/Home.js'  //*Home修改为{Home}
var person1 = {
    name:'zs',
    age:20,
    gender:'男',
    address:'北京'
}
var person2 = {
    name:'ls',
    age:23,
    gender:'男',
    address:'武汉'
}
ReactDom.render(<Home {...person2}></Home>,document.getElementById('app'))

Home.js

import React from 'react';

export function Home(props) { 
    return <div className={props.name}>
        <h1 className={props.age}>这是Home组件中的H1标签--{props.name}</h1>
    </div>
 };

总结

1.export命令对外接口是有名称时，import命令引入时，从模块导入的变量名与被导入模块对外接口的名称需要相同，需要使用花括号，如上纠正；
2.而export default命令对外输出的变量名时，import命令引入时，不使用花括号。
3.如果想为输入的变量重新取一个名字，import命令要使用as关键字，将输入的变量重命名，如：import Home as XX from “XXX/XXX/XX.js”。
4.export default命令用于指定模块的默认输出：一个模块只能有一个默认输出，export default命令只能使用一次。export default命令生成的使用import命令后面不加大括号，导出是唯一对应。