Using create-react-app --typescript and sb init does not work out of the box #5028

kroeder · 2018-12-18T11:24:52Z

Describe the bug
Currently create-react-app storybook-react-typescript --typescript does not work together with sb init

To Reproduce
Steps to reproduce the behavior:

create-react-app storybook-react-typescript --typescript
sb init
Start storybook

Throws

ERROR in ./.storybook/config.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: [BABEL] D:\04_Development\react\storybook-react-typescript\.storybook\config.js: Cannot find module '@babel/plugin-syntax-jsx' (While processing: "D:\\04_Development\\react\\storybook-react-typescript\\node_modules\\babel-preset-react-app\\index.js$1$0")
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:580:15)
    at Function.Module._load (internal/modules/cjs/loader.js:506:25)
    at Module.require (internal/modules/cjs/loader.js:636:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at _pluginSyntaxJsx (D:\04_Development\react\storybook-react-typescript\node_modules\babel-preset-react-app\node_modules\@babel\preset-react\node_modules\@babel\plugin-transform-react-jsx\lib\index.js:19:39)
    at _default (D:\04_Development\react\storybook-react-typescript\node_modules\babel-preset-react-app\node_modules\@babel\preset-react\node_modules\@babel\plugin-transform-react-jsx\lib\index.js:128:15)
    at D:\04_Development\react\storybook-react-typescript\node_modules\@babel\helper-plugin-utils\lib\index.js:19:12
    at loadDescriptor (D:\04_Development\react\storybook-react-typescript\node_modules\@babel\core\lib\config\full.js:165:14)
    at cachedFunction (D:\04_Development\react\storybook-react-typescript\node_modules\@babel\core\lib\config\caching.js:33:19)
    at loadPluginDescriptor (D:\04_Development\react\storybook-react-typescript\node_modules\@babel\core\lib\config\full.js:200:28)
    at config.plugins.reduce (D:\04_Development\react\storybook-react-typescript\node_modules\@babel\core\lib\config\full.js:69:20)
    at Array.reduce (<anonymous>)
    at recurseDescriptors (D:\04_Development\react\storybook-react-typescript\node_modules\@babel\core\lib\config\full.js:67:38)
    at recurseDescriptors (D:\04_Development\react\storybook-react-typescript\node_modules\@babel\core\lib\config\full.js:94:27)
    at recurseDescriptors (D:\04_Development\react\storybook-react-typescript\node_modules\@babel\core\lib\config\full.js:94:27)
    at loadFullConfig (D:\04_Development\react\storybook-react-typescript\node_modules\@babel\core\lib\config\full.js:108:6)
    at process.nextTick (D:\04_Development\react\storybook-react-typescript\node_modules\@babel\core\lib\transform.js:28:33)
    at process._tickCallback (internal/process/next_tick.js:61:11)
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true main[2]

Expected behavior

Should work out-of-the-box
Should create story files with .tsx extension instead of .js

Screenshots
If applicable, add screenshots to help explain your problem.

Code snippets
If applicable, add code samples to help explain your problem.

System:

"dependencies": {
	"@types/jest": "23.3.10",
	"@types/node": "10.12.15",
	"@types/react": "16.7.17",
	"@types/react-dom": "16.0.11",
	"react": "^16.6.3",
	"react-dom": "^16.6.3",
	"react-scripts": "2.1.1",
	"typescript": "3.2.2"
},
	"devDependencies": {
	"@storybook/react": "^4.1.2",
	"@storybook/addon-actions": "^4.1.2",
	"@storybook/addon-links": "^4.1.2",
	"@storybook/addons": "^4.1.2",
	"@babel/core": "^7.2.2",
	"babel-loader": "^8.0.4"
}

Additional context
Add any other context about the problem here.

The text was updated successfully, but these errors were encountered:

shilman · 2018-12-19T15:22:27Z

This is a strange one. Have been exploring it with @tmeasday and it appears to be a yarn bug. You can get rid of the error by removing node_modules and re-installing:

rm -rf node_modules
yarn

As for generating .tsx stories, that's a new CLI feature, not a bug IMHO, so I've opened a separate issue for that #5050.

shilman · 2018-12-20T20:17:18Z

Updated workaround above. Not sure what to do about this one. @tmeasday do you have a minimal repro we can post as a yarn issue?

tmeasday · 2018-12-21T01:59:33Z

Here's the simplest reproduction I can make:

create-react-app test-app; cd test-app;
# works
yarn start

yarn add --dev @storybook/react@^4.2.0-cra-debug.0  @babel/core@^7.2.2
# fails
yarn start

rm -rf node_modules && yarn
# works
yarn start

tmeasday · 2018-12-21T02:08:16Z

It's frustrating as this is not really our fault (how can it be? we broke CRA simply by being installed into it)

For the record, the reason the issue occurs is:

In some circumstances (that seem extremely random), @babel/plugin-syntax-jsx gets installed inside the node_modules of the dependency that depends on it (@babel/plugin-transform-react-jsx), rather than at the top-level of the project.

So it seems like a bug with yarn that this happens in a non-deterministic way (clear node_modules and it will get put back at the top-level), for no clear reason.

Babel seems to assume that transitive dependencies will always be installed at the top-level so you can require them from the app's node context. This also seems like a bug TBH (can we really rely on package managers installing things like that, even when they don't have bugs?), but is perhaps well known?

igor-dv · 2018-12-29T19:13:26Z

wasn't this issue fixed?

tmeasday · 2018-12-30T01:43:31Z

It looks like CRA2.1.2 (probably unintentionally) fixed this problem. My repro above and

npx create-react-app test-app;
cd test-app
npx @storybook/cli@next init
yarn start

both seem to work fine now. @shilman I guess we can probably close this now?

kroeder · 2018-12-30T08:59:22Z

Can you try npx create-react-app test-app --typescript?

tmeasday · 2018-12-30T10:43:41Z

As above works for me with the --typescript option @kroeder

kroeder · 2018-12-30T11:40:57Z

Can confirm, it works again 👍

npm i -g create-react-app
npm i -g @storybook/cli
npx create-react-app test-app --typescript
sb init
npm run storybook

cpannwitz · 2019-03-07T07:37:31Z

I tried the new SB v5.0 today and experienced the exact same bug, except I'm not using the Typescript-CRA, just "default" CRA v2. Also I'm using Yarn v1.13.0.

What I did:

(preparation, git fetch & git pull, rm -rf node_modules & yarn)
npx -p @storybook/cli sb init -> succeeded
Run yarn storybook
Error appears: Cannot find module '@babel/plugin-syntax-jsx'

Resolved it with the workaround mentioned above:
rm -rf node_modules/ && yarn && yarn storybook

Please let me know, if I shall open a new ticket regarding this behavior.

EDIT: maybe it's a good idea to add this workaround to the docs, mentioning that sometimes clearing the node_modules is fixing dependency bugs.

kroeder added bug cli react typescript cra Prioritize create-react-app compatibility labels Dec 18, 2018

shilman added high priority has workaround labels Dec 18, 2018

shilman mentioned this issue Dec 19, 2018

Generate .tsx stories in typescript projects #5050

Closed

kroeder closed this as completed Dec 30, 2018

issue-sh bot removed the high priority label Dec 30, 2018

This was referenced Nov 15, 2022

[Snyk] Security upgrade webpack from 2.7.0 to 3.0.0 Bhanditz/storybook#101

Open

[Snyk] Security upgrade webpack from 2.7.0 to 3.0.0 Bhanditz/storybook#102

Open

azl397985856 mentioned this issue Nov 16, 2022

[Snyk] Fix for 1 vulnerabilities azl397985856/react-storybook#14

Open

This was referenced Nov 28, 2022

[Snyk] Security upgrade webpack from 2.7.0 to 3.0.0 Bhanditz/storybook#104

Open

[Snyk] Security upgrade webpack from 2.7.0 to 3.0.0 Bhanditz/storybook#105

Open

azl397985856 mentioned this issue Nov 29, 2022

[Snyk] Fix for 1 vulnerabilities azl397985856/react-storybook#15

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Using create-react-app --typescript and sb init does not work out of the box #5028

Using create-react-app --typescript and sb init does not work out of the box #5028

kroeder commented Dec 18, 2018

shilman commented Dec 19, 2018 •

edited

Loading

shilman commented Dec 20, 2018

tmeasday commented Dec 21, 2018 •

edited

Loading

tmeasday commented Dec 21, 2018 •

edited

Loading

igor-dv commented Dec 29, 2018

tmeasday commented Dec 30, 2018

kroeder commented Dec 30, 2018 •

edited

Loading

tmeasday commented Dec 30, 2018

kroeder commented Dec 30, 2018

cpannwitz commented Mar 7, 2019 •

edited

Loading

Using create-react-app --typescript and sb init does not work out of the box #5028

Using create-react-app --typescript and sb init does not work out of the box #5028

Comments

kroeder commented Dec 18, 2018

shilman commented Dec 19, 2018 • edited Loading

shilman commented Dec 20, 2018

tmeasday commented Dec 21, 2018 • edited Loading

tmeasday commented Dec 21, 2018 • edited Loading

igor-dv commented Dec 29, 2018

tmeasday commented Dec 30, 2018

kroeder commented Dec 30, 2018 • edited Loading

tmeasday commented Dec 30, 2018

kroeder commented Dec 30, 2018

cpannwitz commented Mar 7, 2019 • edited Loading

shilman commented Dec 19, 2018 •

edited

Loading

tmeasday commented Dec 21, 2018 •

edited

Loading

tmeasday commented Dec 21, 2018 •

edited

Loading

kroeder commented Dec 30, 2018 •

edited

Loading

cpannwitz commented Mar 7, 2019 •

edited

Loading