[Error]: Starting Storybook issue

aha-m commented 2 years ago

Summary

Hi there!

We are trying to use Carbon web component library for our company web applications. First we need to evaluate if your library is fitting our needs. One of our requirements is also to modify styling of the components, add further features and maybe additionally update some behavior. This requires to update the source code if needed. We tried to run a storybook project using web components (yarn storybook). So we forked the repository and cloned it, then installed (yarn install), but running the application containing Carbon does not work for us. When starting we get some errors for the @carbon\icons for each icon which is used.

Module not found: Error: Can't resolve 'C:Devplaygoundwebcomponentscarbon-web-componentssrcglobalsdirectivesspread' in 'C:\Dev\playgound\webcomponents\carbon-web-components\node_modules\@carbon\icons\lib\add' @ ./node_modules/@carbon/icons/lib/add/16.js 12:0-104 19:386-392 @ ./src/components/icon/icon-story.ts @ ./src sync ^.(?:(?:^|[\/]|(?:(?:(?!(?:^|[\/]).).)?)[\/])(?!.)(?=.)[^\/]?-story.ts)$ @ ./.storybook/generated-stories-entry.js @ multi ./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-client/dist/esm/globals/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/web-components/config.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-knobs/dist/preset/addDecorator.js-generated-other-entry.js ./.storybook/addon-knobs-args/decorators.ts-generated-other-entry.js ./.storybook/preview.ts-generated-config-entry.js ./.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined

Child HtmlWebpackCompiler: Asset Size Chunks Chunk Names child-HtmlWebpackPlugin_0 6.25 KiB HtmlWebpackPlugin_0 HtmlWebpackPlugin_0 Entrypoint HtmlWebpackPlugin_0 = child-HtmlWebpackPlugin_0 [./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core-common/dist/cjs/templates/index.ejs] 2 KiB {HtmlWebpackPlugin_0} [built] ModuleNotFoundError: Module not found: Error: Can't resolve 'C:Devplaygoundwebcomponentscarbon-web-componentssrcglobalsdirectivesspread' in 'C:\Dev\playgound\webcomponents\carbon-web-components\node_modules\@carbon\icons\lib\add' at C:\Dev\playgound\webcomponents\carbon-web-components\node_modules\webpack\lib\Compilation.js:925:10 at C:\Dev\playgound\webcomponents\carbon-web-components\node_modules\webpack\lib\NormalModuleFactory.js:401:22 at C:\Dev\playgound\webcomponents\carbon-web-components\node_modules\webpack\lib\NormalModuleFactory.js:130:21 at C:\Dev\playgound\webcomponents\carbon-web-components\node_modules\webpack\lib\NormalModuleFactory.js:224:22 at C:\Dev\playgound\webcomponents\carbon-web-components\node_modules\neo-async\async.js:2830:7 at C:\Dev\playgound\webcomponents\carbon-web-components\node_modules\neo-async\async.js:6877:13 at C:\Dev\playgound\webcomponents\carbon-web-components\node_modules\webpack\lib\NormalModuleFactory.js:214:25 at C:\Dev\playgound\webcomponents\carbon-web-components\node_modules\enhanced-resolve\lib\Resolver.js:213:14 at C:\Dev\playgound\webcomponents\carbon-web-components\node_modules\enhanced-resolve\lib\Resolver.js:285:5 at eval (eval at create (C:\Dev\playgound\webcomponents\carbon-web-components\node_modules\tapable\lib\HookCodeFactory.js:33:10), :15:1) at C:\Dev\playgound\webcomponents\carbon-web-components\node_modules\enhanced-resolve\lib\UnsafeCachePlugin.js:44:7 at C:\Dev\playgound\webcomponents\carbon-web-components\node_modules\enhanced-resolve\lib\Resolver.js:285:5 at eval (eval at create (C:\Dev\playgound\webcomponents\carbon-web-components\node_modules\tapable\lib\HookCodeFactory.js:33:10), :15:1) at C:\Dev\playgound\webcomponents\carbon-web-components\node_modules\enhanced-resolve\lib\Resolver.js:285:5 at eval (eval at create (C:\Dev\playgound\webcomponents\carbon-web-components\node_modules\tapable\lib\HookCodeFactory.js:33:10), :27:1) at C:\Dev\playgound\webcomponents\carbon-web-components\node_modules\enhanced-resolve\lib\DescriptionFilePlugin.js:67:43 resolve 'C:Devplaygoundwebcomponentscarbon-web-componentssrcglobalsdirectivesspread' in 'C:\Dev\playgound\webcomponents\carbon-web-components\node_modules\@carbon\icons\lib\add' Parsed request is a module using description file: C:\Dev\playgound\webcomponents\carbon-web-components\node_modules\@carbon\icons\package.json (relative path: ./lib/add) Field 'browser' doesn't contain a valid alias configuration resolve as module C:\Dev\playgound\webcomponents\carbon-web-components\node_modules\@carbon\icons\lib\add\node_modules doesn't exist or is not a directory C:\Dev\playgound\webcomponents\carbon-web-components\node_modules\@carbon\icons\lib\node_modules doesn't exist or is not a directory C:\Dev\playgound\webcomponents\carbon-web-components\node_modules\@carbon\icons\node_modules doesn't exist or is not a directory C:\Dev\playgound\webcomponents\carbon-web-components\node_modules\@carbon\node_modules doesn't exist or is not a directory C:\Dev\playgound\webcomponents\carbon-web-components\node_modules\node_modules doesn't exist or is not a directory C:\Dev\playgound\webcomponents\node_modules doesn't exist or is not a directory C:\Dev\playgound\node_modules doesn't exist or is not a directory C:\Dev\node_modules doesn't exist or is not a directory C:\node_modules doesn't exist or is not a directory looking for modules in C:\Dev\playgound\webcomponents\carbon-web-components\node_modules using description file: C:\Dev\playgound\webcomponents\carbon-web-components\package.json (relative path: ./node_modules) Field 'browser' doesn't contain a valid alias configuration using description file: C:\Dev\playgound\webcomponents\carbon-web-components\package.json (relative path: ./node_modules/C:Devplaygoundwebcomponentscarbon-web-componentssrcglobalsdirectivesspread) no extension Field 'browser' doesn't contain a valid alias configuration C:\Dev\playgound\webcomponents\carbon-web-components\node_modules\C:Devplaygoundwebcomponentscarbon-web-componentssrcglobalsdirectivesspread doesn't exist .mjs Field 'browser' doesn't contain a valid alias configuration C:\Dev\playgound\webcomponents\carbon-web-components\node_modules\C:Devplaygoundwebcomponentscarbon-web-componentssrcglobalsdirectivesspread.mjs doesn't exist .js Field 'browser' doesn't contain a valid alias configuration C:\Dev\playgound\webcomponents\carbon-web-components\node_modules\C:Devplaygoundwebcomponentscarbon-web-componentssrcglobalsdirectivesspread.js doesn't exist .jsx Field 'browser' doesn't contain a valid alias configuration C:\Dev\playgound\webcomponents\carbon-web-components\node_modules\C:Devplaygoundwebcomponentscarbon-web-componentssrcglobalsdirectivesspread.jsx doesn't exist .ts Field 'browser' doesn't contain a valid alias configuration C:\Dev\playgound\webcomponents\carbon-web-components\node_modules\C:Devplaygoundwebcomponentscarbon-web-componentssrcglobalsdirectivesspread.ts doesn't exist .tsx Field 'browser' doesn't contain a valid alias configuration C:\Dev\playgound\webcomponents\carbon-web-components\node_modules\C:Devplaygoundwebcomponentscarbon-web-componentssrcglobalsdirectivesspread.tsx doesn't exist .json Field 'browser' doesn't contain a valid alias configuration C:\Dev\playgound\webcomponents\carbon-web-components\node_modules\C:Devplaygoundwebcomponentscarbon-web-componentssrcglobalsdirectivesspread.json doesn't exist .cjs Field 'browser' doesn't contain a valid alias configuration C:\Dev\playgound\webcomponents\carbon-web-components\node_modules\C:Devplaygoundwebcomponentscarbon-web-componentssrcglobalsdirectivesspread.cjs doesn't exist as directory C:\Dev\playgound\webcomponents\carbon-web-components\node_modules\C:Devplaygoundwebcomponentscarbon-web-componentssrcglobalsdirectivesspread doesn't exist

We checked also the tsconfig.json to set the "noImplicitAny": false, to use javascipt without d.ts, but still not working. What do we need to adjust to make the application run successfully? Do you have any recommendations?

Relevant information

No response

Name and organization

Szabolcs Szabo (Szasza)

Code of Conduct

[X] I agree to follow this project's Code of Conduct
[X] I checked the current issues for duplicate issues

annawen1 commented 2 years ago

Hi @mation! We have the steps listed in the readme here: https://github.com/carbon-design-system/carbon-web-components#getting-started-with-development

Did you try running yarn wca as well? You'll need to run that as well to get storybook up and running. yarn wca && yarn storybook

aha-m commented 2 years ago

Hi @annawen1! I followed the instructions in the readme.

After yarn install I got this warnings:

warning " > babel-plugin-transform-vue-jsx@4.0.1" has unmet peer dependency "babel-helper-vue-jsx-merge-props@^2.0.0". warning " > @angular-devkit/build-angular@0.1102.15" has incorrect peer dependency "@angular/compiler-cli@^11.0.0 || ^11.2.0-next". warning " > @angular-devkit/build-angular@0.1102.15" has incorrect peer dependency "typescript@~4.0.0 || ~4.1.0". warning "@angular-devkit/build-angular > @ngtools/webpack@11.2.15" has incorrect peer dependency "@angular/compiler-cli@^11.0.0 || ^11.2.0-next". warning "@angular-devkit/build-angular > @ngtools/webpack@11.2.15" has incorrect peer dependency "typescript@~4.0.0 || ~4.1.0". warning " > @angular/common@8.2.14" has incorrect peer dependency "rxjs@^6.4.0". warning " > @angular/compiler-cli@8.2.14" has incorrect peer dependency "typescript@>=3.4 <3.6". warning " > @angular/core@8.2.14" has incorrect peer dependency "rxjs@^6.4.0". warning " > @angular/core@8.2.14" has incorrect peer dependency "zone.js@~0.9.1". warning " > @angular/forms@8.2.14" has incorrect peer dependency "rxjs@^6.4.0". warning "@commitlint/cli > @commitlint/load > cosmiconfig-typescript-loader@1.0.2" has unmet peer dependency "@types/node@". warning "@commitlint/cli > @commitlint/load > cosmiconfig-typescript-loader > ts-node@10.4.0" has unmet peer dependency "@types/node@". warning "@storybook/addon-actions > @storybook/api > @reach/router@1.3.4" has incorrect peer dependency "react@15.x || 16.x || 16.4.0-alpha.0911da3". warning "@storybook/addon-actions > @storybook/api > @reach/router@1.3.4" has incorrect peer dependency "react-dom@15.x || 16.x || 16.4.0-alpha.0911da3". warning "@storybook/addon-actions > @storybook/api > @reach/router > create-react-context@0.3.0" has incorrect peer dependency "react@^0.14.0 || ^15.0.0 || ^16.0.0". warning "@storybook/addon-essentials > @storybook/addon-measure@2.0.0" has unmet peer dependency "@storybook/components@^6.3.0". warning "@storybook/addon-essentials > @storybook/addon-measure@2.0.0" has unmet peer dependency "@storybook/core-events@^6.3.0". warning "@storybook/addon-essentials > @storybook/addon-measure@2.0.0" has unmet peer dependency "@storybook/theming@^6.3.0". warning " > @storybook/addon-knobs@6.3.1" has unmet peer dependency "@storybook/addons@^6.3.0". warning " > @storybook/addon-knobs@6.3.1" has unmet peer dependency "@storybook/api@^6.3.0". warning " > @storybook/addon-knobs@6.3.1" has unmet peer dependency "@storybook/components@^6.3.0". warning " > @storybook/addon-knobs@6.3.1" has unmet peer dependency "@storybook/core-events@^6.3.0". warning " > @storybook/addon-knobs@6.3.1" has unmet peer dependency "@storybook/theming@^6.3.0". warning " > @storybook/angular@6.2.9" has incorrect peer dependency "rxjs@^6.0.0". warning "@storybook/react > @storybook/react-docgen-typescript-plugin > react-docgen-typescript@2.1.1" has incorrect peer dependency "typescript@>= 4.3.x". warning " > css-loader@6.5.1" has incorrect peer dependency "webpack@^5.0.0". warning "jest-playwright-preset > expect-playwright@0.2.6" has unmet peer dependency "playwright-core@^1.5.1". warning " > karma-webpack@5.0.0" has incorrect peer dependency "webpack@^5.0.0". warning " > mini-css-extract-plugin@2.4.5" has incorrect peer dependency "webpack@^5.0.0". warning " > terser-webpack-plugin@5.2.5" has incorrect peer dependency "webpack@^5.1.0". warning " > tsickle@0.37.1" has incorrect peer dependency "typescript@~3.6.4".

I run yarn wca && yarn storybook I got the following error for all components, to change the order of babel plugins in .babelrc config.

ERROR in ./src/components/accordion/accordion-item.ts Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: C:\Dev\playgound\webcomponents\carbon-web-components\src\components\accordion\accordion-item.ts: Decorators are not enabled. If you are using ["@babel/plugin-proposal-decorators", { "legacy": true }], make sure it comes before "@babel/plugin-proposal-class-properties" and enable loose mode, like so: ["@babel/plugin-proposal-decorators", { "legacy": true }] ["@babel/plugin-proposal-class-properties", { "loose": true }] 51 | @csspart content The content. 52 | /

53 | @customElement(${prefix}-accordion-item) | ^ 54 | class BXAccordionItem extends FocusMixin(LitElement) { 55 | /* 56 | The current breakpoint. at File.buildCodeFrameError (C:\Dev\playgound\webcomponents\carbon-web-components\node_modules\@babel\core\lib\transformation\file\file.js:250:12) at NodePath.buildCodeFrameError (C:\Dev\playgound\webcomponents\carbon-web-components\node_modules\@babel\traverse\lib\path\index.js:139:21) at verifyUsedFeatures (C:\Dev\playgound\webcomponents\carbon-web-components\node_modules\@babel\helper-create-class-features-plugin\lib\features.js:88:18) at PluginPass.Class (C:\Dev\playgound\webcomponents\carbon-web-components\node_modules\@babel\helper-create-class-features-plugin\lib\index.js:90:42) at newFn (C:\Dev\playgound\webcomponents\carbon-web-components\node_modules\@babel\traverse\lib\visitors.js:177:21) at NodePath._call (C:\Dev\playgound\webcomponents\carbon-web-components\node_modules\@babel\traverse\lib\path\context.js:53:20) at NodePath.call (C:\Dev\playgound\webcomponents\carbon-web-components\node_modules\@babel\traverse\lib\path\context.js:40:17) at NodePath.visit (C:\Dev\playgound\webcomponents\carbon-web-components\node_modules\@babel\traverse\lib\path\context.js:100:31) at TraversalContext.visitQueue (C:\Dev\playgound\webcomponents\carbon-web-components\node_modules\@babel\traverse\lib\context.js:103:16) at TraversalContext.visitMultiple (C:\Dev\playgound\webcomponents\carbon-web-components\node_modules\@babel\traverse\lib\context.js:72:17) at TraversalContext.visit (C:\Dev\playgound\webcomponents\carbon-web-components\node_modules\@babel\traverse\lib\context.js:129:19) at Function.traverse.node (C:\Dev\playgound\webcomponents\carbon-web-components\node_modules\@babel\traverse\lib\index.js:82:17) at NodePath.visit (C:\Dev\playgound\webcomponents\carbon-web-components\node_modules\@babel\traverse\lib\path\context.js:108:18) at TraversalContext.visitQueue (C:\Dev\playgound\webcomponents\carbon-web-components\node_modules\@babel\traverse\lib\context.js:103:16) at TraversalContext.visitSingle (C:\Dev\playgound\webcomponents\carbon-web-components\node_modules\@babel\traverse\lib\context.js:77:19) at TraversalContext.visit (C:\Dev\playgound\webcomponents\carbon-web-components\node_modules\@babel\traverse\lib\context.js:131:19) @ ./src/components/accordion/accordion-story.ts 18:0-26 @ ./src sync ^.(?:(?:^|[\/]|(?:(?:(?!(?:^|[\/]).).)?)[\/])(?!.)(?=.)[^\/]?-story.ts)$ @ ./.storybook/generated-stories-entry.js @ multi ./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-client/dist/esm/globals/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/web-components/config.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-knobs/dist/preset/addDecorator.js-generated-other-entry.js ./.storybook/addon-knobs-args/decorators.ts-generated-other-entry.js ./.storybook/preview.ts-generated-config-entry.js ./.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined

If I change the order in .babelrc and I re run yarn wca && yarn storybook I get the error what I reported first with the icons. I fear the problem can be because of having two different babel plugin versions "@babel/plugin-proposal-decorators@^7.12.12", "@babel/plugin-proposal-decorators@^7.16.4". The 7.12.12 version is a storybook dependency and 7.16.4 version devDependencies from package.json.

Do you have any idea how to solve it or any proposals what to do next?

annawen1 commented 2 years ago

Hi @mation, I pulled a fresh clone of the repo and haven't run into those issues.

Maybe one thing you can check is node version? I'm on v14.18.1

aha-m commented 2 years ago

Hi @annawen1, thank you for your fast answers. I was using node 14.17.0 I changed to 14.18.1 but it still doesn't work on my Windows 10 also with the latest node version. I tried on my Mac Monterey with node 14.18.1 and there it works. Do you have any idea what could be in Windows ?

annawen1 commented 2 years ago

@mation great you were able to get it running with Mac! Not sure what it could be with Windows...

kennylam commented 2 years ago

Hi @mation, are you using WSL?

aha-m commented 2 years ago

Hi @kennylam, I checked In Windows features and yes the WSL is on.

kennylam commented 2 years ago

Are you using a Linux distro for development, e.g. Ubuntu? I can confirm everything works properly when building this way.

aha-m commented 2 years ago

@kennylam We are using native Windows :)

kennylam commented 2 years ago

Ok, gotcha. But as I said, you shouldn't have any issues if you use a Linux install in WSL. You can refer to Carbon documentation for developing in Windows here.

annawen1 commented 2 years ago

Closing this ticket as it is able to run on Mac and @kennylam has provided steps to get it working on Windows as well.

carbon-design-system / carbon-web-components