Fresh install fails with several errors

[salvadordiaz]

Environment:

$ node -v
v10.15.3
$ yarn -v
1.13.0
$ vue -V
3.1.3

All of this on the latest ubuntu version.

Steps to reproduce:

• Create a minimal vue project with vue-cli: vue create myproject
• Add storybook plugin: vue add storybook
• Run yarn storybook:serve or yarn storybook:build

The project created using these steps can be found at https://github.com/salvadordiaz/bug-storybook-vue-cli-plugin. Just checkout and run yarn install && yarn storybook:serve

Expected:
Storybook runs or gets built.
Outcome:
The following error messages on the console:

$ yarn storybook:serve
yarn run v1.13.0
$ vue-cli-service storybook:serve -p 6006 -c config/storybook
info @storybook/vue v5.0.1
info 
info => Loading presets
WARN   Failed to load preset: "/home/work/minimal-vuecli-storybook/node_modules/@storybook/core/dist/server/manager/manager-preset.js"
ERR! Error: Cannot find module 'emotion-theming/package.json'
ERR!     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:582:15)
ERR!     at Function.resolve (internal/modules/cjs/helpers.js:30:19)
ERR!     at Object.<anonymous> (/home/work/minimal-vuecli-storybook/node_modules/@storybook/ui/paths.js:16:38)
ERR!     at Module._compile (internal/modules/cjs/loader.js:701:30)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:600:32)
ERR!     at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:531:3)
ERR!     at Module.require (internal/modules/cjs/loader.js:637:17)
ERR!     at require (internal/modules/cjs/helpers.js:22:18)
ERR!     at Object.<anonymous> (/home/work/minimal-vuecli-storybook/node_modules/@storybook/core/dist/server/manager/manager-webpack.config.js:18:37)
ERR!     at Module._compile (internal/modules/cjs/loader.js:701:30)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:600:32)
ERR!     at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:531:3)
ERR!  { Error: Cannot find module 'emotion-theming/package.json'
ERR!     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:582:15)
ERR!     at Function.resolve (internal/modules/cjs/helpers.js:30:19)
ERR!     at Object.<anonymous> (/home/work/minimal-vuecli-storybook/node_modules/@storybook/ui/paths.js:16:38)
ERR!     at Module._compile (internal/modules/cjs/loader.js:701:30)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:600:32)
ERR!     at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:531:3)
ERR!     at Module.require (internal/modules/cjs/loader.js:637:17)
ERR!     at require (internal/modules/cjs/helpers.js:22:18)
ERR!     at Object.<anonymous> (/home/work/minimal-vuecli-storybook/node_modules/@storybook/core/dist/server/manager/manager-webpack.config.js:18:37)
ERR!     at Module._compile (internal/modules/cjs/loader.js:701:30)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:600:32)
ERR!     at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:531:3)
ERR!   stack:
ERR!    'Error: Cannot find module \'emotion-theming/package.json\'\n    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:582:15)\n    at Function.resolve (internal/modules/cjs/helpers.js:30:19)\n    at Object.<anonymous> (/home/work/minimal-vuecli-storybook/node_modules/@storybook/ui/paths.js:16:38)\n    at Module._compile (internal/modules/cjs/loader.js:701:30)\n    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)\n    at Module.load (internal/modules/cjs/loader.js:600:32)\n    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)\n    at Function.Module._load (internal/modules/cjs/loader.js:531:3)\n    at Module.require (internal/modules/cjs/loader.js:637:17)\n    at require (internal/modules/cjs/helpers.js:22:18)\n    at Object.<anonymous> (/home/work/minimal-vuecli-storybook/node_modules/@storybook/core/dist/server/manager/manager-webpack.config.js:18:37)\n    at Module._compile (internal/modules/cjs/loader.js:701:30)\n    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)\n    at Module.load (internal/modules/cjs/loader.js:600:32)\n    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)\n    at Function.Module._load (internal/modules/cjs/loader.js:531:3)',
ERR!   code: 'MODULE_NOT_FOUND' }
info => Loading presets
info => Using default webpack setup.
 10% building 6/8 modules 2 active ...ebpack-hot-middleware/process-update.js

WARN force closed preview build


WARN FATAL broken build!, will close the process,
WARN Fix the error below and restart storybook.

EntryModuleNotFoundError: Entry module not found: Error: Can't resolve './src' in '/home/work/minimal-vuecli-storybook'
    at moduleFactory.create (/home/work/minimal-vuecli-storybook/node_modules/@storybook/core/node_modules/webpack/lib/Compilation.js:980:31)
    at factory (/home/work/minimal-vuecli-storybook/node_modules/@storybook/core/node_modules/webpack/lib/NormalModuleFactory.js:397:22)
    at resolver (/home/work/minimal-vuecli-storybook/node_modules/@storybook/core/node_modules/webpack/lib/NormalModuleFactory.js:130:21)
    at asyncLib.parallel (/home/work/minimal-vuecli-storybook/node_modules/@storybook/core/node_modules/webpack/lib/NormalModuleFactory.js:224:22)
    at /home/work/minimal-vuecli-storybook/node_modules/neo-async/async.js:2825:7
    at /home/work/minimal-vuecli-storybook/node_modules/neo-async/async.js:6886:13
    at normalResolver.resolve (/home/work/minimal-vuecli-storybook/node_modules/@storybook/core/node_modules/webpack/lib/NormalModuleFactory.js:214:25)
    at doResolve (/home/work/minimal-vuecli-storybook/node_modules/enhanced-resolve/lib/Resolver.js:184:12)
    at hook.callAsync (/home/work/minimal-vuecli-storybook/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn0 (eval at create (/home/work/minimal-vuecli-storybook/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:15:1)
    at resolver.doResolve (/home/work/minimal-vuecli-storybook/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:37:5)
    at hook.callAsync (/home/work/minimal-vuecli-storybook/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn0 (eval at create (/home/work/minimal-vuecli-storybook/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:15:1)
    at hook.callAsync (/home/work/minimal-vuecli-storybook/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn0 (eval at create (/home/work/minimal-vuecli-storybook/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:12:1)
    at resolver.doResolve (/home/work/minimal-vuecli-storybook/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:42:38)
resolve './src' in '/home/work/minimal-vuecli-storybook'
  using description file: /home/work/minimal-vuecli-storybook/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /home/work/minimal-vuecli-storybook/package.json (relative path: ./src)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /home/work/minimal-vuecli-storybook/src is not a file
      .wasm
        Field 'browser' doesn't contain a valid alias configuration
        /home/work/minimal-vuecli-storybook/src.wasm doesn't exist
      .mjs
        Field 'browser' doesn't contain a valid alias configuration
        /home/work/minimal-vuecli-storybook/src.mjs doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /home/work/minimal-vuecli-storybook/src.js doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        /home/work/minimal-vuecli-storybook/src.json doesn't exist
      as directory
        existing directory
          using path: /home/work/minimal-vuecli-storybook/src/index
            using description file: /home/work/minimal-vuecli-storybook/package.json (relative path: ./src/index)
              no extension
                Field 'browser' doesn't contain a valid alias configuration
                /home/work/minimal-vuecli-storybook/src/index doesn't exist
              .wasm
                Field 'browser' doesn't contain a valid alias configuration
                /home/work/minimal-vuecli-storybook/src/index.wasm doesn't exist
              .mjs
                Field 'browser' doesn't contain a valid alias configuration
                /home/work/minimal-vuecli-storybook/src/index.mjs doesn't exist
              .js
                Field 'browser' doesn't contain a valid alias configuration
                /home/work/minimal-vuecli-storybook/src/index.js doesn't exist
              .json
                Field 'browser' doesn't contain a valid alias configuration
                /home/work/minimal-vuecli-storybook/src/index.json doesn't exist
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[backbone87]

Can you check, if there is an emotion-theming package inside your node_modules? There were several issues reported regarding this package inside the storybook main repo for v5. Check these out

[LinusBorg]

Have the same issue and can confirm that emotion-theming is not in my/node_modules.

After installing it, the project compiles successfully, but now I see these errors in the browser console:

I'm not very familiar with React setups beyond he basics, but it may be related to the fact that during install of emotion-theming, I got several peer Dependency warnings?

[backbone87]

i have found the problem, i forgot to update the constraints for the injected dependencies @ https://github.com/storybooks/vue-cli-plugin-storybook/blob/master/generator/index.js#L12

setting them to ^5.0 and updating them, works for me.

i will create a PR to fix.

@LinusBorg do you know how vue cli handles updates of plugins? are the dependencies injected into the package.json updated too?

[LinusBorg]

Those are not updated unless you would run the generator again with vue invoke storybook - which, as it is, would also re-create the initial boilerplate.

I guess a prompt could be added that asks if only deps should be updated or something ...

[pksunkara]

@LinusBorg I had worked on a hook proposal and also asked about the update delivery solution long back ago regarding vue cli. I would like to raise this once more. The current vue cli plugin system is very simplistic and is not sustainable. It needs more work and my PR's are kept pending without any core member looking at it.

[LinusBorg]

We are now planning a new major, please comment here.

vuejs/vue-cli#3649