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

[rodrigofariow]

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! :D
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

[roheat]

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.

[pax-k]

I have the same error, but I'm using the default @nrwl/storybook:build executor for building the storybook. How can this be fixed? Cheers

{
  "root": "libs/ui-components",
  "sourceRoot": "libs/ui-components/src",
  "projectType": "library",
  "tags": [],
  "targets": {
    "build-storybook": {
      "executor": "@nrwl/storybook:build",
      "outputs": ["{options.outputPath}"],
      "options": {
        "uiFramework": "@storybook/react",
        "outputPath": "dist/storybook/ui-components",
        "config": {
          "configFolder": "libs/ui-components/.storybook"
        }
      },
      "configurations": {
        "ci": {
          "quiet": true
        }
      }
    },

[pax-k]

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

[gxxcastillo]

I've got many dependencies installed via devDependencies, and, as a result they don't get installed if NODE_ENV=production is set. Is there an option to get this working that wouldn't require a change in how we structure our dependencies?

[danielwanja]

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.

[gxxcastillo]

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

That worked! Thanks @danielwanja

[mandarini]

Hi all! Thanks for filing an issue @rodrigofariow and thank you everyone who provided solutions! :) Do you think that this is an issue related to Nx? I see that a few workarounds are suggested here, which all work. Let me know if you think that this is a bug in the Nx codebase, or if I could close this issue!

[rodrigofariow]

Hi @mandarini !

I'm not entirely sure if it is Nx related or storybook's but it definitely doesn't provide an out of the box experience for Nx users.
I only used nx generators and nothing custom so in a way I expected stuff to just work and it doesn't. 😆

It's a pretty easy workaround so I think it depends on what the Nx team wants to allow.

I'm fine with closing the issue and letting it be useful for people that may have the issue in the future.

What do you think @mandarini ?

Thank you for your time.

Cheers!

[mandarini]

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! :D

[Shanery]

I think that the build should set the build mode to production. I’m trying to deploy this to netlify and if I manually set the node env to production, none of the dev dependencies get installed so it can’t run nx unless I add it as a non dev dependency.

[gxxcastillo]

it can’t run nx unless I add it as a non dev dependency.

@Shanery , did you try manually setting the NODE_ENV to development? See this comment.

[Shanery]

The

it can’t run nx unless I add it as a non dev dependency.

@Shanery , did you try manually setting the NODE_ENV to development? See this comment.

The issue is that if you run build in development you get the jsx_dev_runtime.jsxDEV error. If you run in production , the dev dependencies don’t get installed. It works if I just want to run it locally but that’s not point here. I need to deploy it.

[72gm]

This is really bad.... nx storybook and storybook should work the same...

if I want to run
nx run my-library:build-storybook
it's because I want to deploy it, so it should be building for production surely?

If I want to run it locally then I just run
nx run my-library:storybook
... which works fine

How do I incorporate "NODE_ENV=production yarn nx run shared-lib:build-storybook" into my project.json file? .... cant get this to work... does anyone have a 'fools guide' ?

Just upgrade to 13.8.3 hoping that would fix things... doesn't

[mandarini]

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.

[72gm]

I'm confused... I rebuilt my workspace so as I could start from a clean slate but I can't for the life of me get rid of this error

I'm using VS Code and I tried running the nx console extension for storybook build which is effectively
nx run ui-shared-component-library:build-storybook
this gives the jsx_dev runtime error

As advised above I tried running the command directly in the powershell window
set NODE_ENV=production; nx run ui-shared-component-library:build-storybook --skip-nx-cache
but this does nothing for me and I still get the error!?!?

If I just run the storybook ie
nx run ui-shared-component-library:storybook
it all works fine

In normal Storybook I would do a build, get my static website and deploy it to an azure web app - all worked smoothly....

Not sure what I am doing wrong? Any ideas? Am I missing a dependency or something?

[72gm]

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

[gt-vh-1985]

NODE_ENV=production

you are a life saver. this issue was haunting me for 3 days.

[mandarini]

Thank you @72gm for helping out!

[mandarini]

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.

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.