sb init on lerna root can't load stories written in tsx or jsx

Psidium commented 2 years ago

First and foremost, thanks for such an awesome project. Also thanks for being so approachable, I wasn't going to raise any issues, but the maintainers seem really understanding and that helps, so here I am.

Describe the bug

The example stories for Page, Button and Header are not loaded when creating a new storybook with npx sb init inside a lerna monrepo with a typescirpt Create React App in the packages. The browser's console shows it is trying to load the typescript files themselves, causing parsing errors. I tried a lot of things but to no avail, even .jsx stories are broken.

I expected to see the image shown on https://storybook.js.org/docs/react/get-started/install (with Introduction, Page, Button, and Header), but instead I only have the Introduction (in mdx):

click to see the chromium logs trying to load the `tsx` files

``` index.js:49 Unexpected error while loading ./Button.stories.tsx: Error: Module parse failed: Unexpected token (23:2) File was processed with these loaders: * ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js * ./node_modules/@storybook/source-loader/dist/cjs/index.js You may need an additional loader to handle the result of these loaders. | backgroundColor: { control: 'color' }, | }, > } as ComponentMeta; | | const Template: ComponentStory = (args) =>

To Reproduce

I was not able to reproduce the issue with npx sb@next repro, maybe because this issue has to do with lerna/monorepo and it creates a vanilla CRA app.

Nevertheless, you can find a repository with the resulting storybook at https://github.com/Psidium/storybook-init-script-typescript--bug, just clone and yarn install.

I generated the repository with the following commands:

# this is an excerpt of my `history -1 -30`
mkdir repro-storybook-bug
cd repro-storybook-bug
lerna init
cd packages
npx create-react-app new-app --template typescript
cd new-app/
yarn install
yarn start # useless
cd ..
npx sb init
yarn add -W -D typescript
npx sb init # useless, having issue with detection
npx sb init --type typescript # useless...
npx sb init --type react_scripts 
yarn storybook # did not work ctrl-c
yarn install
yarn add react
yarn install
yarn storybook # ctrl-c did not work
yarn add react-dom
yarn storybook # ctrl-c did not work
yarn add -D react-scripts
yarn storybook # done, but cant find typescript pages
git init
gi node > .gitignore
git add .
git status
git commit -m "initial commit"

click here to see my System

``` Environment Info: System: OS: macOS 11.5 CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz Binaries: Node: 16.6.1 - ~/.nvm/versions/node/v16.6.1/bin/node (also tested on 14.16.0) Yarn: 1.22.11 - ~/.nvm/versions/node/v16.6.1/bin/yarn npm: 7.20.3 - ~/.nvm/versions/node/v16.6.1/bin/npm (also tested on 6.14.11) Browsers: Firefox: 90.0.2 Safari: 14.1.2 Chromium: 92.0.4515.107 (Official Build, ungoogled-chromium) (x86_64) -- (script did not find this, i have it from brew install eloston-chromium) npmPackages: @storybook/addon-actions: ^6.3.7 => 6.3.7 @storybook/addon-essentials: ^6.3.7 => 6.3.7 @storybook/addon-links: ^6.3.7 => 6.3.7 @storybook/node-logger: ^6.3.7 => 6.3.7 @storybook/preset-create-react-app: ^3.2.0 => 3.2.0 @storybook/react: ^6.3.7 => 6.3.7 ```

Additional context

Initially I believed this issue was due to my actual repo, but as you can see I can reproduce it from scratch without any issues.

I really tried to find a duplicate issue here, but I guess I'm missing a keyword if this was already raised here, as I couldn't find it.

shilman commented 2 years ago

Hi @Psidium - thanks for the report! I don't think this is actually a bug, but maybe you can correct me if I got it wrong.

Storybook is not meant to stand alone, i.e. if you go to an empty project and run sb init, we don't expect it to work. Instead, it's meant to be used ON TOP of existing apps or component libraries. So if you're in a CRA project and run sb init, we expect it to install itself alongside your app.

I believe when you're installing at the root of a lerna monorepo, there's no real app/library for Storybook to install itself on. If you installed it INSIDE the CRA sub-directory in the monorepo, I would expect it to work as advertised.

WDYT?

Khushi1706 commented 2 years ago

Hi @shilman , I am facing the exact same issue. I am using storybook alongside react boilerplate. This is my folder structure. I have these under frontend folder.
On my local everything works perfectly, but when i serve this using npx http-server ./path. I get only introduction page and same errors as mentioned above get displayed in console. Please help!

Update: adding console image for reference. Thanks

Khushi1706 commented 2 years ago

Can i please get an update on this

clothoo commented 2 years ago

First and foremost, thanks for such an awesome project. Also thanks for being so approachable, I wasn't going to raise any issues, but the maintainers seem really understanding and that helps, so here I am. ... I really tried to find a duplicate issue here, but I guess I'm missing a keyword if this was already raised here, as I couldn't find it.

I'm facing the same problem. I have the exact same setup. Did you find a solution for this?

shilman commented 1 year ago

We’re cleaning house! Storybook has changed a lot since this issue was created and we don’t know if it’s still valid. Please open a new issue referencing this one if:

this is still a problem in SB 7.x
you can provide a consistent reproduction in 7.x (at https://storybook.new/ or per repro docs).

storybookjs / storybook

sb init on lerna root can't load stories written in tsx or jsx #15803