Question

我们谈论的是一个React项目，甚至可能都没有关系，但我以防万一。

我正在使用导出默认值导出React SSR项目组件，例如：

import React from 'react';

export default class TestComponent extends React.PureComponent {

    render() {
        return (
            <div className="footer">
                My Footer
            </div>
        );
    }

}

在服务器端，一切正常。

tsconfig.json的模块设置为commonjs。

我正在尝试在客户端上导入相同的模块，但到目前为止我还没有成功。

我尝试了require，systemjs和commonjs。

require并且systemjs表示未定义导出。

未捕获的ReferenceError：未定义导出在testComponent.js：5

即这行：

Object.defineProperty（exports，“ __esModule”，{value：true}）;

这是已编译的testComponent.js：

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
class TestComponent extends react_1.default.PureComponent {
    render() {
        return (react_1.default.createElement("div", { className: "footer" }, "My Footer"));
    }
}
exports.default = TestComponent;

当我尝试嵌入common.js时，我什至在尝试导入任何内容之前收到一条错误消息，指出未找到元素。我唯一的猜测是我应该进行完整安装，而不是仅嵌入common.js。

我的目标是在客户端按需动态加载组件，我没有在寻找任何预定义的代码拆分解决方案。话虽如此，我什至不确定我是否应该使用commonjs。

React SSR-使用“默认导出”导出的浏览器加载模块

0 个答案: