ovh-ui-kit fails when starting the project

Question

ovh-ui-kit fails when starting the project

mohammed-zahaf opened this issue 4 years ago · 16 comments

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:

Answer 1 · 2020-07-29T13:41:20.000Z

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

Answer 2 · 2020-07-29T13:42:54.000Z

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

Answer 3 · 2020-07-29T13:48:11.000Z

After manual install run yarn start again

Answer 4 · 2020-08-10T08:55:12.000Z

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.

Answer 5 · 2020-08-10T09:10:45.000Z

@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?

Answer 6 · 2020-08-10T09:12:35.000Z

Yes it's occurred only on start app

Answer 7 · 2020-08-10T09:13:19.000Z

Mistake in my title

Answer 8 · 2020-08-10T09:14:07.000Z

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

Answer 9 · 2020-08-10T12:08:33.000Z

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 ?

Answer 10 · 2020-08-10T12:26:32.000Z

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

Environment:

Node.js: v12.18.3
NPM: 6.14.7

Answer 11 · 2020-08-10T12:31:42.000Z

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

Answer 12 · 2020-08-10T12:48:39.000Z

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.

Answer 13 · 2020-08-10T12:54:39.000Z

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

Answer 14 · 2020-08-11T08:49:56.000Z

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.

Answer 15 · 2020-08-11T14:09:25.000Z

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

Answer 16 · 2020-08-11T14:26:08.000Z

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