Question

我已经使用CRA设置了一个React应用，然后使用了我应该执行一些SSR的Express（生成器）服务器。

我当前的文件夹就是这样：

app/
  public/
  src/ (React application source files)
  server/ (Express)
    .babelrc
    src/ (Source files for Express server)
      bin/
        www
      middleware/
        serverRenderer.js
      ...
      app.js

我安装了以下Babel软件包：

"@babel/cli": "^7.2.0",
"@babel/core": "^7.2.2",
"@babel/node": "^7.2.2",
"@babel/preset-env": "^7.2.0",
"@babel/register": "^7.0.0",
"babel-preset-react-app-babel-7": "^4.0.2-0"

我使用以下命令运行Express服务器：

"server:dev": "NODE_ENV=development PORT=3001 nodemon ./server/src/bin/www --exec babel-node"

我的自定义中间件serverRenderer.js具有以下代码：

import React from 'react'
import ReactDOMServer from 'react-dom/server'
import App from '../../../src/App';

module.exports = function(req, res, next){
    console.log("Middleware to render React app...!")
    next();
}

文件www（位于bin /内部）的开头为：

require('ignore-styles');
require('@babel/register');

启动Express服务器时，正在调用我的中间件，并且立即出现此错误，指向我的JSX代码。 App.js: Unexpected token

这是怎么回事？我不知道为什么这不起作用，我想念什么？

谢谢

更新

提供更多信息。

App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

export default App;

Babel为什么不转译我的React应用程序导入？

0 个答案: