Nx: React app breaks when adding storybook to a react library

[iamandrewluca]

Current Behavior

React app won't start, @svgr/webpack throws errors, that can't parse svg. See failure logs

Expected Behavior

App starts as normal

Steps to Reproduce

# create a new workspace with org name `myorg`, chose `react` app, and `scss` styles
yarn create nx-workspace

# generate a react library
yarn nx g @nrwl/react:lib react-lib

# here the default react app start normal, no errors
yarn start --open

# install storybook package
yarn add --dev @nrwl/storybook
# generate storybook config for react-lib
yarn nx g @nrwl/react:storybook-configuration react-lib

# here the default react app start with errors
yarn start --open

Bellow repo has 2 commits. First one adds react app and lib, everything works ok
Second one adds storybook, app starts with errors
https://github.com/iamandrewluca/nx-demo-broken-app-with-storybook

Failure Logs

aluca@acula:~/Temp/myorg|master ⇒  yarn start --open
yarn run v1.22.4
$ nx serve --open

> nx run react-app:serve --open 
**
Web Development Server is listening at http://localhost:4200/
**
Starting type checking service...
Using 10 workers with 2048MB memory limit
ℹ ｢wds｣: Project is running at http://localhost:4200/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: 404s will fallback to //index.html
ℹ ｢wdm｣: wait until bundle finished: /
Type checking in progress...
Hash: fa59a7db89e8a46c2f7c
Built at: 06/30/2020 9:48:12 PM
Entrypoint main = runtime.js runtime.js.map vendor.js vendor.js.map main.js main.js.map
Entrypoint polyfills = runtime.js runtime.js.map polyfills.js polyfills.js.map
Entrypoint styles = runtime.js runtime.js.map styles.js styles.js.map
chunk {main} main.js, main.js.map (main) 350 KiB ={runtime}= ={vendor}= [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 567 KiB ={runtime}= [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 0 bytes ={main}= ={polyfills}= ={styles}= ={vendor}= [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 336 KiB ={runtime}= [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 942 KiB ={main}= ={runtime}= [initial] [rendered] split chunk (cache group: vendor) (name: vendor)

ERROR in ./app/logo.svg
Module build failed (from /home/aluca/Temp/myorg/node_modules/@svgr/webpack/lib/index.js):
TypeError: Cannot read property 'tagName' of null
    at parse (/home/aluca/Temp/myorg/node_modules/svg-parser/dist/svg-parser.umd.js:279:15)
    at jsxPlugin (/home/aluca/Temp/myorg/node_modules/@svgr/plugin-jsx/lib/index.js:20:41)
    at run (/home/aluca/Temp/myorg/node_modules/@svgr/core/lib/convert.js:18:16)
    at convert (/home/aluca/Temp/myorg/node_modules/@svgr/core/lib/convert.js:26:10)

ERROR in ./app/star.svg
Module build failed (from /home/aluca/Temp/myorg/node_modules/@svgr/webpack/lib/index.js):
TypeError: Cannot read property 'tagName' of null
    at parse (/home/aluca/Temp/myorg/node_modules/svg-parser/dist/svg-parser.umd.js:279:15)
    at jsxPlugin (/home/aluca/Temp/myorg/node_modules/@svgr/plugin-jsx/lib/index.js:20:41)
    at run (/home/aluca/Temp/myorg/node_modules/@svgr/core/lib/convert.js:18:16)
    at convert (/home/aluca/Temp/myorg/node_modules/@svgr/core/lib/convert.js:26:10)
ℹ ｢wdm｣: Failed to compile.
No type errors found
Version: typescript 3.8.3
Time: 2902ms

Environment

node v10.21.0
yarn 1.22.4
npm 6.14.5
os Ubuntu 18.04.4 lTS

[iamandrewluca]

The strange thing is that the react-lib and storybook has nothing to do with the react-app.

[iamandrewluca]

If I manually force url-loader then it works.

import star from '!url-loader!./star.svg';

[iamandrewluca]

This is a issue that was fixed in @svgr/webpack@5

For some reasons in my workspace I have installed @svgr/[email protected]

~As I searched through nx repository it seems that @nrwl/next has "@svgr/webpack": "^4.3.3", that is seems it keeps it at this version.~

I investigated more it seems that when I introduced storybook in my workspace, "@storybook/react": "5.3.9" was installed, and it has "@svgr/webpack": "^4.0.3" dependency with the issue.

Dependency was bumped only in @storybook/react@6 which is in beta right now.

If I do a npm install @svgr/webpack it will install last version, and the problem will be fixed as a workaround.

Between @svgr/webpack@4 and @svgr/webpack@5 is only one breaking change.

Node.js v8 is no longer supported.

What we have to do is to use above workaround, and wait when storybook will get out of beta and nx will upgrade to v6.

Related issues:

https://github.com/gregberge/svgr/issues/362
https://github.com/gregberge/svgr/issues/374

[mandarini]

Hi there @iamandrewluca ! Thank you for filing an issue!

I just reproduced your issue locally!
We are currently working on Storybook 6 support for Nx, which will solve your issue. I just tested it actually, with the repo you provided, and the new Nx Storybook 6 schematics, and the issue is solved, your app runs without a problem!

So, hopefully, when this PR if fixed and merged, you will no longer have an issue! :)

[mandarini]

Hi @iamandrewluca !

I believe your issue should be solved in the next release, fixed by PR #3611.

If you take a look at the new webpack.config.js template, we are adding svgr support out of the box now.

I will close this issue now, but let me know if your issue persists!