- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我收到这个错误:
bundle.js:26912 Uncaught Error: Element 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.
目录结构...
.
├── components
│ ├── index.js
│ ├── NavBar.js
│ └── SignIn.js
├── css
│ └── style.css
├── index.html
└── main.js
这是我的代码:main.js
var React = require('react');
var ReactDOM = require('react-dom');
var Router = require('react-router').Router;
var Route = require('react-router').Route;
var Navbar = require("./components/NavBar").default;
var SidePanel = require("./components/index").default;
var App = React.createClass({
render : function() {
return (
<div className="Main">
<Navbar/>
<div className="container">
<SidePanel />
<div className="row">
</div>
</div>
</div>
)
}
});
ReactDOM.render(
<Router>
<Route path="/" components={App}/>
</Router>,
document.getElementById('app'));
我的gulpfile.js
"use strict";
var gulp = require('gulp');
var connect = require('gulp-connect'); //Runs a local dev server
var open = require('gulp-open'); //Open a URL in a web browser
var browserify = require('browserify'); // Bundles JS
var reactify = require('reactify'); // Transforms React JSX to JS
var source = require('vinyl-source-stream'); // Use conventional text streams with Gulp
var concat = require('gulp-concat'); //Concatenates files
// var lint = require('gulp-eslint'); //Lint JS files, including JSX
var babelify = require('babelify'); // support for es6
var config = {
port: 9005,
devBaseUrl: 'http://localhost',
paths: {
html: './src/*.html',
js: './src/**/*.js',
images: './src/images/*',
css: [
'node_modules/bootstrap/dist/css/bootstrap.min.css',
'node_modules/bootstrap/dist/css/bootstrap-theme.min.css',
'./src/css/*.css'
],
dist: './dist',
mainJs: './src/main.js'
}
}
//Start a local development server
gulp.task('connect', function() {
connect.server({
root: ['dist'],
port: config.port,
base: config.devBaseUrl,
livereload: true
});
});
gulp.task('open', ['connect'], function() {
gulp.src('dist/index.html')
.pipe(open('', { url: config.devBaseUrl + ':' + config.port + '/'}));
});
gulp.task('html', function() {
gulp.src(config.paths.html)
.pipe(gulp.dest(config.paths.dist))
.pipe(connect.reload());
});
gulp.task('js', function() {
browserify(config.paths.mainJs)
//.transform(babelify)
.transform(reactify)
.bundle()
.on('error', console.error.bind(console))
.pipe(source('bundle.js'))
.pipe(gulp.dest(config.paths.dist + '/scripts'))
.pipe(connect.reload());
});
gulp.task('css', function() {
gulp.src(config.paths.css)
.pipe(concat('bundle.css'))
.pipe(gulp.dest(config.paths.dist + '/css'));
});
// Migrates images to dist folder
// Note that I could even optimize my images here
gulp.task('images', function () {
gulp.src(config.paths.images)
.pipe(gulp.dest(config.paths.dist + '/images'))
.pipe(connect.reload());
//publish favicon
gulp.src('./src/favicon.ico')
.pipe(gulp.dest(config.paths.dist));
});
// gulp.task('lint', function() {
// return gulp.src(config.paths.js)
// .pipe(lint({config: 'eslint.config.json'}))
// .pipe(lint.format());
// });
gulp.task('watch', function() {
gulp.watch(config.paths.html, ['html']);
gulp.watch(config.paths.js, ['js']);
});
gulp.task('default', ['html', 'js', 'css', 'images', 'open', 'watch']);
NavBar.js
var React = require('react');
var Navbar = React.createClass({
render: function() {
return (
<div>
<nav className="navbar navbar-default">
<div className="container-fluid">
<ul className="nav navbar-nav">
<li><a href="/">Home</a></li>
<li><a href="/#authors">Authors</a></li>
<li><a href="/#about">About</a></li>
</ul>
</div>
</nav>
</div>
);
}
});
module.exports = Navbar;
index.js
var React = require("react");
var SignInForm = require("./SignIn");
var SidePanel = React.createClass({
render: function() {
return (
<div className="side-panel">
<div className="col-md-4">
<SignInForm />
</div>
</div>
)
}
});
module.exports = SidePanel;
使用 ES5 语法
最佳答案
你在 Route
中编写了 components
而不是 component
..
关于javascript - ReactJS + Gulp + Reactify + Browserify 元素类型无效 : expected a string but got: undefined,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41716912/
就目前而言,这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
我是脚本新手。如何编写 Expect 脚本以通过 ssh 连接到设备并提示用户输入密码?我们使用 pin + RSA token 代码作为密码,因此我无法存储密码。 #!/usr/bin/expect
我编写了以下代码并尝试执行它。但我在执行 do {”时遇到“无效的命令名称“do”” 代码: #!/usr/bin/expect set val 0; set input 5; do { pu
我已经查看了 Expect 联机帮助页并用 Google 搜索了它,但我还没有找到 expect 的 -r 是什么。我看到这个选项以前是这样用的 expect -r "\r\n\r\n" 在 expe
我的 shebang 看起来像这样: #!/usr/bin/expect -d 当我从命令行运行脚本时,它会提供我想要的内容。 但是,我通过 crontab 运行这个脚本。是否可以将调试开关保持打开状
我是 Expect 脚本的新手。 我在 Linux 机器上为 ssh 编写了一个 Expect 脚本,在那里我在 ssh 到不同的 Linux 机器时遇到了问题。下面我复制了脚本。 !/usr/loc
Scene 1, Layer 'script', Frame 1, Line 9 1084: Syntax error: expecting identifier before this. Sc
我正在运行调试命令以将命令的输出记录到文件中。我尝试了 log_file 命令,但它没有记录输出。我的代码如下: log_file -a gdb.txt send "~/debugulator.sh
我希望 expect_user 有一个无限的(或非常大的)超时和 expect 的默认超时。有没有办法设置不同的超时?或者我是否只需要在每次更改用途之前手动执行此操作? 最佳答案 expect 和ex
我正在学习 iOS 编程(我来自 Android),我正在寻找更容易获取字符串的方法。有了这个建议,我定义了下一个宏并在一些代码片段中使用它: #define STRING_BASE @"InfoPl
你好我是 rspec 的新手,我想弄清楚将 block 传递给 expect{} 和只使用 expect() 之间的区别 这是一个简单的例子 require "rails_helper" RSpec.
我正在尝试为 React JS 运行单元测试 - 使用 jest/enzyme。 目前测试失败。不太清楚为什么,也许我没有正确调用 expect(wrapper.find)。这是我测试的一部分: F
例如,现在我有一个“root.exp”期望脚本如下: spawn ssh user@ip expect "Password:" send "password" 然后,我要发送到这个ssh服务器的exp
您好,我是 Expect 脚本编写的新手,我一直在尝试使用以下方法将 IP 地址获取到变量中: set timeout -1 spawn $env(SHELL) match_max 100000 se
expect.anything() 不适用于 expect.toBe(),但适用于 expect.toEqual() test("this will pass", () => { expect("
我有一个如下所示的简单脚本,从命令行读取 2 个数字并将它们加在一起: $cat runexp.sh #!/bin/bash echo "read 1st number" read n1 echo "
当 Linux 机器的 $IP 登录后询问密码时,下面的 expect 脚本工作正常 但在某些情况下,某些Linux机器不需要ssh密码(我们可以不用密码登录), 所以我需要更改我的期望脚本以支持没有
我正在尝试使用 expect 远程登录服务器并更改用户密码。该应用程序要求,如果您要更改的密码包含特殊字符,则将其引用。问题是,还需要引用 expect send 语句,当我尝试将两者结合起来时,脚本
下面这个简单的 expect 脚本的目标是获取远程机器上的 hostname 名称 有时期望脚本无法执行到 $IP_ADDRESS 的 ssh(因为远程机器不活动等) 所以在这种情况下,expect
我试图创建一个宏来替换, first: Some(first.as_ref().parse::().expect("Could not parse 'first'")) 我在其他模块(如 Clap w
我是一名优秀的程序员,十分优秀!