草庐IT

javascript - 警告 : React. createElement : type is invalid -- bundle. js

coder 2025-03-21 原文

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

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

reac和react-dom卸载重装,问题依旧,尝试从 friend clone一个新项目,正常,只是复制了我的相同结构。

问题

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

The above error occurred in one of your React components: Consider adding an error boundary to your tree to customize error handling behavior.

需要注意的是,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;

应用程序.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>
        )       
    }
}

导出默认应用;

索引.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

最佳答案

在 app.jsx 中,组件是这样导出的:

export default App;

但是它是这样导入的:

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

代码失败是因为 app.jsx 中不存在 App 导出,并且出现了 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

关于javascript - 警告 : React. createElement : type is invalid -- bundle. js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48738761/

有关javascript - 警告 : React. createElement : type is invalid -- bundle. js的更多相关文章

  1. ruby - 在院子里用@param 标签警告 - 2

    我试图使用yard记录一些Ruby代码,尽管我所做的正是所描述的here或here#@param[Integer]thenumberoftrials(>=0)#@param[Float]successprobabilityineachtrialdefinitialize(n,p)#initialize...end虽然我仍然得到这个奇怪的错误@paramtaghasunknownparametername:the@paramtaghasunknownparametername:success然后生成的html看起来很奇怪。我称yard为:$yarddoc-mmarkdown我做错了什么?

  2. ruby-on-rails - active_admin 目录中的常量警告重新声明 - 2

    我正在使用active_admin,我在Rails3应用程序的应用程序中有一个目录管理,其中包含模型和页面的声明。时不时地我也有一个类,当那个类有一个常量时,就像这样:classFooBAR="bar"end然后,我在每个必须在我的Rails应用程序中重新加载一些代码的请求中收到此警告:/Users/pupeno/helloworld/app/admin/billing.rb:12:warning:alreadyinitializedconstantBAR知道发生了什么以及如何避免这些警告吗? 最佳答案 在纯Ruby中:classA

  3. ruby-on-rails - 新 Rails 项目 : 'bundle install' can't install rails in gemfile - 2

    我已经像这样安装了一个新的Rails项目:$railsnewsite它执行并到达:bundleinstall但是当它似乎尝试安装依赖项时我得到了这个错误Gem::Ext::BuildError:ERROR:Failedtobuildgemnativeextension./System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/rubyextconf.rbcheckingforlibkern/OSAtomic.h...yescreatingMakefilemake"DESTDIR="cleanmake"DESTDIR="

  4. ruby-on-rails - 启动 Rails 服务器时 ImageMagick 的警告 - 2

    最近,当我启动我的Rails服务器时,我收到了一长串警告。虽然它不影响我的应用程序,但我想知道如何解决这些警告。我的估计是imagemagick以某种方式被调用了两次?当我在警告前后检查我的git日志时。我想知道如何解决这个问题。-bcrypt-ruby(3.1.2)-better_errors(1.0.1)+bcrypt(3.1.7)+bcrypt-ruby(3.1.5)-bcrypt(>=3.1.3)+better_errors(1.1.0)bcrypt和imagemagick有关系吗?/Users/rbchris/.rbenv/versions/2.0.0-p247/lib/ru

  5. ruby-on-rails - 我更新了 ruby​​ gems,现在到处都收到解析树错误和弃用警告! - 2

    简而言之错误:NOTE:Gem::SourceIndex#add_specisdeprecated,useSpecification.add_spec.Itwillberemovedonorafter2011-11-01.Gem::SourceIndex#add_speccalledfrom/opt/local/lib/ruby/site_ruby/1.8/rubygems/source_index.rb:91./opt/local/lib/ruby/gems/1.8/gems/rails-2.3.8/lib/rails/gem_dependency.rb:275:in`==':und

  6. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法? - 2

    我遇到了一个非常奇怪的问题,我很难解决。在我看来,我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时,我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性,其中包括href和data-method。再次单击此链接后,我的服务器收到了对新href的请求,但使用的是旧的data-method,即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是,如果我刷新页面,HTML与"new"HTML相同(随返回的JS发生变化),但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  7. ruby-on-rails - 不兼容的库版本 : nokogiri. bundle 需要 8.0.0 或更高版本,但 libiconv.2.dylib 提供 7.0.0 版本 - 2

    为了在我的mac上为一个rails项目安装mysql,我遵循了安装Homebrew软件和删除mac端口的在线建议。这是问题开始的地方。rails项目不会构建,我得到这个:[rake--prereqs]rakeaborted!dlopen(/Users/Parker/.rvm/gems/ruby-1.9.3-p448/gems/nokogiri-1.6.0/lib/nokogiri/nokogiri.bundle,9):Librarynotloaded:/opt/local/lib/libiconv.2.dylibReferencedfrom:/Users/Parker/.rvm/gem

  8. ruby-on-rails - Ruby 长时间运行的进程对队列事件使用react - 2

    我有一个将某些事件写入队列的Rails3应用。现在我想在服务器上创建一个服务,每x秒轮询一次队列,并按计划执行其他任务。除了创建ruby​​脚本并通过cron作业运行它之外,还有其他稳定的替代方案吗? 最佳答案 尽管启动基于Rails的持久任务是一种选择,但您可能希望查看更有序的系统,例如delayed_job或Starling管理您的工作量。我建议不要在cron中运行某些东西,因为启动整个Rails堆栈的开销可能很大。每隔几秒运行一次它是不切实际的,因为Rails上的启动时间通常为5-15秒,具体取决于您的硬件。不过,每天这样做几

  9. ruby-on-rails - Assets 管道损坏 : Not compiling on the fly css and js files - 2

    我开始了一个新的Rails3.2.5项目,Assets管道不再工作了。CSS和Javascript文件不再编译。这是尝试生成Assets时日志的输出:StartedGET"/assets/application.css?body=1"for127.0.0.1at2012-06-1623:59:11-0700Servedasset/application.css-200OK(0ms)[2012-06-1623:59:11]ERRORNoMethodError:undefinedmethod`each'fornil:NilClass/Users/greg/.rbenv/versions/1

  10. ruby-on-rails - Rails - 理解 application.js 和 application.css - 2

    rails新手。只是想了解\assests目录中的这两个文件。例如,application.js文件有如下行://=requirejquery//=requirejquery_ujs//=require_tree.我理解require_tree。只是将所有JS文件添加到当前目录中。根据上下文,我可以看出requirejquery添加了jQuery库。但是它从哪里得到这些jQuery库呢?我没有在我的Assets文件夹中看到任何jquery.js文件——或者直接在我的整个应用程序中没有看到任何jquery.js文件?同样,我正在按照一些说明安装TwitterBootstrap(http:

随机推荐