Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Production build with create-react-app includes story files #12625

Closed
colinramsay opened this issue Sep 30, 2020 · 10 comments
Closed

Production build with create-react-app includes story files #12625

colinramsay opened this issue Sep 30, 2020 · 10 comments
Assignees
Labels
cra Prioritize create-react-app compatibility has workaround question / support

Comments

@colinramsay
Copy link

colinramsay commented Sep 30, 2020

Describe the bug
When running npm run build when using create-react-app with TypeScript, I receive errors in my story.tsx files complaining about missing storybook dependencies. This makes sense as the storybook dependencies are devDependencies and so not available for a production build.

Expected behavior
The story.tsx files should be excluded and a production build should be created.

Steps to replicate

npx create-react-app my-app --template typescript
cd my-app
npx sb init
rm -rf node_modules
npm install --only=prod
npm run build

System

Environment Info:

  System:
    OS: Linux 5.4 Alpine Linux
    CPU: (12) x64 AMD Ryzen 5 3600 6-Core Processor
  Binaries:
    Node: 10.20.1 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.4 - /usr/local/bin/npm

I'm not sure if I'm missing something major here!

┆Issue is synchronized with this Asana task by Unito

@shilman shilman added cra Prioritize create-react-app compatibility question / support labels Oct 1, 2020
@shilman
Copy link
Member

shilman commented Oct 1, 2020

This seems like a pretty big oversight. @mrmckeb any thoughts?

@colinramsay
Copy link
Author

I'm able to replicate this as follows:

npx create-react-app my-app --template typescript
cd my-app
npx sb init
rm -rf node_modules
npm install --only=prod
npm run build

This results in:

> my-app@0.1.0 build /sb/my-app
> react-scripts build

Creating an optimized production build...
Failed to compile.

/sb/my-app/src/stories/Button.stories.tsx
TypeScript error in /sb/my-app/src/stories/Button.stories.tsx(3,29):
Cannot find module '@storybook/react/types-6-0'.  TS2307

    1 | import React from 'react';
    2 | // also exported from '@storybook/react' if you can deal with breaking changes in 6.1
  > 3 | import { Story, Meta } from '@storybook/react/types-6-0';

@jansedlon
Copy link

Happens to me as well

@stale
Copy link

stale bot commented Dec 25, 2020

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

@stale stale bot added the inactive label Dec 25, 2020
@shilman shilman added the todo label Mar 3, 2021
@stale stale bot removed the inactive label Mar 3, 2021
@Azim-Palmer
Copy link

Azim-Palmer commented Mar 7, 2021

I also have this issue - after installing storybook into my create-react-app project I can't even run npm start

@shilman shilman added the P0 label Mar 8, 2021
@shilman shilman added this to the 6.2 candidates milestone Mar 11, 2021
@shilman shilman modified the milestones: 6.2 candidates, 6.2 blocking Mar 11, 2021
@ndelangen
Copy link
Member

I find it interesting you can run a development command (npm run build) when only having production dependencies installed, honestly.

Is this intended to work @mrmckeb ?

@ndelangen
Copy link
Member

The issue has 2 possible work-arounds, right now:

  • install all dependencies
  • move the storybook the storybook dependencies to regular dependencies manually.

Despite the error in the console, the build CRA works!, the output of /build is valid and opens in a browser.

I'm not exactly sure what CRA is trying to do with the src/stories contents..
The problem is that the content in there is typescript, and the typings are missing.

We can't move the stories outside of /src because then CRA complains as well.

My main questions are:

  • Why is the build of CRA looking at src/stories at all?
  • What's the suggestion way forward suggested by the CRA team to resolve this?
  • Why is the command line saying there was a critical error compiling, if the output build works just fine?

I'm not exactly sure how to proceed on the storybook side of things.
I think it's sort-of a bug in CRA to try and compile things that are not part of the dependency graph.

In any case, @shilman I don't think this is a blocker, since there are clear and easy work-arounds.

If anyone disagrees, and thinks there is something actionable by the storybook maintainers, please do let me know. 🙇

@shilman
Copy link
Member

shilman commented Mar 16, 2021

@ndelangen can you track down @mrmckeb and figure something out together?

@shilman shilman added P2 and removed P0 labels Mar 17, 2021
@shilman shilman removed this from the 6.2 blocking milestone Mar 17, 2021
@shilman
Copy link
Member

shilman commented Mar 17, 2021

Discussed this with @ndelangen and am in agreement that:

  1. this is kind of a corner case because it requires that you don't install dev dependencies, which is weird
  2. it's ultimately a CRA problem because they shouldn't bundle the story files

We should chase it down and fix it anyway because it affects our CRA users, but de-prioritizing it for now.

@mrmckeb
Copy link
Member

mrmckeb commented Mar 18, 2021

Interesting, I haven't hit this before... but it could use some investigation. If you'd like to raise an issue at @colinramsay, we can take a look at this on the CRA side:
https://github.com/facebook/create-react-app/issues/new/choose

Officially, the CRA team recommend installing everything as "dependencies" anyway as Webpack doesn't differentiate between dependency types, and we know that people hit issues on CI environments when they split things out.

So that's obviously the quick fix for this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
cra Prioritize create-react-app compatibility has workaround question / support
Projects
None yet
Development

No branches or pull requests

6 participants