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.com/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.com/en/docs/cli/run for documentation about this command.
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
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'],
},
})
I ended up having to add
react/jsx-runtime
toexternal
in the rollup.config.js