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

[kroeder]

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:

1. create-react-app storybook-react-typescript --typescript
2. sb init
3. 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

1. Should work out-of-the-box
2. 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.

[shilman]

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]

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]

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]

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]

wasn't this issue fixed?

[tmeasday]

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]

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

[tmeasday]

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

[kroeder]

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]

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:

1. (preparation, git fetch & git pull, rm -rf node_modules & yarn)
2. npx -p @storybook/cli sb init -> succeeded
3. Run yarn storybook
4. 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.