[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:

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

7.

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!

[puku0x]

@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.

[rodrigofariow]

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