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

Pattern Library not working on Windows10/git-bash #465

Closed
wernerkrauss opened this issue Mar 14, 2018 · 13 comments
Closed

Pattern Library not working on Windows10/git-bash #465

wernerkrauss opened this issue Mar 14, 2018 · 13 comments

Comments

@wernerkrauss
Copy link

I installed SS4.1.0 stable and tried out the pattern library. It didn't work.

npm is V 6.11.0

$ yarn pattern-lib
yarn pattern-lib v0.23.2
$ yarn && start-storybook -p 6006
yarn install v0.23.2
[1/4] Resolving packages...
success Already up-to-date.
Done in 1.27s.
@storybook/react v3.2.16

=> Loading custom addons config.
=> Loading custom webpack config (full-control mode).
webpack built 2e1dfff828d023ac7bec in 21335ms
Hash: 2e1dfff828d023ac7bec
Version: webpack 3.9.1
Time: 21335ms
Asset Size Chunks Chunk Names
images/empty-campaign-preview.png 34.9 kB [emitted]
images/sitetree_ss_default_icons.png 21.6 kB [emitted]
images/sprite-btn-icon.png 23.2 kB [emitted]
images/sprite-sprites-32x32.png 21.8 kB [emitted]
images/cms_content_header.png 14.6 kB [emitted]
images/[email protected] 51.4 kB [emitted]
images/silverstripe.svg 66.5 kB [emitted]
images/intro-banner.png 10.2 kB [emitted]
static/preview.bundle.js 6.5 MB 0 [emitted] [big] preview
static/manager.bundle.js 2.59 MB 1 [emitted] [big] manager
static/preview.bundle.js.map 6.79 MB 0 [emitted] preview
static/manager.bundle.js.map 3.19 MB 1 [emitted] manager
[185] ./node_modules/@storybook/react/dist/client/index.js 1.63 kB {0} [built]
[301] ./node_modules/@storybook/react/dist/server/config/polyfills.js 113 bytes {0} {1} [built]
[302] ./node_modules/core-js/es6/symbol.js 131 bytes {0} {1} [built]
[576] ./node_modules/@storybook/ui/dist/index.js 2.42 kB {1} [built]
[694] multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./.storybook/addons.js ./node_modules/@storybook/react/dist/client/manager/index.js 52 bytes {1} [built]
[695] ./.storybook/addons.js 60 bytes {1} [built]
[696] ./node_modules/@storybook/addon-actions/register.js 30 bytes {1} [built]
[697] ./node_modules/@storybook/react/dist/client/manager/index.js 404 bytes {1} [built]
[888] 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 {0} [built]
[889] ./node_modules/@storybook/react/dist/server/config/globals.js 105 bytes {0} [built]
[890] ./node_modules/webpack-hot-middleware/client.js?reload=true 7.35 kB {0} [built]
[902] ./.storybook/config.js 638 bytes {0} [built]
[966] ./client/src (/bundle.scss|[A-Za-z]-story.jsx?)$ 435 bytes {0} [built]
[1128] ../campaign-admin/client/src (/bundle.scss|[A-Za-z]-story.jsx?)$ 185 bytes {0} [built]
[1132] ../cms/client/src (/bundle.scss|[A-Za-z]-story.jsx?)$ 185 bytes {0} [built]
+ 1120 hidden modules

WARNING in ../asset-admin/client/src/components/BackButton/tests/BackButton-story.js
Module build failed: ReferenceError: Unknown plugin "transform-object-rest-spread" specified in "D:\dev\my-project\www\vendor\silverstripe\asset-admin\package.json" at 0, attempted to resolve

relative to "D:\dev\my-project\www\vendor\silverstripe\asset-admin"
at D:\dev\my-project\www\vendor\silverstripe\admin\node_modules\babel-core\lib\transformation\file\options\option-manager.js:180:17
at Array.map (native)
at Function.normalisePlugins (D:\dev\my-project\www\vendor\silverstripe\admin\node_modules\babel-core\lib\transformation\file\options\option-manager.js:158:20)
at OptionManager.mergeOptions (D:\dev\my-project\www\vendor\silverstripe\admin\node_modules\babel-core\lib\transformation\file\options\option-manager.js:234:36)
at OptionManager.init (D:\dev\my-project\www\vendor\silverstripe\admin\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12)
at File.initOptions (D:\dev\my-project\www\vendor\silverstripe\admin\node_modules\babel-core\lib\transformation\file\index.js:212:65)
at new File (D:\dev\my-project\www\vendor\silverstripe\admin\node_modules\babel-core\lib\transformation\file\index.js:135:24)
at Pipeline.transform (D:\dev\my-project\www\vendor\silverstripe\admin\node_modules\babel-core\lib\transformation\pipeline.js:46:16)
at transpile (D:\dev\my-project\www\vendor\silverstripe\admin\node_modules\babel-loader\lib\index.js:50:20)
at D:\dev\my-project\www\vendor\silverstripe\admin\node_modules\babel-loader\lib\fs-cache.js:118:18
@ ../asset-admin/client/src (/bundle.scss|[A-Za-z]-story.jsx?)$
@ ./.storybook/config.js
@ 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 ./.st

orybook/config.js

WARNING in ../asset-admin/client/src/components/GalleryItem/tests/GalleryItem-story.js
Module build failed: ReferenceError: Unknown plugin "transform-object-rest-spread" specified in "D:\dev\my-project\www\vendor\silverstripe\asset-admin\package.json" at 0, attempted to resolve

relative to "D:\dev\my-project\www\vendor\silverstripe\asset-admin"
at D:\dev\my-project\www\vendor\silverstripe\admin\node_modules\babel-core\lib\transformation\file\options\option-manager.js:180:17
at Array.map (native)
at Function.normalisePlugins (D:\dev\my-project\www\vendor\silverstripe\admin\node_modules\babel-core\lib\transformation\file\options\option-manager.js:158:20)
at OptionManager.mergeOptions (D:\dev\my-project\www\vendor\silverstripe\admin\node_modules\babel-core\lib\transformation\file\options\option-manager.js:234:36)
at OptionManager.init (D:\dev\my-project\www\vendor\silverstripe\admin\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12)
at File.initOptions (D:\dev\my-project\www\vendor\silverstripe\admin\node_modules\babel-core\lib\transformation\file\index.js:212:65)
at new File (D:\dev\my-project\www\vendor\silverstripe\admin\node_modules\babel-core\lib\transformation\file\index.js:135:24)
at Pipeline.transform (D:\dev\my-project\www\vendor\silverstripe\admin\node_modules\babel-core\lib\transformation\pipeline.js:46:16)
at transpile (D:\dev\my-project\www\vendor\silverstripe\admin\node_modules\babel-loader\lib\index.js:50:20)
at D:\dev\my-project\www\vendor\silverstripe\admin\node_modules\babel-loader\lib\fs-cache.js:118:18
@ ../asset-admin/client/src (/bundle.scss|[A-Za-z]-story.jsx?)$
@ ./.storybook/config.js
@ 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 ./.st

orybook/config.js

ERROR in ./client/src/font/fonts/silverstripe.ttf
Module parse failed: Unexpected character ' ' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ ./node_modules/css-loader?{"sourceMap":true,"minimize":true,"discardComments":true}!./node_modules/postcss-loader/lib?{"sourceMap":true,"plugins":[null]}!./node_modules/resolve-url-loader!./node_mo

dules/sass-loader/lib/loader.js?{"includePaths":["D://dev//my-project//www//vendor//silverstripe//admin//client//src//styles","D://dev//my-project//www//vendor//silverstripe//admin//vendor//silver

stripe//admin//client//src//styles","D://dev//my-project//www//vendor//silverstripe//admin//client//src//styles","D://dev//my-project//www//vendor//silverstripe//admin//client//src//styles"],"sour

ceMap":true}!./client/src/styles/bundle.scss 11:173893-173936
@ ./client/src/styles/bundle.scss
@ ./client/src (/bundle.scss|[A-Za-z]-story.jsx?)$
@ ./.storybook/config.js
@ 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 ./.st

orybook/config.js

ERROR in ./client/src/font/fonts/silverstripe.woff
Module parse failed: Unexpected character ' ' (1:8)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ ./node_modules/css-loader?{"sourceMap":true,"minimize":true,"discardComments":true}!./node_modules/postcss-loader/lib?{"sourceMap":true,"plugins":[null]}!./node_modules/resolve-url-loader!./node_mo

dules/sass-loader/lib/loader.js?{"includePaths":["D://dev//my-project//www//vendor//silverstripe//admin//client//src//styles","D://dev//my-project//www//vendor//silverstripe//admin//vendor//silver

stripe//admin//client//src//styles","D://dev//my-project//www//vendor//silverstripe//admin//client//src//styles","D://dev//my-project//www//vendor//silverstripe//admin//client//src//styles"],"sour

ceMap":true}!./client/src/styles/bundle.scss 11:173810-173854
@ ./client/src/styles/bundle.scss
@ ./client/src (/bundle.scss|[A-Za-z]-story.jsx?)$
@ ./.storybook/config.js
@ 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 ./.st

orybook/config.js

ERROR in ./client/src/font/fonts/silverstripe.eot
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ ./node_modules/css-loader?{"sourceMap":true,"minimize":true,"discardComments":true}!./node_modules/postcss-loader/lib?{"sourceMap":true,"plugins":[null]}!./node_modules/resolve-url-loader!./node_mo

dules/sass-loader/lib/loader.js?{"includePaths":["D://dev//my-project//www//vendor//silverstripe//admin//client//src//styles","D://dev//my-project//www//vendor//silverstripe//admin//vendor//silver

stripe//admin//client//src//styles","D://dev//my-project//www//vendor//silverstripe//admin//client//src//styles","D://dev//my-project//www//vendor//silverstripe//admin//client//src//styles"],"sour

ceMap":true}!./client/src/styles/bundle.scss 11:173646-173689 11:173715-173758
@ ./client/src/styles/bundle.scss
@ ./client/src (/bundle.scss|[A-Za-z]-story.jsx?)$
@ ./.storybook/config.js
@ 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 ./.st

orybook/config.js

@NightJar
Copy link
Contributor

Can confirm.

@NightJar
Copy link
Contributor

Looking through the error log I see references to #426 - perhaps the same cause.

@raissanorth
Copy link
Contributor

Also in MacOS:

admin $ yarn pattern-lib
yarn run v1.5.1
$ yarn && start-storybook -p 6006
[1/5] 🔍  Validating package.json...
[2/5] 🔍  Resolving packages...
[3/5] 🚚  Fetching packages...
[4/5] 🔗  Linking dependencies...
warning " > [email protected]" has unmet peer dependency "jquery@>=3.0.0".
warning " > [email protected]" has unmet peer dependency "popper.js@^1.11.0".
warning " > @storybook/[email protected]" has unmet peer dependency "@storybook/addons@^3.3.0".
warning " > @storybook/[email protected]" has unmet peer dependency "babel-core@^6.26.0 || ^7.0.0-0".
warning "@storybook/react > @storybook/ui > [email protected]" has incorrect peer dependency "react@^15.5.4 || ^16.0.0".
warning "@storybook/react > @storybook/ui > [email protected]" has incorrect peer dependency "react-dom@^15.5.4 || ^16.0.0".
[5/5] 📃  Building fresh packages...
success Saved lockfile.
info @storybook/react v3.3.15
info 
Failed to load ./.env.
/Users/raissa/dev/ss4/vendor/silverstripe/admin/node_modules/@storybook/react/dist/server/config.js:31
    throw err;
    ^

Error: => Create a storybook config file in "./.storybook/config.js".
    at exports.default (/Users/raissa/dev/ss4/vendor/silverstripe/admin/node_modules/@storybook/react/dist/server/config.js:30:15)
    at exports.default (/Users/raissa/dev/ss4/vendor/silverstripe/admin/node_modules/@storybook/react/dist/server/middleware.js:19:37)
    at Object.<anonymous> (/Users/raissa/dev/ss4/vendor/silverstripe/admin/node_modules/@storybook/react/dist/server/index.js:153:34)
    at Module._compile (module.js:577:32)
    at Object.Module._extensions..js (module.js:586:10)
    at Module.load (module.js:494:32)
    at tryModuleLoad (module.js:453:12)
    at Function.Module._load (module.js:445:3)
    at Module.require (module.js:504:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/raissa/dev/ss4/vendor/silverstripe/admin/node_modules/@storybook/react/bin/index.js:3:1)
    at Module._compile (module.js:577:32)
    at Object.Module._extensions..js (module.js:586:10)
    at Module.load (module.js:494:32)
    at tryModuleLoad (module.js:453:12)
    at Function.Module._load (module.js:445:3)
error An unexpected error occurred: "Command failed.
Exit code: 1
Command: sh
Arguments: -c yarn && start-storybook -p 6006
Directory: /Users/raissa/dev/ss4/vendor/silverstripe/admin
Output:
".
info If you think this is a bug, please open a bug report with the information provided in "/Users/raissa/dev/ss4/vendor/silverstripe/admin/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

@raissanorth
Copy link
Contributor

Although seems to be a different error, complaining about missing configuration files - which there seems to be no documentation about setting up.

@chillu
Copy link
Member

chillu commented Mar 26, 2018

Did you run yarn on admin, cms, campaign-admin, asset-admin modules? You need all of these before the pattern lib works.

@NightJar
Copy link
Contributor

NightJar commented Mar 26, 2018

Things work better now, thanks @chillu
However you'll need to start the storybook with: node_modules/.bin/start-storybook -p 6006 @wernerkrauss

At this point it's bringing me to a loading webpage, but then that page is filled with errors instead of patterns. My (shell) console is loaded up with ERRORs about failed parsing due to unexpected characters in the font files, which is reflected the resulting page served to the browser.

This could be an unstable head thing though, unsure.

silverstripe/admin                        1.1.x-dev 4166209
silverstripe/asset-admin                  1.1.x-dev 4e88f38
silverstripe/campaign-admin               1.1.x-dev ce283d1
silverstripe/cms                          4.1.x-dev 7dea009
ERROR in ./client/src/font/fonts/silverstripe.ttf
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)

@NightJar
Copy link
Contributor

So, this actually extends further than here (checking out the pattern library) - building the UI for admin also does not complete successfully on Windows.
See #495

@NightJar
Copy link
Contributor

Good news @wernerkrauss - Al Twohill has fixed this for us in silverstripe/webpack-config#24 :)

Ingo's caveat at #465 (comment) is still important though, as is adapting the commands to run in a windows shell where applicable.

But it builds, and you can run it :)

@robbieaverill
Copy link
Contributor

I wouldn't describe that as a caveat, but a necessary step in order to get the pattern library running. If you think it should be a workaround of some sort/caveat, perhaps we need to make it clearer in the documentation? It's the same for macOS users too of course

@NightJar
Copy link
Contributor

NightJar commented Jul 31, 2018

I described it as a 'caveat' here as there has already been confusion enough to mentioned it above. I've not read the recent documentation, so didn't want to comment directly to that effect. If it's not a prominent in the docs (for pattern-lib), then it should be - otherwise it leads to confusion such as above and #426

@robbieaverill
Copy link
Contributor

I don't think #426 is related, but the documentation I could find via Google definitely doesn't mention needing to install dev deps in each of these modules. I'll raise a new issue to ensure it gets updated.

@NightJar
Copy link
Contributor

Hmm, description indicated that it might be in

If I run yarn from asset-admin then re-run this in admin, it works.

But a new issue about docs sounds the best solution really :)

@maxime-rainville
Copy link
Contributor

maxime-rainville commented Aug 28, 2018

We've got a separate issue for handling the doc update #586 to include the info as per Ingo's comment.

From @NightJar, I understand that this is now building on Windows. I'll close this for now, but do let me know if it needs to be reopened.

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

No branches or pull requests

6 participants