NX monorepo React library storybook does not start

Viewed 23

I am unable to start the storybook within the NX monorepo React library. Steps to reproduce:

npx create-nx-workspace@latest


Workspace name (e.g., org name)     monorepo
What to create in the new workspace react
Application name                    webpage
Default stylesheet format           emotion

Adding the library

npx nx g @nrwl/react:lib ui

npm i storybook -D

nx g @nrwl/react:storybook-configuration ui
nx g @nrwl/react:stories ui

When lounching the storybook

nx run ui:storybook

Then the error is shown in the console

>  NX   Ran target storybook for project ui (21s)

    ×    1/1 failed
    √    0/1 succeeded [0 read from cache]


me@DESKTOP /c/PROJECTS/monorepo (main)
$
 *  History restored 


me@DESKTOP /c/PROJECTS/monorepo (main)
$ nx run ui:storybook

> nx run ui:storybook

info @storybook/react v6.5.12
info 
info => Loading presets
info Addon-docs: using MDX1
=> Loading Nrwl React Storybook preset from "@nrwl/react/plugins/storybook"
info => Using default Webpack5 setup
<i> [webpack-dev-middleware] wait until bundle finished

info => Using cached manager
DeprecationWarning: 'createIdentifier' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: '' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createLiteral' has been deprecated since v4.0.0. Use `factory.createStringLiteral`, `factory.createStringLiteralFromNode`, `factory.createNumericLiteral`, `factory.createBigIntLiteral`, `factory.createTrue`, `factory.createFalse`, or the factory supplied by your transformation context instead.
DeprecationWarning: 'createBinaryExpression' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createExpressionStatement' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createPropertyAssignment' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createObjectLiteralExpression' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createExpressionStatement' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createTypeOfExpression' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createElementAccessExpression' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createIfStatement' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createBlock' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createVariableDeclaration' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createCatchClause' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createTryStatement' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
webpack built preview e0808375c477c2f0ab52 in 7409ms
ModuleNotFoundError: Module not found: Error: Can't resolve '../_isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.esm.js' in '\PROJECTS\monorepo\node_modules\@emotion\react\dist/'
    at C:\PROJECTS\monorepo\node_modules\webpack\lib\Compilation.js:2016:28
    at C:\PROJECTS\monorepo\node_modules\webpack\lib\NormalModuleFactory.js:798:13
    at eval (eval at create (C:\PROJECTS\monorepo\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:10:1)
    at C:\PROJECTS\monorepo\node_modules\webpack\lib\NormalModuleFactory.js:270:22
    at eval (eval at create (C:\PROJECTS\monorepo\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:9:1)
    at C:\PROJECTS\monorepo\node_modules\webpack\lib\NormalModuleFactory.js:434:22
    at C:\PROJECTS\monorepo\node_modules\webpack\lib\NormalModuleFactory.js:116:11
    at C:\PROJECTS\monorepo\node_modules\webpack\lib\NormalModuleFactory.js:670:25
    at C:\PROJECTS\monorepo\node_modules\webpack\lib\NormalModuleFactory.js:855:8
    at C:\PROJECTS\monorepo\node_modules\webpack\lib\NormalModuleFactory.js:975:5
resolve '../_isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.esm.js' in '\PROJECTS\monorepo\node_modules\@emotion\react\dist/'
  using description file: \PROJECTS\monorepo\node_modules\@emotion\react/package.json (relative path: ./dist/)
    No description file found in _isolated-hnrs/dist or above
    no extension
      _isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.esm.js doesn't exist
    .mjs
      _isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.esm.js.mjs doesn't exist
    .js
      _isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.esm.js.js doesn't exist
    .jsx
      _isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.esm.js.jsx doesn't exist
    .ts
      _isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.esm.js.ts doesn't exist
    .tsx
      _isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.esm.js.tsx doesn't exist
    .json
      _isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.esm.js.json doesn't exist
    .cjs
      _isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.esm.js.cjs doesn't exist
    as directory
      _isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.esm.js doesn't exist
ModuleNotFoundError: Module not found: Error: Can't resolve '../_isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.esm.js' in '\PROJECTS\monorepo\node_modules\@emotion\react\dist'
    at C:\PROJECTS\monorepo\node_modules\webpack\lib\Compilation.js:2016:28
    at C:\PROJECTS\monorepo\node_modules\webpack\lib\NormalModuleFactory.js:798:13
    at eval (eval at create (C:\PROJECTS\monorepo\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:10:1)
    at C:\PROJECTS\monorepo\node_modules\webpack\lib\NormalModuleFactory.js:270:22
    at eval (eval at create (C:\PROJECTS\monorepo\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:9:1)
    at C:\PROJECTS\monorepo\node_modules\webpack\lib\NormalModuleFactory.js:434:22
    at C:\PROJECTS\monorepo\node_modules\webpack\lib\NormalModuleFactory.js:116:11
    at C:\PROJECTS\monorepo\node_modules\webpack\lib\NormalModuleFactory.js:670:25
    at C:\PROJECTS\monorepo\node_modules\webpack\lib\NormalModuleFactory.js:855:8
    at C:\PROJECTS\monorepo\node_modules\webpack\lib\NormalModuleFactory.js:975:5
resolve '../_isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.esm.js' in '\PROJECTS\monorepo\node_modules\@emotion\react\dist'
  using description file: \PROJECTS\monorepo\node_modules\@emotion\react/package.json (relative path: ./dist)
    No description file found in _isolated-hnrs/dist or above
    no extension
      _isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.esm.js doesn't exist
    .mjs
      _isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.esm.js.mjs doesn't exist
    .js
      _isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.esm.js.js doesn't exist
    .jsx
      _isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.esm.js.jsx doesn't exist
    .ts
      _isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.esm.js.ts doesn't exist
    .tsx
      _isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.esm.js.tsx doesn't exist
    .json
      _isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.esm.js.json doesn't exist
    .cjs
      _isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.esm.js.cjs doesn't exist
    as directory
      _isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.esm.js doesn't exist

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

info => Loading presets
webpack built preview d4a65430d8d609d587bc in 291ms

 ———————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

 >  NX   Ran target storybook for project ui (12s)

    ×    1/1 failed
    √    0/1 succeeded [0 read from cache]

0 Answers
Related