React app breaks when adding storybook to a react library

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~ (repo deleted)

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

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