How to install Material Design Lite Documentation Offline? - node.js

I have some problem while installing a documentation for Material Design Lite locally. I have following a command in this file:
git clone https://github.com/google/material-design-lite
cd material-design-lite
npm install && npm install -g gulp
gulp all && gulp serve
When run gulp all there is an error:
root#c54a089ac69c:/home/material-design-lite# gulp all
[21:18:38] Requiring external module babel-register
[21:18:42] Using gulpfile /home/material-design-lite/gulpfile.babel.js
[21:18:42] Starting 'clean'...
[21:18:42] Finished 'clean' after 106 ms
[21:18:42] Starting 'all'...
[21:18:42] Starting 'lint:aux'...
[21:18:45]
/home/material-design-lite/gulpfile.babel.js
136:1 warning Unexpected 'todo' comment no-warning-comments
807:3 warning Unexpected 'todo' comment no-warning-comments
✖ 2 problems (0 errors, 2 warnings)
[21:18:45] Finished 'lint:aux' after 2.39 s
[21:18:45] Starting 'styletemplates'...
[21:18:49] styles all files 1.07 MB
[21:18:49] Finished 'styletemplates' after 4.04 s
[21:18:49] Starting 'styles-grid'...
[21:18:49] Starting 'styles'...
[21:18:49] styles-grid all files 17.77 kB
[21:18:49] Finished 'styles-grid' after 187 ms
[21:18:50] styles all files 714.08 kB
[21:18:50] Finished 'styles' after 1.39 s
[21:18:50] Starting 'styles:gen'...
[21:18:52] Finished 'styles:gen' after 2.36 s
[21:18:52] Starting 'lint:sources'...
[21:18:56]
/home/material-design-lite/src/mdlComponentHandler.js
232:49 error Properties shouldn't be quoted as all quotes are redundant quote-props
366:51 error Properties shouldn't be quoted as all quotes are redundant quote-props
/home/material-design-lite/src/checkbox/checkbox.js
123:5 warning Unexpected 'todo' comment no-warning-comments
/home/material-design-lite/src/icon-toggle/icon-toggle.js
119:5 warning Unexpected 'todo' comment no-warning-comments
/home/material-design-lite/src/radio/radio.js
133:5 warning Unexpected 'todo' comment no-warning-comments
/home/material-design-lite/src/switch/switch.js
122:5 warning Unexpected 'todo' comment no-warning-comments
/home/material-design-lite/src/tabs/tabs.js
88:7 warning Do not use 'new' for side effects no-new
/home/material-design-lite/src/textfield/textfield.js
273:11 warning Unexpected 'todo' comment no-warning-comments
/home/material-design-lite/src/layout/layout.js
520:11 warning Do not use 'new' for side effects no-new
570:3 error Block must not be padded by blank lines padded-blocks
✖ 10 problems (3 errors, 7 warnings)
[21:18:56] 'lint:sources' errored after 3.59 s
[21:18:56] ESLintError in plugin 'gulp-eslint'
Message:
Failed with 3 errors
[21:18:56] 'all' errored after 14 s
[21:18:56] Error in plugin 'run-sequence'
Message:
An error occured in task 'lint:sources'.
But, when I serve it with gulp serve, it's run but just displaying this:
It's Just displaying the files! How to generate offline documentation for material-design-lite? Any ideas? Thanks.
Thank you;
PS:
I run this with on Docker with NodeJS Container.
Material Design Lite Website: https://getmdl.io

I have never try to clone the repo, but with this way i can get the offline docs. Only using wget tools.
wget -mkEpnp https://getmdl.io
And voila, you have the copies of website in your desktop.

As mentioned in the GitHub issue referenced here
You need to checkout with Unix style line endings. This process is detailed in the README.
Windows users, if you have trouble compiling due to line endings then make sure you configure git to checkout the repository with lf (unix) line endings. This can be achieved by setting core.eol.
git config core.eol lf
git config core.autocrlf input
git rm --cached -r .
git reset --hard
The other error
error Properties shouldn't be quoted as all quotes are redundant quote-props
has been fixed for the versions greater than mdl-1.1 as mentioned in the issues here
Hope it helps! Cheers !

Related

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): HookWebpackError:

Need desperate help! :alert:
I have been trying to debug an app for the last 3 days and now I’m very stuck here.It works on my localhost but brakes on production. Mainly, my biggest mistake was that I’ve coded a lot on my machine besides sending it to production little by little. I’ve already moved from errors to errors but with no final success. I’ve installed webpack at one point and I think I shouldn’t but now I can’t get rid of it. When I try to
rake assets:precompile
that’s what I get:
Running via Spring preloader in process 82485
Calling DidYouMean::SPELL_CHECKERS.merge!(error_name => spell_checker)' has been deprecated. Please call DidYouMean.correct_error(error_name, spell_checker)' instead.
yarn install v1.22.19
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/5] 🔍 Validating package.json...
[2/5] 🔍 Resolving packages...
success Already up-to-date.
✨ Done in 0.27s.
Calling DidYouMean::SPELL_CHECKERS.merge!(error_name => spell_checker)' has been deprecated. Please call DidYouMean.correct_error(error_name, spell_checker)' instead.
yarn run v1.22.19
$ webpack --config ./config/webpack/webpack.config.js
assets by status 0 bytes [cached] 1 asset
Entrypoint application =
Entrypoint custom = custom.js
orphan modules 39 bytes [orphan] 1 module
./app/assets/stylesheets/application.scss 39 bytes [built] [code generated] [1 error]
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
ERROR in ./app/assets/stylesheets/application.scss (./app/assets/stylesheets/application.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./app/assets/stylesheets/application.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
╷
10 │ #import "font-awesome";
│ ^^^^^^^^^^^^^^
╵
app/assets/stylesheets/application.scss 10:9 root stylesheet
# ./app/assets/stylesheets/application.scss
ERROR in ./app/assets/stylesheets/application.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
╷
10 │ #import "font-awesome";
│ ^^^^^^^^^^^^^^
╵
app/assets/stylesheets/application.scss 10:9 root stylesheet
at tryRunOrWebpackError (/Users/ju-arrighi/code/Ju-Arrighi/utero/node_modules/webpack/lib/HookWebpackError.js:88:9)
at webpack_require_module (/Users/ju-arrighi/code/Ju-Arrighi/utero/node_modules/webpack/lib/Compilation.js:5055:12)
at webpack_require (/Users/ju-arrighi/code/Ju-Arrighi/utero/node_modules/webpack/lib/Compilation.js:5012:18)
at /Users/ju-arrighi/code/Ju-Arrighi/utero/node_modules/webpack/lib/Compilation.js:5083:20
at symbolIterator (/Users/ju-arrighi/code/Ju-Arrighi/utero/node_modules/neo-async/async.js:3485:9)
at done (/Users/ju-arrighi/code/Ju-Arrighi/utero/node_modules/neo-async/async.js:3527:9)
at Hook.eval [as callAsync] (eval at create (/Users/ju-arrighi/code/Ju-Arrighi/utero/node_modules/tapable/lib/HookCodeFactory.js:33:10), :15:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/ju-arrighi/code/Ju-Arrighi/utero/node_modules/tapable/lib/Hook.js:18:14)
at /Users/ju-arrighi/code/Ju-Arrighi/utero/node_modules/webpack/lib/Compilation.js:4990:43
at symbolIterator (/Users/ju-arrighi/code/Ju-Arrighi/utero/node_modules/neo-async/async.js:3482:9)
-- inner error --
Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
╷
10 │ #import "font-awesome";
│ ^^^^^^^^^^^^^^
╵
app/assets/stylesheets/application.scss 10:9 root stylesheet
at Object. (/Users/ju-arrighi/code/Ju-Arrighi/utero/node_modules/css-loader/dist/cjs.js!/Users/ju-arrighi/code/Ju-Arrighi/utero/node_modules/sass-loader/dist/cjs.js!/Users/ju-arrighi/code/Ju-Arrighi/utero/app/assets/stylesheets/application.scss:1:7)
at /Users/ju-arrighi/code/Ju-Arrighi/utero/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:441:11
at Hook.eval [as call] (eval at create (/Users/ju-arrighi/code/Ju-Arrighi/utero/node_modules/tapable/lib/HookCodeFactory.js:19:10), :7:1)
at Hook.CALL_DELEGATE [as _call] (/Users/ju-arrighi/code/Ju-Arrighi/utero/node_modules/tapable/lib/Hook.js:14:14)
at /Users/ju-arrighi/code/Ju-Arrighi/utero/node_modules/webpack/lib/Compilation.js:5057:39
at tryRunOrWebpackError (/Users/ju-arrighi/code/Ju-Arrighi/utero/node_modules/webpack/lib/HookWebpackError.js:83:7)
at webpack_require_module (/Users/ju-arrighi/code/Ju-Arrighi/utero/node_modules/webpack/lib/Compilation.js:5055:12)
at webpack_require (/Users/ju-arrighi/code/Ju-Arrighi/utero/node_modules/webpack/lib/Compilation.js:5012:18)
at /Users/ju-arrighi/code/Ju-Arrighi/utero/node_modules/webpack/lib/Compilation.js:5083:20
at symbolIterator (/Users/ju-arrighi/code/Ju-Arrighi/utero/node_modules/neo-async/async.js:3485:9)
Generated code for /Users/ju-arrighi/code/Ju-Arrighi/utero/node_modules/css-loader/dist/cjs.js!/Users/ju-arrighi/code/Ju-Arrighi/utero/node_modules/sass-loader/dist/cjs.js!/Users/ju-arrighi/code/Ju-Arrighi/utero/app/assets/stylesheets/application.scss
1 | throw new Error("Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nSassError: Can't find stylesheet to import.\n ╷\n10 │ #import "font-awesome";\n │ ^^^^^^^^^^^^^^\n ╵\n app/assets/stylesheets/application.scss 10:9 root stylesheet");
ERROR in application
Module not found: Error: Can't resolve './app/assets/javascripts/application.js' in '/Users/ju-arrighi/code/Ju-Arrighi/utero'
ERROR in custom
Module not found: Error: Can't resolve './app/assets/stylesheets/custom.scss' in '/Users/ju-arrighi/code/Ju-Arrighi/utero'
3 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.
webpack 5.74.0 compiled with 4 errors and 1 warning in 4098 ms
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
rake aborted!
jsbundling-rails: Command build failed, ensure yarn is installed and yarn build runs without errors
internal:/Users/ju-arrighi/.rbenv/versions/3.1.2/lib/ruby/3.1.0/rubygems/core_ext/kernel_require.rb:85:in require' <internal:/Users/ju-arrighi/.rbenv/versions/3.1.2/lib/ruby/3.1.0/rubygems/core_ext/kernel_require.rb>:85:in require'
-e:1:in `'
Tasks: TOP => assets:precompile => javascript:build
(See full trace by running task with --trace)

How do I make Gatsby + netlify website work on my machine?

I deployed an app with netlify + gatsby default options and then I cloned that repo, so I can edit the style. The problem is that it doesn't work on my machine, the following error persists:
2 problems (0 errors, 2 warnings)
ERROR #98123 WEBPACK
Generating development JavaScript bundle failed
$black: #2b2523;
^
Invalid CSS after "...black: #2b2523;": expected 1 selector or at-rule,
was ".navbar .navbar-men"
in /Users/micazev/Documents/ecominimalismo.com/src/components/all.sass
(line 11, column 17)
File: src/components/all.sass
failed Building development bundle - 22.833s
ERROR Failed to compile with 1 errors 14:39:49
⠀
error in ./src/components/all.sass
⠀
Module build failed (from
./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from
./node_modules/sass-loader/dist/cjs.js):
$black: #2b2523;
^
Invalid CSS after "...black: #2b2523;": expected 1 selector or at-rule,
was ".navbar .navbar-men"
in /Users/micazev/Documents/ecominimalismo.com/src/components/all.sass
(line 11, column 17)
at /Users/micazev/Documents/ecominimalismo.com/node_modules/webpack/lib/Norm
alModule.js:316:20
at /Users/micazev/Documents/ecominimalismo.com/node_modules/loader-runner/li
b/LoaderRunner.js:367:11
at /Users/micazev/Documents/ecominimalismo.com/node_modules/loader-runner/li
b/LoaderRunner.js:233:18
at context.callback (/Users/micazev/Documents/ecominimalismo.com/node_module
s/loader-runner/lib/LoaderRunner.js:111:13)
at Object.callback (/Users/micazev/Documents/ecominimalismo.com/node_modules
/sass-loader/dist/index.js:89:7)
at Object.done [as callback] (/Users/micazev/Documents/ecominimalismo.com/no
de_modules/neo-async/async.js:8069:18)
at options.error (/Users/micazev/Documents/ecominimalismo.com/node_modules/n
ode-sass/lib/index.js:294:32)
# ./src/components/Layout.js 17:0-20
# ./src/templates/blog-post.js
# ./src/cms/preview-templates/BlogPostPreview.js
# ./src/cms/cms.js
# multi ./node_modules/gatsby-plugin-netlify-cms/cms.js
./node_modules/gatsby-plugin-netlify-cms/cms-identity.js ./src/cms/cms.js
My repo is: https://github.com/micazev/ecominimalismo.com
I don't know what other info I could give. Please, help.
According to some threads about that starter, there's a bug about the Sass loaders that causes this issue. You have many solutions provided in this GitHub thread:
Add options to the gatsby-plugin-sass:
{
resolve: 'gatsby-plugin-sass',
options: {
indentedSyntax: true
}
}
This will allow the loader to understand the indented syntax of Sass.
Changing the extension from .sass to .scss, changing also all the references in the project: you'll need to add semicolons (;) and braces ({}) when needed.
Obviously, the second one is easier and safer.

Error: Debug Failure. Output generation failed when running formatjs extract

When running formatjs extract this is what we got. From the stack trace it seems that the issue is from formatjs themselves. Feel like I am stuck on what the issue is here.
$ formatjs extract './src/**/*.{js,ts,tsx}' --out-file './src/i18n/messages/messages.json' --extract-from-format-message-call --throws
Error: Debug Failure. Output generation failed
at Object.transpileModule (/Users/.../node_modules/#formatjs/cli/node_modules/typescript/lib/typescript.js:126894:29)
at processFile (/Users/.../node_modules/#formatjs/cli/src/extract.js:104:39)
at /Users/.../node_modules/#formatjs/cli/src/extract.js:163:59
at step (/Users/.../node_modules/#formatjs/cli/src/extract.js:44:23)
at Object.next (/Users/.../node_modules/#formatjs/cli/src/extract.js:25:53)
at fulfilled (/Users/.../node_modules/#formatjs/cli/src/extract.js:16:58)
error Command failed with exit code 1.
You might be processing a file that needs to be ignored using --ignore. Can you upgrade to the latest version and re-run your command? Long added the filename in this commit https://github.com/formatjs/formatjs/commit/ceb0bf8a58c13fe6811bc35191018ee1c431484a
Reference: https://github.com/formatjs/formatjs/issues/2044

gulp trust-dev-cert without error, but access the page still failed

After I upgrade my Nodejs to v9.3.0 and NPM to 5.5.1, failed to access the gulp serve server. The browser show the unsafe TLS security error.
I have removed ~.gcb-serve-data/, and run the gulp trust-dev-cert without error, but I cannot find the cert in my trust certificates, I am working in Win10.
Following is the **gulp trust-dev-cert" output:
[18:30:14] Starting gulp
[18:30:14] Starting 'trust-dev-cert'...
[18:30:14] Starting subtask 'configure-sp-build-rig'...
[18:30:14] Finished subtask 'configure-sp-build-rig' after 7.48 ms
[18:30:14] Starting subtask 'trust-cert'...
[18:30:14] Finished subtask 'trust-cert' after 79 ms
[18:30:14] Finished 'trust-dev-cert' after 90 ms
[18:30:14] ==================[ Finished ]==================
gulp trust-dev-cert must be executed IN the project folder.

EPERM during gulp commands

I have a gulpfile that I am using together with Browserify, Babelify and BrowserSync to implement my build workflow. However, I am constantly having problems with EPERM errors in Node.js.
I first had an error in my gulp clean task that used rimraf in order to clean my dist directory. The task would occasionaly throw an error (I was not able to reproduce the error 100% of attempts though). The error was an EPERM that complained about the unlink action for ./dist/app.js. I tried using del instead of rimraf and for some reason it helped.
However, if I run gulp watch and something changes , there is very often this error now:
(node:10740) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
[22:52:35] Using gulpfile D:\Workspace\milestones\gulpfile.js
[22:52:35] Starting 'clean'...
[22:52:35] Finished 'clean' after 4.2 ms
[22:52:35] Starting 'build-persistent'...
[22:52:37] Finished 'build-persistent' after 1.55 s
[22:52:37] Starting 'watch'...
[22:52:37] Finished 'watch' after 92 ms
[BS] Local URL: http://localhost:3000
[BS] External URL: http://192.168.0.108:3000
[BS] Serving files from: ./
[22:52:48] Starting 'clean'...
[22:52:48] Finished 'clean' after 2.77 ms
[22:52:48] Starting 'build-persistent'...
stream.js:74
throw er; // Unhandled stream error in pipe.
^
Error: EPERM: operation not permitted, open 'D:\Workspace\milestones\dist\app.js'
at Error (native)
The full gulpfile may be seen in the gist here.
I am running Windows 10.
Update: The issue seems to be absent when running gulp build and therefore might be caused by BrowserSync.

Resources