错误：在构建可发布的 react:lib 时，node_modules/react/jsx-runtime.js 未导出“jsxs”

问题描述

当前行为 我创建了一个带有可发布反应库 (ui-public) 的示例 nx.dev 反应应用程序。当我尝试构建可发布的反应库时，它会引发以下错误

构建失败的仓库：https://github.com/nitesr/trynxdev

nx 运行 ui-public:build 捆绑ui-public... 使用 sourcemap 报告错误时出错：无法解析错误的原始位置。 捆绑期间出错：错误：'jsxs' 未由 node_modules/react/jsx-runtime.js 导出 捆绑失败：ui-public

预期行为

• ui-public 构建应该在适当的包中成功 dist/libs/ui-public 文件夹

重现步骤

npx create-nx-workspace reactapp --style=scss --linter=eslint
  --packageManager=yarn --nx-cloud=false --cli=nx

#

yarn nx generate @nrwl/react:library ui-shared yarn nx generate
   @nrwl/react:library ui-public --publishable --importPath
   @reactapp/sample

#在 ui-public.tsx 中有几个嵌套的 div，所以 babel 转换利用 jsxs 变量来转换 TSX/JSX 文件。纱线

yarn build ui-public

故障日志

nx run ui-public:build
Bundling ui-public...
Error when using sourcemap for reporting an error: Can't resolve original location of error.
Error during bundle: Error: 'jsxs' is not exported by node_modules/react/jsx-runtime.js
Bundle Failed: ui-public
Error when using sourcemap for reporting an error: Can't resolve original location of error.
Error during bundle: Error: 'jsxs' is not exported by node_modules/react/jsx-runtime.js
Bundle Failed: ui-public
error Command Failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

环境

Node : 12.13.1
OS : darwin x64
yarn : 1.19.1
@nrwl/angular : Not Found
@nrwl/cli : 12.0.1
@nrwl/cypress : 12.0.1
@nrwl/devkit : 12.0.1
@nrwl/eslint-plugin-nx : 12.0.1
@nrwl/express : Not Found
@nrwl/jest : 12.0.1
@nrwl/linter : 12.0.1
@nrwl/nest : Not Found
@nrwl/next : Not Found
@nrwl/node : Not Found
@nrwl/react : 12.0.1
@nrwl/schematics : Not Found
@nrwl/tao : 12.0.1
@nrwl/web : 12.0.1
@nrwl/workspace : 12.0.1
@nrwl/storybook : 12.0.1
@nrwl/gatsby : Not Found
typescript : 4.1.5

修复

当我更新下面的代码以包含“jsxs”时，这个问题得到了解决。如何覆盖我的项目工作区中的 rollupOptions？

文件：reactapp/node_modules/@nrwl/web/src/builders/package/package.impl.js 功能：createRollupOptions

commonjs({
namedExports: {
// This is needed because react/jsx-runtime exports jsx on the module export.
// Without this mapping the transformed import import {jsx as _jsx} from 'react/jsx-runtime' will fail.
'react/jsx-runtime': ['jsx','jsxs'],},})

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）