Storybook: getstorybook shouldn't use yarn if there's no `yarn.lock`

Created on 9 Apr 2018 · 16Comments · Source: storybookjs/storybook

Bug(?)

Using latest @storybook/cli running getstorybook installs alpha version of storybook versus latest stable version.

Steps to reproduce

npm i -g @storybook/cli
getstorybook

The installed version of Storybook dependencies are alpha versions. Considering the versions are alpha, it seems unexpected that the most recent version of getstorybook would install them rather than the latest stable release.

Affected platforms

I'm on OSX (10.13.3)

cli merged

Source

danawoodman

All 16 comments

In addition, and I'm not sure if it is related, by I am getting the following error when installing Storybook (using getstorybook -f) and running npm run storybook:

module.js:559
    throw err;
    ^

Error: Cannot find module './Mime'
    at Function.Module._resolveFilename (module.js:557:15)
    at Function.Module._load (module.js:484:25)
    at Module.require (module.js:606:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/someguy/code/someproject/node_modules/mime/index.js:3:12)
    at Module._compile (module.js:662:30)
    at Object.Module._extensions..js (module.js:673:10)
    at Module.load (module.js:575:32)
    at tryModuleLoad (module.js:515:12)
    at Function.Module._load (module.js:507:3)

danawoodman on 9 Apr 2018

👍1

Weird, for me it installs the stable versions. What does this command output for you?

readlink /usr/local/bin/getstorybook

Hypnosphi on 9 Apr 2018

I get nothing running that but which getstorybook returns:

/Users/dana/.nvm/versions/node/v9.6.0/bin/getstorybook

danawoodman on 10 Apr 2018

Tried it again, same result even after deleting everything from my project.

getstorybook -V
3.4.0

warning "@storybook/[email protected]" has incorrect peer dependency "@storybook/addons@^3.3.0".
warning "@storybook/[email protected]" has incorrect peer dependency "@storybook/addons@^3.3.0".

danawoodman on 10 Apr 2018

Installing npm i -g @storybook/[email protected] fixes the problem. Seems an issue with v3.4.0?

danawoodman on 10 Apr 2018

Can you please check it on 3.4.1? Which framework are you using BTW?

Hypnosphi on 11 Apr 2018

This is very easy to reproduce:

# Use latest node:
nvm install v9.11.1

# Create a blank React project:
npm i -g create-react-app
create-react-app app
cd app

# Install and setup Storybook
npm i -g @storybook/cli
npx getstorybook
npm run storybook

Result:

[email protected] storybook /Users/dana/code/spikes/storybook-test/app
> start-storybook -p 9009 -s public

info @storybook/react v4.0.0-alpha.3
info
info => Loading static files from: /Users/dana/code/spikes/storybook-test/app/public .
info => Loading custom addons config.
info => Using default webpack setup based on "create-react-app".
 10% building modules 2/2 modules 0 activeℹ ｢wdm｣: wait until bundle finished:
(node:29657) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
(node:29657) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead
webpack built 836a08be01957ead78dd in 4009ms
✖ ｢wdm｣: Hash: 836a08be01957ead78dd
Version: webpack 4.6.0
Time: 4009ms
Built at: 2018-04-17 22:29:12
                       Asset      Size   Chunks                    Chunk Names
    static/manager.bundle.js  3.17 MiB  manager  [emitted]  [big]  manager
    static/preview.bundle.js  1.89 MiB  preview  [emitted]  [big]  preview
static/manager.bundle.js.map  3.25 MiB  manager  [emitted]         manager
static/preview.bundle.js.map  1.86 MiB  preview  [emitted]         preview
                  index.html     1 KiB           [emitted]
                 iframe.html     1 KiB           [emitted]
Entrypoint manager [big] = static/manager.bundle.js static/manager.bundle.js.map
Entrypoint preview [big] = static/preview.bundle.js static/preview.bundle.js.map
[./.storybook/addons.js] 85 bytes {manager} [built]
[./.storybook/config.js] 135 bytes {preview} [built]
[./node_modules/@storybook/addon-actions/register.js] 38 bytes {manager} [built]
[./node_modules/@storybook/addon-links/register.js] 38 bytes {manager} [built]
[./node_modules/@storybook/core/dist/client/manager/index.js] 423 bytes {manager} [built]
[./node_modules/@storybook/core/dist/client/manager/provider.js] 3.27 KiB {manager} [built]
[./node_modules/@storybook/core/node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {preview} {manager} [built]
[0] multi ./.storybook/addons.js ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/core/dist/client/manager/index.js 52 bytes {manager} [built]
[1] multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js 64 bytes {preview} [built]
[./node_modules/@storybook/react/dist/server/config/globals.js] 105 bytes {preview} [built]
[./node_modules/@storybook/react/dist/server/config/polyfills.js] 113 bytes {preview} {manager} [built]
[./node_modules/core-js/fn/array/iterator.js] 107 bytes {preview} {manager} [built]
[./node_modules/global/window.js] 232 bytes {preview} {manager} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {preview} [built]
[./node_modules/webpack-hot-middleware/client.js?reload=true] 7.33 KiB {preview} [built]
    + 1084 hidden modules

ERROR in   TypeError: compilation.templatesPlugin is not a function

  - SetVarMainTemplatePlugin.js:17 SetVarMainTemplatePlugin.apply
    [app]/[react]/[html-webpack-plugin]/[webpack]/lib/SetVarMainTemplatePlugin.js:17:15

  - Tapable.js:71 Compilation.apply
    [app]/[tapable]/lib/Tapable.js:71:16

  - util.js:53 Compilation.deprecated [as apply]
    internal/util.js:53:15

  - LibraryTemplatePlugin.js:45 compiler.plugin
    [app]/[react]/[html-webpack-plugin]/[webpack]/lib/LibraryTemplatePlugin.js:45:18


  - Hook.js:35 SyncHook.lazyCompileHook [as _call]
    [app]/[tapable]/lib/Hook.js:35:21

  - Compiler.js:437 Compiler.newCompilation
    [app]/[core]/[webpack]/lib/Compiler.js:437:30

  - Compiler.js:474 hooks.beforeCompile.callAsync.err
    [app]/[core]/[webpack]/lib/Compiler.js:474:29


  - Hook.js:35 AsyncSeriesHook.lazyCompileHook [as _callAsync]
    [app]/[tapable]/lib/Hook.js:35:21



ERROR in   TypeError: compilation.templatesPlugin is not a function

  - SetVarMainTemplatePlugin.js:17 SetVarMainTemplatePlugin.apply
    [app]/[react]/[html-webpack-plugin]/[webpack]/lib/SetVarMainTemplatePlugin.js:17:15

  - Tapable.js:71 Compilation.apply
    [app]/[tapable]/lib/Tapable.js:71:16

  - util.js:53 Compilation.deprecated [as apply]
    internal/util.js:53:15

  - LibraryTemplatePlugin.js:45 compiler.plugin
    [app]/[react]/[html-webpack-plugin]/[webpack]/lib/LibraryTemplatePlugin.js:45:18


  - Hook.js:35 SyncHook.lazyCompileHook [as _call]
    [app]/[tapable]/lib/Hook.js:35:21

  - Compiler.js:437 Compiler.newCompilation
    [app]/[core]/[webpack]/lib/Compiler.js:437:30

  - Compiler.js:474 hooks.beforeCompile.callAsync.err
    [app]/[core]/[webpack]/lib/Compiler.js:474:29


  - Hook.js:35 AsyncSeriesHook.lazyCompileHook [as _callAsync]
    [app]/[tapable]/lib/Hook.js:35:21


ℹ ｢wdm｣: Failed to compile.

package.json content:

{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "storybook": "start-storybook -p 9009 -s public",
    "build-storybook": "build-storybook -s public"
  },
  "devDependencies": {
    "@storybook/react": "^4.0.0-alpha.3",
    "@storybook/addon-actions": "^4.0.0-alpha.3",
    "@storybook/addon-links": "^4.0.0-alpha.3",
    "@storybook/addons": "^4.0.0-alpha.3",
    "babel-core": "^7.0.0-bridge.0",
    "babel-runtime": "^7.0.0-beta.3"
  }
}

This is using Storybook 3.4.2.

danawoodman on 18 Apr 2018

Is there a chance that you have yarn on your machine? Which version is it?

What is the output of this command for you?

yarn info @storybook/react version

Hypnosphi on 18 Apr 2018

I do but why would that matter?

danawoodman on 18 Apr 2018

I removed yarn from my system and did everything again and now it work... why would having yarn installed have any effect on this considering I installed with npm?

Versions:

npm -v
5.6.0

node -v
v9.11.1

danawoodman on 18 Apr 2018

getstorybook uses yarn if it's available. There is a way to opt out of it:

getstorybook --use-npm

Hypnosphi on 19 Apr 2018

Ok, thanks for the info. This is super unexpected and I would categorize this as a bug since it breaks any application where a developer does not use that flag. I expect that installing with npm and running it with npm that it would use npm. Maybe there is a way for storybook to do this more intelligently? Eg check if there is a yarn.lock instead of just a system available yarn?

danawoodman on 19 Apr 2018

👍1