node.js - 解决节点中导入的 .jsx 扩展

Question

我有一个 CRA 项目，其中添加了 SSR。这是晚餐假人，它有这样的结构：

|- App.js
|- Header
  |- Header.jsx
  |- Header.scss

App 只包含 Header，它是在没有指定扩展名的情况下导入的。

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


class App extends Component {
  render() {
    return (
      <Header />
    );
  }
}

export default App;

npm start所有运行成功。如果我编译代码并使用 node 运行它，它会因此错误而中断Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

在没有扩展名的情况下解析导入时似乎存在问题。它会找到 .scss 文件而不是 .jsx。在导入时指定扩展名或删除冲突文件（即 Header.scss）可以解决此问题。但是，我想继续使用不带扩展名的导入，就像我通常在 CRA 中所做的那样。

我不知道如何在我的设置中指定它。

我刚刚推送了这个简单的示例，因此您可以自己运行它：https ://github.com/dnaranjo89/resolve_extensions_ssr

标签： node.jsreactjsbabeljsserver-side-rendering