Home / Questions / 137796
Accepted
Pedro Miguel Pimienta Morales
Asked: 2020-02-12 15:40:44 +0800 CST 2020-02-12 15:40:44 +0800 CST

React.createElement：类型无效

  • 772

我正在学习教程React JS，一切顺利，几天前我能够运行一个简单的示例，执行推荐的基本配置，加上我添加的一些补充以识别Javascript.

错误如下

警告：React.createElement：类型无效——需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

上述错误发生在您的一个 React 组件中：考虑在树中添加错误边界以自​​定义错误处理行为。

需要注意的是，错误出现在文件中bundle.js，该文件用于存储生成的代码webpack

react js中的多个错误

项目结构如下：

结构体

包.json

{ "name": "prueba", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "node server.js", "dev": "concurrently \"node server.js\" \"webpack -w\" " }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "express": "^4.16.2", "react": "^16.2.0", "react-dom": "^16.2.0", "serve-static": "^1.13.1" }, "devDependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "concurrently": "^3.5.1", "eslint": "^4.9.0", "eslint-config-airbnb-base": "^12.1.0", "eslint-plugin-import": "^2.7.0", "webpack": "^3.10.0" } }

webpack.config.js

const path = require('path');

const config = {
    entry: './src/index.jsx',
    output: {
        path: path.resolve('js'),
        filename: 'bundle.js'
    },

    module: {
        rules: [
            {                
                test: /.jsx$/,
                use:{
                    loader:'babel-loader'
                },
                exclude: /node_module/
            }
        ]
    }
}

module.exports = config;

应用程序.jsx

import React, {Component} from 'react';
import {render} from 'react-dom';

class App extends Component{
    render(){
        return(
            <div>                
                <h1>Mi Aplicacion React Js</h1>
                <h3>Probando la exportacion</h3>
            </div>
        )       
    }
}

export default App;

索引.jsx

import React, { Component } from 'react';
import { render } from 'react-dom';
import {App} from './components/app.jsx';

render(
    <App/>,
    document.getElementById('appStart')
)

索引.html

<!DOCTYPE html>

<html>

    <head>
        <meta charset="utf-8">
        <title>Aprendiendo React</title>
    </head>

    <body>
        <div id="appStart"></div>
        <script src="js/bundle.js"></script>
    </body>

</html>

导致控制台

C:\Users\PterPmntaM\CursoReactJS\React_Scaffold> npm run dev

> [email protected] dev C:\Users\PterPmntaM\CursoReactJS\React_Scaffold
> concurrently "node server.js" "webpack -w"

[0] Iniciando servidor
[1]
[1] Webpack is watching the files...
[1]
[1] Hash: 5fd2ce10b3c1788b385b
[1] Version: webpack 3.10.0
[1] Time: 4878ms
[1]     Asset    Size  Chunks                    Chunk Names
[1] bundle.js  729 kB       0  [emitted]  [big]  main
[1]   [14] ./src/index.jsx 381 bytes {0} [built]
[1]     + 27 hidden modules
javascript

1 Answers

  1. Best Answer

    发生错误是因为我在 中放错了路径webpack.config.js，因为它采用以下形式

    const path = require('path');

const config = {
    entry: './src/index.jsx',
    output: {
        path: path.resolve('js'),
        filename: 'bundle.js'
    },

    module: {
        rules: [
            {                
                test: /.jsx$/,
                use:{
                    loader:'babel-loader'
                },
                exclude: /node_module/
            }
        ]
    }
}

module.exports = config;

    如果观察到路径，则它是path: path.resolve('js')，因为它没有正确找到路径。因此，根据项目结构的正确方法是

    const path = require('path');

    const config = {
        entry: './src/index.jsx',
        output: {
            path: path.resolve('public/js'),
            filename: 'bundle.js'
        },

        module: {
            rules: [
                {                
                    test: /.jsx$/,
                    use:{
                        loader:'babel-loader'
                    },
                    exclude: /node_module/
                }
            ]
        }
    }

    module.exports = config;

    正确的方法path: path.resolve('public/js')

    回复

    • 1