nx: [build-storybook]: react publishable library TypeError: (0 , jsx_dev_runtime.jsxDEV) is not a function

Current Behavior

Building for a react publishable lib using build-storybook, although it completes successfully, throws a runtime error when opening index.html from the generated output of the build.

This looks related to the new jsx transform:

Note that if I change the .babelrc to use the classic transform and if I add import React from 'react' to my lib it works fine.

Expected Behavior

It should work out of the box with the new jsx transform (nx is configured to do so by default).

Steps to Reproduce

Either go to https://github.com/rodrigofariow/myorg for the generated output from the instructions bellow or run them directly:

npx create-nx-workspace@latest --preset=react --packageManager=yarn --style=styled-components --name=myorg --appName=myapp
yarn nx g @nrwl/react:library --importPath=@shared-lib --name=shared-lib --publishable
yarn add -D @nrwl/storybook
yarn nx g @nrwl/react:storybook-configuration shared-lib
yarn nx run shared-lib:build-storybook
Open index.html file from the output

Environment

>  NX  Report complete - copy this into the issue template

  Node : 16.13.1
  OS   : darwin x64
  yarn : 1.22.17
  
  nx : 13.4.3
  @nrwl/angular : undefined
  @nrwl/cli : 13.4.3
  @nrwl/cypress : 13.4.3
  @nrwl/devkit : 13.4.3
  @nrwl/eslint-plugin-nx : 13.4.3
  @nrwl/express : undefined
  @nrwl/jest : 13.4.3
  @nrwl/linter : 13.4.3
  @nrwl/nest : undefined
  @nrwl/next : undefined
  @nrwl/node : undefined
  @nrwl/nx-cloud : undefined
  @nrwl/react : 13.4.3
  @nrwl/react-native : undefined
  @nrwl/schematics : undefined
  @nrwl/tao : 13.4.3
  @nrwl/web : 13.4.3
  @nrwl/workspace : 13.4.3
  @nrwl/storybook : 13.4.3
  @nrwl/gatsby : undefined
  typescript : 4.4.4
  rxjs : 6.6.7
  ---------------------------------------
  Community plugins:

(node:28514) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /Users/rodrigofaria/Documents/myorg/node_modules/tslib/package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)

Thanks in advance for your time!

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 11
Comments: 22 (6 by maintainers)

Commits related to this issue

fix(storybook): when building set node_env ISSUES CLOSED: #8403 — committed to mandarini/nx by mandarini 2 years ago
fix(storybook): when building set node_env (#9390) ISSUES CLOSED: #8403 — committed to nrwl/nx by mandarini 2 years ago
fix(storybook): when building set node_env (#9390) ISSUES CLOSED: #8403 — committed to nrwl/nx by mandarini 2 years ago

Most upvoted comments

@rodrigofariow Does it work when NODE_ENV is set to production ?

NODE_ENV=production yarn nx run shared-lib:build-storybook

You may add --skip-nx-cache option to ignore local cache.

+13

puku0x on Jan 6, 2022

Hye @puku0x

Yep, that works! 😄 In a way, I expected that shared-lib:build-storybook to assume production as the environment though. 🤔

I also expect more people to have the same issue as me as it wasn’t obvious what was the exact cause. Thinking about it, the jsxDEV part does indicate that the output is expecting the development version of “jsx runtime” to be there and it isn’t. But still.

Can’t nx do something about it?

Thank you very much the help and fast response! 😃

Cheers

rodrigofariow on Jan 6, 2022

I fixed it by adding NODE_ENV, eg: NODE_ENV=production yarn nx run shared-lib:build-storybook

pax-k on Jan 16, 2022

Hi all. Thank you for your feedback, I am reopening the issue. We will try to start using the Storybook dev&prod builders, eventually. Sorry that it’s taking long, and I am sorry if it’s blocking you. I hope the workarounds will unblock you temporarily until a more solid solution is in place.

mandarini on Feb 25, 2022

I’m pushing a fix, should solve this issue. Eventually, we will switch the builder, and then maybe the fix will become obsolete. But should be good for now! 😃 Should’ve done this long ago, sorry about it.

mandarini on Mar 18, 2022

Hi @rodrigofariow ! Thank you for the extensive feedback! 😃 It is in the plans to change the builder function we invoke from Storybook, to make sure users have the same experience in pure Storybook set-ups and in Nx+Storybook setups. I will close this issue, since as you said it’s an easy workaround, but I will make sure I post here once we change our actual integration!

Thank you all for jumping in with solutions! 😄

mandarini on Feb 9, 2022

I had the same issue and the setting the node env to development solved it ¯_(ツ)_/¯

NODE_ENV=development nx run my-library:build-storybook

Then npx http-server dist/storybook/my-library serves it without the jsxDEV error.

danielwanja on Jan 27, 2022

I also faced the exact issue. While the index.html worked fine with NODE_ENV=production, npx http-server dist/storybook/shared-lib still gives the same error.

roheat on Jan 6, 2022

for those who, like me, just use VS Code powershell terminal you will need to actually open a bash terminal as the powershell either doesn’t work or I don’t know what am doing (which is quite possible… I’m a digital painter and decorator after all and couldn’t give a monkeys about setting the node whatever in terminal whatever… that’s what CLI’s are for!)

click the dropdown on the + sign in the VS Code terminal and select bash

and then you can run the workaround to get it to work NODE_ENV=production nx run ui-shared:build-storybook

72gm on Mar 3, 2022