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

getstorybook shouldn't use yarn if there's no yarn.lock #3384

Closed
danawoodman opened this issue Apr 9, 2018 · 16 comments
Closed

getstorybook shouldn't use yarn if there's no yarn.lock #3384

danawoodman opened this issue Apr 9, 2018 · 16 comments
Labels

Comments

@danawoodman
Copy link

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)

@danawoodman
Copy link
Author

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)

@Hypnosphi Hypnosphi added the cli label Apr 9, 2018
@Hypnosphi
Copy link
Member

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

readlink /usr/local/bin/getstorybook

@danawoodman
Copy link
Author

I get nothing running that but which getstorybook returns:

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

@danawoodman
Copy link
Author

danawoodman commented Apr 10, 2018

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

getstorybook -V
3.4.0
warning "@storybook/addon-actions@4.0.0-alpha.1" has incorrect peer dependency "@storybook/addons@^3.3.0".
warning "@storybook/addon-links@4.0.0-alpha.1" has incorrect peer dependency "@storybook/addons@^3.3.0".

@danawoodman
Copy link
Author

Installing npm i -g @storybook/cli@3.3.15 fixes the problem. Seems an issue with v3.4.0?

@Hypnosphi
Copy link
Member

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

@danawoodman
Copy link
Author

danawoodman commented Apr 18, 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:

app@0.1.0 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.

@Hypnosphi
Copy link
Member

Hypnosphi commented Apr 18, 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

@danawoodman
Copy link
Author

I do but why would that matter?

@danawoodman
Copy link
Author

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

@Hypnosphi
Copy link
Member

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

getstorybook --use-npm

@danawoodman
Copy link
Author

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?

@Hypnosphi
Copy link
Member

Eg check if there is a yarn.lock instead of just a system available yarn?

Sounds like a good idea. Want to open a PR? The code to change would be this: https://github.com/storybooks/storybook/blob/master/lib/cli/lib/has_yarn.js

@Hypnosphi Hypnosphi reopened this Apr 19, 2018
@Hypnosphi Hypnosphi changed the title getstorybook installs alpha version unexpectedly getstorybook uses yarn unexpectedly Apr 19, 2018
@Hypnosphi Hypnosphi changed the title getstorybook uses yarn unexpectedly getstorybook shouldn't use yarn if there's no yarn.lock Apr 19, 2018
@Hypnosphi Hypnosphi added the todo label Apr 19, 2018
@Keraito
Copy link
Contributor

Keraito commented Apr 19, 2018

Can I give this a try? If @danawoodman doesn't mind of course.

@danawoodman
Copy link
Author

Go for it!

@Hypnosphi
Copy link
Member

Hypnosphi commented May 2, 2018

Released as 4.0.0-alpha.4 and 3.4.3

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants