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

Question

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

Repo 构建失败的位置：

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'],
},
})

Answer 1

我最终不得不将

react/jsx-runtime

 添加到 rollup.config.js 中的 

external

// rollup.config.js
import commonjs from 'rollup-plugin-commonjs';
import external from 'rollup-plugin-peer-deps-external';
import resolve from 'rollup-plugin-node-resolve';
import typescript from 'rollup-plugin-typescript2';

export default [
  {
    input: 'src/Icons/index.ts',
    output: [
      {
        file: 'src/Icons/dist/index.js',
        format: 'cjs',
        exports: 'named',
        sourcemap: true,
      },
      {
        file: 'src/Icons/dist/index.es.js',
        format: 'es',
        exports: 'named',
        sourcemap: true,
      },
    ],
    external: [ 'react', 'react-is', 'react-router', 'react/jsx-runtime' ],
    plugins: [
      external(),
      resolve(),
      typescript({
        rollupCommonJSResolveHack: true,
        exclude: ['**/__tests__/**', '**/*.stories.*'],
        clean: true,
      }),
      commonjs({
        include: /node_modules/,
        namedExports: {
          'node_modules/react-js/index.js': ['isValidElementType'],
        },
      }),
    ],
  },
];

Answer 2

我正在

monorepo 工作，问题是 vite.config

 文件中未列出依赖项：

import { defineConfig } from 'vite'

export default defineConfig({
  ...
  optimizeDeps: {
    include: [
      '@nameOfMyPackage', // <== this line was mandatory for me
      'package2'
    ],
  },
})