Production build with create-react-app includes story files

[colinramsay]

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]

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

[colinramsay]

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:

> [email protected] 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]

Happens to me as well

[stale[bot]]

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!

[Azim-Palmer]

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

[ndelangen]

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]

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]

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

[shilman]

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]

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.