Rollup / React tsx：错误：“createRoot”未由node_modules/react-dom/client.js导出

Question

我尝试制作一个使用 rollup 构建的 React tsx wep 应用程序，但是当我尝试向我的应用程序添加自定义小部件时，出现此错误：

Error: 'createRoot' is not exported by node_modules/react-dom/client.js

当我对 dist 文件夹中的构建文件执行 npm rollup -c 时，此代码在“createRoot”行发生错误：

import * as React from "react";
import { createRoot } from 'react-dom/client';
import { ReactWidgetFactory } from "@marquito73/marquito-utils-react-lib";
import { TestReact, TestReactProps } from "../Components/TestReact/TestReact";

export default class CustomReactWidgetFactory extends ReactWidgetFactory {
    public static createTestReact(props: TestReactProps, containerId: string) {
        const _props: TestReactProps = { ...props };
        const root = createRoot(document.getElementById(containerId) as HTMLElement);
        root.render(<TestReact {..._props} />);
    }
}

这是我的网络应用程序 git 存储库，用于上下文和所有配置文件：https://github.com/marquito73/Marquito.Web.React.Template

我的 rollup.config.json ：

import typescript from '@rollup/plugin-typescript';
import resolve from "@rollup/plugin-node-resolve";
import multiInput from 'rollup-plugin-multi-input';
import replace from 'rollup-plugin-replace'
import dotenv from 'dotenv';
import json from "@rollup/plugin-json";
import postcss from "rollup-plugin-postcss";
import svgr from '@svgr/rollup';
import copy from 'rollup-plugin-copy';

dotenv.config();

const getFileName = (fileName) => {
    return `./node_modules/@marquito73/marquito-utils-react-lib/dist/files/${fileName}`;
}

export default {
    input: ["src/**/*.ts"],
    output: {
        format: "es",
        dir: "../wwwroot/dist",
        sourcemap: true,
    },
    plugins: [
        replace({
            "process.env.NODE_ENV": JSON.stringify("development"),
        }),
        resolve(),
        multiInput(),
        typescript({
            tsconfig: "./tsconfig.json"
        }),
        json(),
        postcss(),
        svgr(),
        copy({
            targets: [
                {
                    src: getFileName("marquito.svg"),
                    dest: "../wwwroot/dist/fonts/",
                },
                {
                    src: getFileName("marquito.eot"),
                    dest: "../wwwroot/dist/fonts/",
                },
                {
                    src: getFileName("marquito.ttf"),
                    dest: "../wwwroot/dist/fonts/",
                },
                {
                    src: getFileName("marquito.woff"),
                    dest: "../wwwroot/dist/fonts/",
                },
            ],
        }),
    ],
};

预先感谢您的帮助！

Answer 1

好的，我找到了这个 Github 问题的解决方案：https://github.com/JedWatson/react-select/issues/3956#issuecomment-612104302

我只是将 commonjs() 添加到我的 rollup.config.js 中，现在可以使用我的自定义组件了