Reactjs 元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：对象

我不熟悉同构Javascript，所以请耐心等待。我将Gulp与Babelify结合使用，预设为es2015、stage0，并在express服务器上进行响应

我的组件script.js：

var React = require('react');
var ReactDOM = require('react-dom');

export class Son extends React.Component {
  render () {
    return (
      <div>
        <h3>Bleh</h3>
        <p>
          Paragraph 1
        </p>
      </div>
    );
  }
}

if(typeof window !== 'undefined') {
  ReactDOM.render(
    <Son />,
    document.getElementById('s1')
  );
}

var React=require（'React'）；
var ReactDOM=require（'react-dom'）；
导出类Son扩展了React.Component{
渲染（）{
返回(
呜呜

第1款

);
}
}
如果（窗口类型！==“未定义”）{
ReactDOM.render(
,
document.getElementById（'s1'）
);
}

我的路线，index.js：

let React = require('react');
let ReactDOMServer = require('react-dom/server');

let express = require('express');
let router = express.Router();

import Son from '../public/javascripts/script';
// let Son = require('../public/javascripts/script').default;
console.log(Son);

/* GET home page. */
router.get('/', function(req, res, next) {
  let testString = ReactDOMServer.renderToString(<Son />);

  res.render('index', {
    title: 'Express',
    react: testString
  });
});

module.exports = router;

let React=require（'React'）；
让ReactDOMServer=require（'react-dom/server'）；
let express=要求（'express'）；
让router=express.router（）；
从“../public/javascripts/script”导入Son；
//让Son=require（'../public/javascripts/script'）。默认值；
console.log（儿子）；
/*获取主页*/
router.get（'/'，函数（req，res，next）{
让testString=ReactDOMServer.renderToString（）；
res.render（'索引'{
标题:"快车",，
react:testString
});
});
module.exports=路由器；

---

Gulp和nodemon都可以进行传输/编译。

Son

的console.log输出正在生成一个空对象：

{}

。这里的问题是模块的导出/导入；当我将类声明复制并粘贴到routes模块时，输出更改为

[Function:Son]

，应用程序按预期运行。我已经阅读了关于如何处理模块导入的其他帖子，并尝试了所有解决方案（包括

module.exports=

和

require（…）.default

）的传统es5语法），但都没有成功。无论如何，如果我能使用es6正确地确定这一概念，那将是非常好的。

您正在导出名为

Son

的命名导出，而不是将其作为默认导出

您可以更改导出：

export default class Son extends React.Component {

或更改您的导入：

import { Son } from '../public/javascripts/script';

---

您可能需要前者。

您正在导出一个名为

Son

的命名导出，而不是将其作为默认导出

您可以更改导出：

export default class Son extends React.Component {

或更改您的导入：

import { Son } from '../public/javascripts/script';

---

你可能想要前者。

好吧，问题是：Browserify把一切都搞砸了，阻止了导出/导入。我必须首先将我的组件传输到一个中间的es5版本，我既可以在另一个模块中使用该版本，也可以在前端绑定到browserify

.LRC文件：

{ "presets": ["es2015", "stage-0", "react"] }

gulpfile.js：

var gulp = require('gulp');
var babel = require("gulp-babel");
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');
var watch = require('gulp-watch');
var uglify = require('gulp-uglify');

watch(['./source/*.js'], function() {
  console.log("App has been modified; re-compiling.");
  gulp.start('default');
});

// bundles front end after react code transpiles.
gulp.task('frontEnd', ['reactStuff'], function() {
  console.log('frontend compiling.');
  return browserify('./experimental/script.js')
        .bundle()
        .pipe(source('app.js'))
        .pipe(gulp.dest('./public/javascripts/'));
});

// transpiles react component from jsx and es6 to es5.
gulp.task('reactStuff', function() {
  console.log('react compiling.');
  return gulp.src('./source/script.js')
      .pipe(babel())
      .pipe(gulp.dest('./experimental/'));
});

// transpiles routes rendering react components on the server to es5.
gulp.task('routerStuff', function() {
  console.log('routes compiling.');
  return gulp.src('./source/index.js')
      .pipe(babel())
      .pipe(gulp.dest('./routes/'));
});

// default task, loops in all other tasks.
gulp.task('default', ['reactStuff', 'routerStuff', 'frontEnd'], function () {
  console.log('done.');
});

---

好的，问题是：Browserify是什么把一切都搞砸了，阻止了进出口。我必须首先将我的组件传输到一个中间的es5版本，我既可以在另一个模块中使用该版本，也可以在前端绑定到browserify

.LRC文件：

{ "presets": ["es2015", "stage-0", "react"] }

gulpfile.js：

var gulp = require('gulp');
var babel = require("gulp-babel");
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');
var watch = require('gulp-watch');
var uglify = require('gulp-uglify');

watch(['./source/*.js'], function() {
  console.log("App has been modified; re-compiling.");
  gulp.start('default');
});

// bundles front end after react code transpiles.
gulp.task('frontEnd', ['reactStuff'], function() {
  console.log('frontend compiling.');
  return browserify('./experimental/script.js')
        .bundle()
        .pipe(source('app.js'))
        .pipe(gulp.dest('./public/javascripts/'));
});

// transpiles react component from jsx and es6 to es5.
gulp.task('reactStuff', function() {
  console.log('react compiling.');
  return gulp.src('./source/script.js')
      .pipe(babel())
      .pipe(gulp.dest('./experimental/'));
});

// transpiles routes rendering react components on the server to es5.
gulp.task('routerStuff', function() {
  console.log('routes compiling.');
  return gulp.src('./source/index.js')
      .pipe(babel())
      .pipe(gulp.dest('./routes/'));
});

// default task, loops in all other tasks.
gulp.task('default', ['reactStuff', 'routerStuff', 'frontEnd'], function () {
  console.log('done.');
});

---

我试了你的建议，但没有成功。最后，我做了一些测试，试图从同一文件夹中的测试文件中要求传输模块，以确保我的路径是正确的。我发现react组件构造函数没有跳转，即使其中的所有代码都已执行。我最终在纯es5中重写了我的组件，从该源导入了我编译的路由文件。金色的。事实证明，gulp/babel Transfile不知何故破坏了出口。我尝试了你的建议，但没有成功。最后，我做了一些测试，试图从同一文件夹中的测试文件中要求传输模块，以确保我的路径是正确的。我发现react组件构造函数没有跳转，即使其中的所有代码都已执行。我最终在纯es5中重写了我的组件，从该源导入了我编译的路由文件。金色的。事实证明，gulp/babel Transfile以某种方式破坏了出口。