Storybook: Storybook throws a ugly error if there is not package.json

[matthewharwood]

Describe the bug
If you run

cd my-project-directory
npx -p @storybook/cli sb init

w/o a package.json, user will get a gross error.
Dunno if theres anything to do to prevent this but maybe a simple readme update?

matty@laptop: ~/Github/genesis/shared/components
$ ls
matty@laptop: ~/Github/genesis/shared/components
$ npx -p @storybook/cli sb init
npx: installed 399 in 10.358s
[BABEL] Note: The code generator has deoptimised the styling of /Users/matty/.npm/_npx/69447/lib/node_modules/@storybook/cli/node_modules/lodash/lodash.js as it exceeds the max of 500KB.

 sb init - the simplest way to add a storybook to your project.

 • Detecting project type. ✓
    We couldn't detect your project type. (code: UNDETECTED)
    You can specify a project type explicitly via `sb init --type <type>` or follow some of the slow start guides: https://storybook.js.org/basics/slow-start-guide/

? Do you want to manually choose a Storybook project type to install? Yes
? Please choose a project type from the following list: PREACT
 • Adding storybook support to your "Preact" app
     TypeError: Cannot create property 'dependencies' on boolean 'false'
    at _callee$ (/Users/matty/.npm/_npx/69447/lib/node_modules/@storybook/cli/generators/PREACT/index.js:18:3)
    at call (/Users/matty/.npm/_npx/69447/lib/node_modules/@storybook/cli/node_modules/regenerator-runtime/runtime.js:62:40)
    at Generator.tryCatch [as _invoke] (/Users/matty/.npm/_npx/69447/lib/node_modules/@storybook/cli/node_modules/regenerator-runtime/runtime.js:288:22)
    at Generator._invoke [as next] (/Users/matty/.npm/_npx/69447/lib/node_modules/@storybook/cli/node_modules/regenerator-runtime/runtime.js:114:21)
    at asyncGeneratorStep (/Users/matty/.npm/_npx/69447/lib/node_modules/@storybook/cli/generators/PREACT/index.js:34:103)
    at _next (/Users/matty/.npm/_npx/69447/lib/node_modules/@storybook/cli/generators/PREACT/index.js:36:194)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:189:7)

[Keraito]

@matthewharwood @shilman what do we expect as the expected behaviour here? Just a warning that there's no package.json? Or that it initializes it with the respective dependencies?

[shilman]

@Keraito I think a warning would be good. There's probably an interesting project here about making it create a standalone component library after prompting the user if that's what they want, but I'm not sure what would be involved with that.

[matthewharwood]

Yeah I'm not sure the solve either. Just was taken back at first by the current error

[jerryjappinen]

Just ran into this same issue. I wanted to test drive Storybook in the context of a Vue project, and using it as a way to test drive components or shared utility code in an independent repository.

My assumption was that I can run the init command in a fresh directory and it would set up what I need for a new project, but I got this error after following the setup guides.

Even after I realized I have to init a package.json myself, I _still_ got errors since I hadn't installed the peer dependencies needed to run the actual client-side code that the Vue template had generated.

I think the root cause is the mismatch between the expectations of a user in my situation, and the assumption Storybook's quick start documentation is provided with (i.e. add it to an existing project, it'll auto detect the type etc.). This could be fixed by emphasising that the tool is mainly for existing projects, adding a dedicated section in the docs for fresh project setup (or updating the wording on the type-specific "Getting started" pages), and perhaps also having prompts for initialising a missing package.json and installing peer dependencies for a fresh project.

[ndelangen]

We should warn the user they should run npm init first

[CelesteComet]

I like the idea of adding an error message, we can check for the existence of package.json and show an error message that package.json has to exist instead of the current error:

TypeError: Cannot create property 'dependencies' on boolean 'false'

I'd love to implement it.

[ndelangen]

@CelesteComet thank you, do you need help getting started?

I can find a slot in my calendar tomorrow to help you get going?

[CelesteComet]

@ndelangen , sorry I didn't see this. I don't think I'll need help but you can butcher the PR if it's way off!

[jakes2255]

Yes, reading the storybook quick guide gives the impression that the command should be executed by directly going to CMD. It helps if it updated as specifically mentioned by going to your project folder first and then running the npx -p @storybook/cli sb init and with type, 'React' in my case.

Thanks,
Jakes

[lucasfrutig0]

Hi i have same problem with npx for create a storybook project.
First i use create-react-app and navigate to project folder and run this command npx -p @storybook/cli sb init
So i always receive the message of not found package.json. Weird

see may log:

0 info it worked if it ends with ok
1 verbose cli [ 'C:\Program Files\nodejs\node.exe',
1 verbose cli 'C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'install',
1 verbose cli '@storybook/cli@latest',
1 verbose cli '--global',
1 verbose cli '--prefix',
1 verbose cli 'C:\Users\Lucas',
1 verbose cli 'Frutig\AppData\Roaming\npm-cache\_npx\1936',
1 verbose cli '--loglevel',
1 verbose cli 'error',
1 verbose cli '--json' ]
2 info using [email protected]
3 info using [email protected]
4 verbose npm-session 1722ad365c6ecf4c
5 silly install loadCurrentTree
6 silly install readGlobalPackageData
7 silly fetchPackageMetaData error for file:FrutigAppData\Roaming\npm-cache_npx\1936 Could not install from "FrutigAppData\Roaming\npm-cache_npx\1936" as it does not contain a package.json file.
8 http fetch GET 304 https://registry.npmjs.org/@storybook%2fcli 1984ms (from cache)
9 silly pacote tag manifest for @storybook/cli@latest fetched in 2010ms
10 timing stage:rollbackFailedOptional Completed in 0ms
11 timing stage:runTopLevelLifecycles Completed in 2020ms
12 verbose stack Error: ENOENT: no such file or directory, open 'C:\Users\Lucas Frutig\Documents\storybook\taskbox\FrutigAppData\Roaming\npm-cache_npx\1936package.json'
13 verbose cwd C:\Users\Lucas Frutig\Documents\storybook\taskbox
14 verbose Windows_NT 10.0.18362
15 verbose argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "install" "@storybook/cli@latest" "--global" "--prefix" "C:\Users\Lucas" "Frutig\AppData\Roaming\npm-cache\_npx\1936" "--loglevel" "error" "--json"
16 verbose node v10.16.1
17 verbose npm v6.9.0
18 error code ENOLOCAL
19 error Could not install from "FrutigAppData\Roaming\npm-cache_npx\1936" as it does not contain a package.json file.
20 verbose exit [ 1, true ]

[ndelangen]

This doesn't seem right to me:

"C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "install" "@storybook/cli@latest" "--global" "--prefix" "C:\Users\Lucas" "Frutig\AppData\Roaming\npm-cache\_npx\1936" "--loglevel" "error" "--json"

[lucasfrutig0]

This doesn't seem right to me:

"C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "install" "@storybook/cli@latest" "--global" "--prefix" "C:\Users\Lucas" "Frutig\AppData\Roaming\npm-cache\_npx\1936" "--loglevel" "error" "--json"

Sorry, but why this is seem wrong? Have a problem with node instalation?

[ndelangen]

"--prefix" "C:\Users\Lucas" "Frutig\AppData\Roaming\npm-cache\_npx\1936"

in particular doesn't look right... this should be a single path I recon, not 2 strings.

I think npm is trying to find and install a package from 'FrutigAppData\Roaming\npm-cache_npx\1936', which is can't because that's not a valid location with a package.json