Giters

ovh / ovh-ui-kit

OVHcloud UI Kit - Master UI Framework

Home Page:https://ovh.github.io/ovh-ui-kit

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

ovh-ui-kit fails when starting the project

mohammed-zahaf opened this issue · comments

commented

Description

The issue occurs when i execute "yarn start" command.

Steps to reproduce

	1. git clone https://github.com/ovh/ovh-ui-kit.git
	2. cd ovh-ui-kit
	3. yarn install
	4. yarn start

Expected behavior:
In normal case we expect that server is up and the app launched into browser

Unexpected behavior:
Build fails and we got these first errors lines
[./.storybook/generated-entry.js] 1.52 KiB {main} [built] [failed] [1 error]
[./.storybook/preview.js] 1.52 KiB {main} [built] [failed] [1 error]
...

Frequency:
5 (always)

Additional information

OS : Windows Version 10.0.18363.959
WSL1 : Ubuntu 20.04 LTS
Node : v12.18.2
npm : 6.14.5
yarn : 1.22.4

Screenshot:
yarn-start-build-issues

commented

It seems this issue occurred because some packages related to @ovh-ux/ui-kit@ are missed.
The missed packages:
missied-dependencies

commented

To resolve the fail step, run the command:
npm i angular-aria@>=1.6.x angular-sanitize@>=1.6.x bloodhound-js@^1.2.3 clipboard@^2.0.4 flatpickr@^4.6.3 less@^3.9.0 popper.js@^1.16.1 ui-select@^0.19.8 vue@^2.6.10

commented

After manual install run yarn start again
yarn-issue-fixed

commented

Hello,

I've tried to reproduce this issue with a fresh install, but all works fine for me (with only yarn globally installed).

You could ignore the unmet peer dependency warnings, because @ovh-ux/ui-kit is the lib package.
@ovh-ux/ui-kit-workshop only use @ovh-ux/ui-kit for the MD files, so they are not necessary.

commented

@mohammed-zahaf Issue title mentioned errors on the installation process but the description is about starting the project.

Could you please confirm that errors appears only when starting the project?

commented

Yes it's occurred only on start app

commented

Mistake in my title

commented

I'm able to reproduce the error when starting the project by using following commands:

First attemp (according to the README.md file):

$ cd packages/apps/workshop/
$ yarn
$ yarn start

Second attempt:

$ yarn workspace @ovh-ux/ui-kit-workshop run start

Environement:

  • OS: Ubuntu 18.04.4 LTS
  • Node.js: v12.18.2
  • NPM: 6.14.7
  • Yarn: 1.22.4
View error logs
$ yarn start
yarn run v1.22.4
$ lerna exec --scope @ovh-ux/ui-kit-workshop -- yarn start
lerna notice cli v3.20.2
lerna info versioning independent
lerna notice filter including "@ovh-ux/ui-kit-workshop"
lerna info filter [ '@ovh-ux/ui-kit-workshop' ]
lerna info Executing command in 1 package: "yarn start"
$ yarn storybook
$ start-storybook -p 8000
info @storybook/html v5.3.19
info 
info => Loading presets
info => Loading presets
info => Loading custom manager config.
info => Loading config/preview file in "./.storybook".
info => Adding stories defined in ".storybook/main.js".
info => Loading custom Webpack config (full-control mode).
webpack built 64d46435f2a2d8272466 in 6097ms                                                                                                                                          
✖ ｢wdm｣: Hash: 64d46435f2a2d8272466
Version: webpack 4.35.3
Time: 6097ms
Built at: 08/10/2020 11:04:44 AM
                                          Asset       Size        Chunks                    Chunk Names
                                    iframe.html   2.87 KiB                [emitted]         
            main.64d46435f2a2d8272466.bundle.js   6.06 KiB          main  [emitted]         main
        main.64d46435f2a2d8272466.bundle.js.map  231 bytes          main  [emitted]         main
    runtime~main.64d46435f2a2d8272466.bundle.js   31.1 KiB  runtime~main  [emitted]         runtime~main
runtime~main.64d46435f2a2d8272466.bundle.js.map   32.3 KiB  runtime~main  [emitted]         runtime~main
    vendors~main.64d46435f2a2d8272466.bundle.js    773 KiB  vendors~main  [emitted]  [big]  vendors~main
vendors~main.64d46435f2a2d8272466.bundle.js.map    729 KiB  vendors~main  [emitted]         vendors~main
Entrypoint main [big] = runtime~main.64d46435f2a2d8272466.bundle.js runtime~main.64d46435f2a2d8272466.bundle.js.map vendors~main.64d46435f2a2d8272466.bundle.js vendors~main.64d46435f2a2d8272466.bundle.js.map main.64d46435f2a2d8272466.bundle.js main.64d46435f2a2d8272466.bundle.js.map
[0] multi /home/foo/bar/ovh-ui-kit/node_modules/@storybook/core/dist/server/common/polyfills.js /home/foo/bar/ovh-ui-kit/node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/preview.js ./.storybook/generated-entry.js /home/foo/bar/ovh-ui-kit/node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true 76 bytes {main} [built]
[../../../node_modules/@storybook/core/dist/server/common/polyfills.js] /home/foo/bar/ovh-ui-kit/node_modules/@storybook/core/dist/server/common/polyfills.js 120 bytes {vendors~main} [built]
[../../../node_modules/@storybook/core/dist/server/preview/globals.js] /home/foo/bar/ovh-ui-kit/node_modules/@storybook/core/dist/server/preview/globals.js 93 bytes {vendors~main} [built]
[../../../node_modules/@storybook/core/node_modules/regenerator-runtime/runtime.js] /home/foo/bar/ovh-ui-kit/node_modules/@storybook/core/node_modules/regenerator-runtime/runtime.js 23.5 KiB {vendors~main} [built]
[../../../node_modules/@storybook/core/node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {vendors~main} [built]
[../../../node_modules/airbnb-js-shims/index.js] /home/foo/bar/ovh-ui-kit/node_modules/airbnb-js-shims/index.js 40 bytes {vendors~main} [built]
[../../../node_modules/core-js/features/symbol/index.js] /home/foo/bar/ovh-ui-kit/node_modules/core-js/features/symbol/index.js 251 bytes {vendors~main} [built]
[../../../node_modules/global/window.js] /home/foo/bar/ovh-ui-kit/node_modules/global/window.js 232 bytes {vendors~main} [built]
[../../../node_modules/querystring-es3/index.js] /home/foo/bar/ovh-ui-kit/node_modules/querystring-es3/index.js 127 bytes {vendors~main} [built]
[../../../node_modules/webpack-hot-middleware/client-overlay.js] /home/foo/bar/ovh-ui-kit/node_modules/webpack-hot-middleware/client-overlay.js 2.17 KiB {vendors~main} [built]
[../../../node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true] /home/foo/bar/ovh-ui-kit/node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true 7.68 KiB {vendors~main} [built]
[../../../node_modules/webpack-hot-middleware/node_modules/strip-ansi/index.js] /home/foo/bar/ovh-ui-kit/node_modules/webpack-hot-middleware/node_modules/strip-ansi/index.js 161 bytes {vendors~main} [built]
[../../../node_modules/webpack-hot-middleware/process-update.js] /home/foo/bar/ovh-ui-kit/node_modules/webpack-hot-middleware/process-update.js 4.35 KiB {vendors~main} [built]
[./.storybook/generated-entry.js] 1.52 KiB {main} [built] [failed] [1 error]
[./.storybook/preview.js] 1.52 KiB {main} [built] [failed] [1 error]
    + 263 hidden modules

ERROR in ./.storybook/generated-entry.js
Module build failed (from /home/foo/bar/ovh-ui-kit/node_modules/babel-loader/lib/index.js):
Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main resolved in /home/foo/bar/ovh-ui-kit/node_modules/@storybook/core/node_modules/@babel/helper-compilation-targets/package.json
    at applyExports (internal/modules/cjs/loader.js:491:9)
    at resolveExports (internal/modules/cjs/loader.js:507:23)
    at Function.Module._findPath (internal/modules/cjs/loader.js:635:31)
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:953:27)
    at Function.Module._load (internal/modules/cjs/loader.js:842:27)
    at Module.require (internal/modules/cjs/loader.js:1026:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (/home/foo/bar/ovh-ui-kit/node_modules/@storybook/core/node_modules/@babel/preset-env/lib/debug.js:8:33)
    at Module._compile (internal/modules/cjs/loader.js:1138:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)
    at Module.load (internal/modules/cjs/loader.js:986:32)
    at Function.Module._load (internal/modules/cjs/loader.js:879:14)
    at Module.require (internal/modules/cjs/loader.js:1026:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (/home/foo/bar/ovh-ui-kit/node_modules/@storybook/core/node_modules/@babel/preset-env/lib/index.js:11:14)
    at Module._compile (internal/modules/cjs/loader.js:1138:30)
 @ multi /home/foo/bar/ovh-ui-kit/node_modules/@storybook/core/dist/server/common/polyfills.js /home/foo/bar/ovh-ui-kit/node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/preview.js ./.storybook/generated-entry.js /home/foo/bar/ovh-ui-kit/node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true main[3]

ERROR in ./.storybook/preview.js
Module build failed (from /home/foo/bar/ovh-ui-kit/node_modules/babel-loader/lib/index.js):
Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main resolved in /home/foo/bar/ovh-ui-kit/node_modules/@storybook/core/node_modules/@babel/helper-compilation-targets/package.json
    at applyExports (internal/modules/cjs/loader.js:491:9)
    at resolveExports (internal/modules/cjs/loader.js:507:23)
    at Function.Module._findPath (internal/modules/cjs/loader.js:635:31)
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:953:27)
    at Function.Module._load (internal/modules/cjs/loader.js:842:27)
    at Module.require (internal/modules/cjs/loader.js:1026:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (/home/foo/bar/ovh-ui-kit/node_modules/@storybook/core/node_modules/@babel/preset-env/lib/debug.js:8:33)
    at Module._compile (internal/modules/cjs/loader.js:1138:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)
    at Module.load (internal/modules/cjs/loader.js:986:32)
    at Function.Module._load (internal/modules/cjs/loader.js:879:14)
    at Module.require (internal/modules/cjs/loader.js:1026:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (/home/foo/bar/ovh-ui-kit/node_modules/@storybook/core/node_modules/@babel/preset-env/lib/index.js:11:14)
    at Module._compile (internal/modules/cjs/loader.js:1138:30)
 @ multi /home/foo/bar/ovh-ui-kit/node_modules/@storybook/core/dist/server/common/polyfills.js /home/foo/bar/ovh-ui-kit/node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/preview.js ./.storybook/generated-entry.js /home/foo/bar/ovh-ui-kit/node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true main[2]
Child HtmlWebpackCompiler:
                          Asset     Size               Chunks  Chunk Names
    __child-HtmlWebpackPlugin_0  560 KiB  HtmlWebpackPlugin_0  HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [../../../node_modules/@storybook/core/node_modules/html-webpack-plugin/lib/loader.js!../../../node_modules/@storybook/core/dist/server/templates/index.ejs] /home/foo/bar/ovh-ui-kit/node_modules/@storybook/core/node_modules/html-webpack-plugin/lib/loader.js!/home/foo/bar/ovh-ui-kit/node_modules/@storybook/core/dist/server/templates/index.ejs 2.08 KiB {HtmlWebpackPlugin_0} [built]
    [../../../node_modules/@storybook/core/node_modules/lodash/lodash.js] /home/foo/bar/ovh-ui-kit/node_modules/@storybook/core/node_modules/lodash/lodash.js 528 KiB {HtmlWebpackPlugin_0} [built]
    [../../../node_modules/@storybook/core/node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {HtmlWebpackPlugin_0} [built]
    [../../../node_modules/@storybook/core/node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {HtmlWebpackPlugin_0} [built]

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

✖ ｢wdm｣: Hash: 32c0dd7b3bc33ae401d4
Version: webpack 4.35.3
Time: 7228ms
Built at: 08/10/2020 11:04:45 AM
                                      Asset      Size        Chunks                    Chunk Names
                                 index.html  2.04 KiB                [emitted]         
        main.3bf386246438eaf7f486.bundle.js  5.18 KiB          main  [emitted]         main
runtime~main.e27e72d77edfc378d751.bundle.js  6.06 KiB  runtime~main  [emitted]         runtime~main
vendors~main.e54f5e7acdbb609b2940.bundle.js  8.35 MiB  vendors~main  [emitted]  [big]  vendors~main
Entrypoint main [big] = runtime~main.e27e72d77edfc378d751.bundle.js vendors~main.e54f5e7acdbb609b2940.bundle.js main.3bf386246438eaf7f486.bundle.js
[0] multi /home/foo/bar/ovh-ui-kit/node_modules/@storybook/core/dist/server/common/polyfills.js /home/foo/bar/ovh-ui-kit/node_modules/@storybook/core/dist/client/manager/index.js ./.storybook/manager.js @storybook/addon-knobs/register @storybook/addon-storysource/register @storybook/addon-actions/register @storybook/addon-a11y/register @storybook/addon-docs/register @storybook/addon-notes/register @storybook/addon-backgrounds/register @storybook/addon-viewport/register 148 bytes {main} [built]
[../../../node_modules/@storybook/addon-a11y/dist/register.js] /home/foo/bar/ovh-ui-kit/node_modules/@storybook/addon-a11y/dist/register.js 5.07 KiB {vendors~main} [built]
[../../../node_modules/@storybook/addon-a11y/register.js] /home/foo/bar/ovh-ui-kit/node_modules/@storybook/addon-a11y/register.js 28 bytes {vendors~main} [built]
[../../../node_modules/@storybook/addon-actions/dist/manager.js] /home/foo/bar/ovh-ui-kit/node_modules/@storybook/addon-actions/dist/manager.js 2.22 KiB {vendors~main} [built]
[../../../node_modules/@storybook/addon-actions/register.js] /home/foo/bar/ovh-ui-kit/node_modules/@storybook/addon-actions/register.js 38 bytes {vendors~main} [built]
[../../../node_modules/@storybook/addon-backgrounds/dist/register.js] /home/foo/bar/ovh-ui-kit/node_modules/@storybook/addon-backgrounds/dist/register.js 2.14 KiB {vendors~main} [built]
[../../../node_modules/@storybook/addon-backgrounds/register.js] /home/foo/bar/ovh-ui-kit/node_modules/@storybook/addon-backgrounds/register.js 28 bytes {vendors~main} [built]
[../../../node_modules/@storybook/addon-knobs/register.js] /home/foo/bar/ovh-ui-kit/node_modules/@storybook/addon-knobs/register.js 28 bytes {vendors~main} [built]
[../../../node_modules/@storybook/addon-notes/register.js] /home/foo/bar/ovh-ui-kit/node_modules/@storybook/addon-notes/register.js 46 bytes {vendors~main} [built]
[../../../node_modules/@storybook/addon-storysource/register.js] /home/foo/bar/ovh-ui-kit/node_modules/@storybook/addon-storysource/register.js 38 bytes {vendors~main} [built]
[../../../node_modules/@storybook/addon-viewport/register.js] /home/foo/bar/ovh-ui-kit/node_modules/@storybook/addon-viewport/register.js 137 bytes {vendors~main} [built]
[../../../node_modules/@storybook/core/dist/client/manager/index.js] /home/foo/bar/ovh-ui-kit/node_modules/@storybook/core/dist/client/manager/index.js 521 bytes {vendors~main} [built]
[../../../node_modules/@storybook/core/dist/server/common/polyfills.js] /home/foo/bar/ovh-ui-kit/node_modules/@storybook/core/dist/server/common/polyfills.js 120 bytes {vendors~main} [built]
[./.storybook/manager.js] 1.52 KiB {main} [built] [failed] [1 error]
[./node_modules/@storybook/addon-docs/register.js] 31 bytes {vendors~main} [built]
    + 1887 hidden modules

ERROR in ./.storybook/manager.js
Module build failed (from /home/foo/bar/ovh-ui-kit/node_modules/babel-loader/lib/index.js):
Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main resolved in /home/foo/bar/ovh-ui-kit/node_modules/@storybook/core/node_modules/@babel/helper-compilation-targets/package.json
    at applyExports (internal/modules/cjs/loader.js:491:9)
    at resolveExports (internal/modules/cjs/loader.js:507:23)
    at Function.Module._findPath (internal/modules/cjs/loader.js:635:31)
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:953:27)
    at Function.Module._load (internal/modules/cjs/loader.js:842:27)
    at Module.require (internal/modules/cjs/loader.js:1026:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (/home/foo/bar/ovh-ui-kit/node_modules/@storybook/core/node_modules/@babel/preset-env/lib/debug.js:8:33)
    at Module._compile (internal/modules/cjs/loader.js:1138:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)
    at Module.load (internal/modules/cjs/loader.js:986:32)
    at Function.Module._load (internal/modules/cjs/loader.js:879:14)
    at Module.require (internal/modules/cjs/loader.js:1026:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (/home/foo/bar/ovh-ui-kit/node_modules/@storybook/core/node_modules/@babel/preset-env/lib/index.js:11:14)
    at Module._compile (internal/modules/cjs/loader.js:1138:30)
 @ multi /home/foo/bar/ovh-ui-kit/node_modules/@storybook/core/dist/server/common/polyfills.js /home/foo/bar/ovh-ui-kit/node_modules/@storybook/core/dist/client/manager/index.js ./.storybook/manager.js @storybook/addon-knobs/register @storybook/addon-storysource/register @storybook/addon-actions/register @storybook/addon-a11y/register @storybook/addon-docs/register @storybook/addon-notes/register @storybook/addon-backgrounds/register @storybook/addon-viewport/register main[2]
Child HtmlWebpackCompiler:
                          Asset     Size               Chunks  Chunk Names
    __child-HtmlWebpackPlugin_0  537 KiB  HtmlWebpackPlugin_0  HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [../../../node_modules/@storybook/core/node_modules/html-webpack-plugin/lib/loader.js!../../../node_modules/@storybook/core/dist/server/templates/index.ejs] /home/foo/bar/ovh-ui-kit/node_modules/@storybook/core/node_modules/html-webpack-plugin/lib/loader.js!/home/foo/bar/ovh-ui-kit/node_modules/@storybook/core/dist/server/templates/index.ejs 2.08 KiB {HtmlWebpackPlugin_0} [built]
    [../../../node_modules/@storybook/core/node_modules/lodash/lodash.js] /home/foo/bar/ovh-ui-kit/node_modules/@storybook/core/node_modules/lodash/lodash.js 528 KiB {HtmlWebpackPlugin_0} [built]
    [../../../node_modules/@storybook/core/node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {HtmlWebpackPlugin_0} [built]
    [../../../node_modules/@storybook/core/node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {HtmlWebpackPlugin_0} [built]
WARN force closed preview build
commented

The errors seems to be linked to babel-loader.
I still can't reproduce the errors for now. A pretty simple yarn && yarn start works fine on a fresh install on my side.

@antleblanc No need to target the workshop, it's already scoped here: https://github.com/ovh/ovh-ui-kit/blob/master/package.json#L28

Here's my environment

  • Win10 19041.264
  • Node.js v12.13.1
  • NPM v6.14.7
  • Yarn v1.22.4

I'll try to update my Node.js version to the updated LTS, could be related since you're using both this one (v12.18.2).
It seems the new LTS is v12.18.3. Have you tried this patched version ?

commented

I'm able to reproduce with the latest LTS version of Node.js

Environment:

  • Node.js: v12.18.3
  • NPM: 6.14.7
commented

@antleblanc And just to be sure, if you use 12.13.1 (my current version), do you still have the errors ?

commented

I cannot reproduce the error with this exact Node.js version.

Environment:

  • Node.js: v12.13.1
  • NPM: 6.14.7

yarn start passed successfully.

commented

Ok, I'll upgrade the storybook packages. This should fix this issue since it's more related to a Node.js version compatibility :)

commented

It seems that just removing the yarn.lock fixes this issue, like it's mentioned in this thread: nodejs/node#32107 (comment). I'll create a PR to fix that.

commented

Updating Storybook to its new major version resolves this issue too.
The PR has been linked

commented

I confirm! I'm now able to start the project on Node.js version v12.18.3.
Thank you!