ssr时候,引入组件说React is not defined?

在做服务端渲染练习的时候,直接用create-react-app生成的代码 新建一个server文件夹,里面两个文件,一个是index.js

require("babel-core/register")();
require("babel-polyfill");

require('./app.js')

一个是app.js

import { renderToString } from 'react-dom/server';
import React from 'react';
import { StaticRouter } from 'react-router-dom'
import App from '../src/App';

var Koa = require('koa')
var router = require('koa-router')();


router.get('/', async(ctx, next) => {
    ctx.body = 'hello word'
})


// 配置文件
const config = {
  port: 8081
};
var app = new Koa();

app.use(router.routes())


app.listen(config.port, function() {
  console.log('服务器启动,监听 port: ' + config.port + '  running~');
});

我主要把import App from '../src/App.js'就会报错,如下

React.createElement(
^

ReferenceError: React is not defined
    at Object.<anonymous> (/Users/chenming/my-app/src/logo.svg:1:1)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at loader (/Users/chenming/my-app/node_modules/_babel-register@6.26.0@babel-register/lib/node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/chenming/my-app/node_modules/_babel-register@6.26.0@babel-register/lib/node.js:154:7)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.<anonymous> (/Users/chenming/my-app/src/App.js:2:1)

不知道为什么,.babelrc文件如下

{
    "presets": [
        "env",
        "react"
    ]
}

文件package.json文件如下

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.8.4",
    "react-dom": "^16.8.4",
    "react-router-dom": "^5.0.0",
    "react-scripts": "2.1.8"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "server": "nodemon ./server",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "nodemon": "^1.18.10"
  }
}

最简单的一个例子,请问我的原因出在了哪里?????### 问题描述

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)

你期待的结果是什么?实际看到的错误信息又是什么?

阅读 4.7k
2 个回答

../src/App.js 里要 import React from 'react';

你 App.js 文件内有 jsx 的写法吗?

如果有的话,就必须要 import React from 'react'; 不然就会报这个错误。

有时候自己本身没有,但是引进来的模块里面有 jsx 写法,也需要 import 一下才行。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题