Question

tl; dr

我在CRA应用程序中引入了打字稿，但在尝试为内置应用程序提供服务时始终出现以下错误

 SyntaxError: path\to\root\server\loader.js: Unexpected token, expected "</>/<=/>=" (130:28)

  128 |       let routeMarkup = frontloadServerRender(() =>
  129 |         renderToString(
> 130 |           <Loadable.Capture report={m => modules.push(m)}>
      |                             ^
  131 |             <Provider store={store}>
  132 |               <StaticRouter location={req.url} context={context}>

完整故事

我有一阵子我在this tutorial之后放了一个React应用程序，用于设置SSR和代码拆分而不会弹出react-scripts。

我正在尝试将typescript添加到项目中，我希望我可以启用它并在新组件中使用它。也就是说，我不想担心将每个文件从.js更改为.tsx，然后调试将出现的所有打字稿错误。

我跟随the guide to add typescript，并将src/index.js重命名为src/index.tsx，但仍然能够使用yarn start运行我的应用。

问题是，当我尝试构建和服务该应用程序时遇到了错误，而修复第一个错误时又遇到了另一个错误。

第一个错误

我第一次尝试运行serve时遇到此错误

(node:20588) UnhandledPromiseRejectionWarning: path\to\project\src\app\routes\homepage\index.tsx:1
(function (exports, require, module, __filename, __dirname) { import React, { Component } from "react";
                                                                     ^^^^^
SyntaxError: Unexpected identifier

我认为这是一个通天的问题，因为我正在使用本教程中的服务器文件，而该服务器文件不使用打字稿。最终，我得到了这个配置，在需要server/index.js

之前，我需要在server/server.js中进行配置

require("@babel/register")({
  ignore: [/\/(build|node_modules)\//],
  presets: ["@babel/preset-env", "@babel/preset-react"],
  plugins: [
    "@babel/plugin-transform-typescript",
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-proposal-export-default-from",
    "@babel/plugin-proposal-export-namespace-from",
    "@babel/plugin-proposal-class-properties",
    "react-loadable/babel"
  ]
});

第二个错误

这似乎解决了第一个问题，但是现在我遇到了另一个我不知道的错误

 SyntaxError: path\to\root\server\loader.js: Unexpected token, expected "</>/<=/>=" (130:28)

  128 |       let routeMarkup = frontloadServerRender(() =>
  129 |         renderToString(
> 130 |           <Loadable.Capture report={m => modules.push(m)}>
      |                             ^
  131 |             <Provider store={store}>
  132 |               <StaticRouter location={req.url} context={context}>

现在的问题是，虽然正确解析了import语句，但应用程序无法识别JSX语法。

我尝试将文件从.js重命名为.jsx，但这没什么不同。都没有将文件扩展名更改为.ts或.tsx。

我还尝试将React组件移动到一个单独的文件RouteMarkup.jsx，并将其导入到加载器中，但这没有帮助。

我现在已经花了三个小时来尝试调试它，但是试图解析这种情况我很茫然。希望有人可以指出正确的方向。

编辑1

我并没有对本教程的服务器设置进行太多更改，因此，如果有人想了解我的代码的更大上下文，则可以检查sample project repo以了解服务器和加载器的设置方式。

Answer 1

在没有对项目进行全面概述的情况下，或者除非之前曾经有确切的错误消息，否则无法确切地知道此问题的出处。

可能性：避免使用CRA的<％GLOBAL VARIABLE％>语法。 Babel + Typescript仅在后端I.E上实现时才有效。您的后端实际上是通过babel编译的。

解决方案：

坦白地说，作为一个完成了1000多个小时的服务器端渲染配置工作的人，到目前为止，这是设置和管理自己最困难的事情，该示例在其文档网站上的React丝毫没有反映任何人的真实情况。世界各地的设置，其中包含CSS +代码拆分+动态加载资产+身份验证+需要从服务器中还原redux +需要在后端进行静态路由，而在前端进行动态路由。

解决方案是考虑像NextJS9这样的东西，它具有开箱即用的Typescript支持，内置的服务器（/ api / x下的每个文件都成为路由）自动进行代码拆分和服务器端渲染。（以供参考https://nextjs.org/）

如果该解决方案对您不起作用，请告诉我，我将使用打字稿+ babel +前端/后端+反应构建一个演示项目。

引入打字稿后，带有express server.js的CRA中断

1 个答案: