javascript - Error: 'jsxs' is not exported by node_modulesreactjsx-runtime.js on building publishable react:lib

admin管理员组

文章数量:1287631

Current Behavior I have created a sample nx.dev react application with a publishable react library (ui-public). When I try to build the publishable react library it throws below error

Repo where is the build is failing:

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

Expected Behavior

• ui-public build should be successful with appropriate bundles in dist/libs/ui-public folder

Steps to Reproduce

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

#<choose react as template and create 'sample' application>

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

#have couple of nested divs in the ui-public.tsx so the babel transform leverages jsxs variable to transform the TSX/JSX file. yarn

yarn build ui-public

Failure Logs

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  for documentation about this mand.

Environment

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

Fix

this issue got fixed when I updated below code to include 'jsxs'. How do I override the rollupOptions within my project workspace ?

file: reactapp/node_modules/@nrwl/web/src/builders/package/package.impl.js function: createRollupOptions

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

Current Behavior I have created a sample nx.dev react application with a publishable react library (ui-public). When I try to build the publishable react library it throws below error

Repo where is the build is failing: https://github./nitesr/trynxdev

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

Expected Behavior

• ui-public build should be successful with appropriate bundles in dist/libs/ui-public folder

Steps to Reproduce

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

#<choose react as template and create 'sample' application>

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

#have couple of nested divs in the ui-public.tsx so the babel transform leverages jsxs variable to transform the TSX/JSX file. yarn

yarn build ui-public

Failure Logs

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./en/docs/cli/run for documentation about this mand.

Environment

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

Fix

this issue got fixed when I updated below code to include 'jsxs'. How do I override the rollupOptions within my project workspace ?

file: reactapp/node_modules/@nrwl/web/src/builders/package/package.impl.js function: createRollupOptions

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

• javascript
• reactjs
• jsx
• nx.dev

Share Improve this question Follow asked Apr 13, 2021 at 3:31 nitesh cnitesh c 7911 silver badge55 bronze badges 1

• Did you solve this, if so, how? – james emanon Commented Nov 8, 2021 at 23:21

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

I ended up having to add react/jsx-runtime to external in the rollup.config.js

// rollup.config.js
import monjs from 'rollup-plugin-monjs';
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,
      }),
      monjs({
        include: /node_modules/,
        namedExports: {
          'node_modules/react-js/index.js': ['isValidElementType'],
        },
      }),
    ],
  },
];

I am working in a monorepo and the problem was that a dependency was not listed in the vite.configfile:

import { defineConfig } from 'vite'

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

本文标签：