Question

我正在学习React JS的教程，一切都很好，几天我可以运行一个例子，简单，执行推荐的基本配置，再加上一些我添加的附加组件来识别Javascript版本

经过几天不再审查项目，但它运行正常，执行命令时，我没有看到任何错误，但它没有在浏览器中显示任何内容，只有多个错误出现在此控制台中之一。

我已经卸载并重新安装了reac和react-dom，问题仍然存在，尝试从朋友那里克隆它的新项目，它正常工作，它只复制了我的相同结构。

问题

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

您的某个React组件中出现上述错误：请考虑向树中添加错误边界以自定义错误处理行为。

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

的package.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;

app.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>
        )       
    }
}

导出默认App;

index.jsx

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

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

的index.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

> prueba@1.0.0 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

Answer 1

在app.jsx中，组件的导出方式如下：

export default App;

但它是这样导入的：

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

代码失败，因为App导出不存在于app.jsx中，并且出现undefined，如错误所示。它被导出为default。

这是导入它的正确方法：

// The recommended way
import App from './components/app.jsx';

// The alternative way, to better illustrate what's going on
import { default as App } from './components/app.jsx';

以下是ES模块的概述：http://exploringjs.com/es6/ch_modules.html

警告：React.createElement：type无效 - bundle.js

问题

的package.json

webpack.config.js

app.jsx

index.jsx

的index.html

控制台

1 个答案: