- This topic has 16 replies, 3 voices, and was last updated 5 years, 8 months ago by
.
-
Posts
-
Hey Zac,
thanks for your great Tutorial. I really like your videos. And most of the time I thought I understand your explanation. But actually I don´t get it.
Normaly I´m a PHP and HTML Webdeveloper with a bit jQuery experience. So for me it is hard to understand some thinks you are talking about.I installed atom as my Editor, node.js on my Windows-PC (with the exe-file from nodejs.org), unzip the example-Plugin and add it as a Project in atom. But when I try the commond “npm install” in the platformio-ide-terminal, I only get errors.
But the most frustrading think is, that I don´t understand, why I do the steps.
So here a view questions:
1.) Can I run the steps without a local WordPress installation? It seems as you put your folder from github to the Plugin-directory from WP. Right?
2.) Can I wrote a Gutenberg-Block without the node.js-Steps?
3.) Do you know a more “Basic”-Tutorial to start a Gutenberg-Block-Plugin?I know, I’m a hardship but I hope you can help me to learn Gutenberg.
Many Thanks and best regards
MarcusHi Marcus!
These are all common issues when working with JavaScript build tools for the first time.
First we need to make sure Node and NPM are actually installed properly.
What happens runs “npm -v” in the command line?
Once we make sure that is working properly, running npm install should work properly in the downloaded example plugin for the course. This plugin does get installed directly into WordPress like any other plugin and you will want a local copy of WordPress running to follow along.
Lets get these two steps running and go from there with your other questions. You can find some work around to not using build tools, but it will be best if you take the time to learn a bit now as most real Gutenberg development is going to require some sort of build process.
Hope that helps, let me know how these first steps go.
Hi Zac,
thank you for your answer 🙂 In the last days I learned lots of basics about the work with nodejs and react.
I installed a local WP-Server and getting nodejs run. Because I´m working from a preconfigured PC form my company, I have some problems by installing thinks. Whe I installed nodejs, the setup haven´t set the environment variable. That was the main problem.Now I have nodejs in version 5.6.0 running. But when I try to install npm in the plugin I get these errors:
jsforwp-example-blocks> npm install npm WARN jsforwp-blocks@1.0.0 No description npm WARN jsforwp-blocks@1.0.0 No repository field.I read these forum-post https://javascriptforwp.com/forums/topic/warnings-errors-on-npm-install-and-npm-run-dev/ but not really understand anything at all. Did you get a “best practice way” to fix this problem?
thanks a lot for your help.
I do cover this in depth in my Learn Vanilla JavaScript Course but we’ll try to get you up and running here.
It sounds like you already have things installed.
So, download the plugin repo, put it inside of your plugin folder, activate the plugin and it works. Right?
Then when you open up the folder for that plugin in your code editor or conmand line and run npm install nothing happens except those two warnings? Are you in the folder that has a package.json file there? It will need that for npm install to work so it you’re in the wrong directory that may be the problem too.
Hey Zac,
thank you for your patience. As you said I do the following:
a.) I install nodejs on my PC
b.) I make a local WordPress-installation
c.) I download the Plugin from github (again), install and activate itAnd now the following thinks happened:
1.) When I try your Example-Blocks on my local WordPress-installation, the only working Block is the “Static Block”. The other Blocks show following error “This block has encountered an error and cannot be previewed.”
2.) On Atom I open the Plugin-Folder (the folder with the package.json in it) and try “npm install”. Than I get the following code:PS C:\Wordpress\apps\wordpress\htdocs\wp-content\plugins\jsforwp-example-blocks> npm install npm WARN jsforwp-blocks@1.0.0 No description npm WARN jsforwp-blocks@1.0.0 No repository field. up to date in 1.098s PS C:\Wordpress\apps\wordpress\htdocs\wp-content\plugins\jsforwp-example-blocks>Because of the missing description and repository field in the package.json , I add these fields manually.
After this I try “npm run dev” and get the following errors:jsforwp-blocks@1.0.0 dev C:\Wordpress\apps\wordpress\htdocs\wp-content\plugins\jsforwp-example-blocks > cross-env BABEL_ENV=default webpack --watch Der Befehl "cross-env" ist entweder falsch geschrieben oder konnte nicht gefunden werden. (The command "cross-env" is not written correctly or couldn´t be found.) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! jsforwp-blocks@1.0.0 dev: <code>cross-env BABEL_ENV=default webpack --watch</code> npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the jsforwp-blocks@1.0.0 dev script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm WARN Local package.json exists, but node_modules missing, did you mean to install?Thanks for your help.
Okay, I just looked over the this “how-to-gutenberg-plugin” and there was an extra folder there. That may have been the problem.
When you download this plugin – https://github.com/zgordon/how-to-gutenberg-plugin
And install it, it will likely have a path like “../wp-content/plugins/how-to-gutenberg-plugin-master/” that is the directory you should run npm install in.I just double checked it with both plugins and it worked. Not sure what the problem may be at this point, but let me know how this goes and we’ll work it out 👍
Hi Marcus!
Another student helped me spot something that needed to be updated with the how-to-gutenberg-plugin plugin.
If you could try the process again:
1. Downloading this plugin – https://github.com/zgordon/how-to-gutenberg-plugin
2. Don’t bother installing, just open and runnpm install
3. Check to see that the node_modules folder is not empty
4. Try runningnpm run devto see if it works without error nowIf this doesn’t work I am going to send you a simple NPM project to test what the other problem may be causing this.
Also, what version of NPM and version of Node do you have?
You can run
npm --versionandnode --versionHey Zac,
I tried as you said. But same problems.
I runnpm install. A folder “node_modules” with subfolder “etc” was created. But both are empty.
npm run devleads to following output:> jsforwp-blocks@1.0.0 dev C:\***\how-to-gutenberg-plugin-master > cross-env BABEL_ENV=default webpack --watch Der Befehl "cross-env" ist entweder falsch geschrieben oder konnte nicht gefunden werden. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! jsforwp-blocks@1.0.0 dev: <code>cross-env BABEL_ENV=default webpack --watch</code> npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the jsforwp-blocks@1.0.0 dev script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\***\AppData\Roaming\npm-cache\_logs\2018-07-18T15_51_38_050Z-debug.logThis is the Content of the debug.log
0 info it worked if it ends with ok 1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe', 1 verbose cli 'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js', 1 verbose cli 'run', 1 verbose cli 'dev' ] 2 info using npm@5.6.0 3 info using node@v8.11.3 4 verbose run-script [ 'predev', 'dev', 'postdev' ] 5 info lifecycle jsforwp-blocks@1.0.0~predev: jsforwp-blocks@1.0.0 6 info lifecycle jsforwp-blocks@1.0.0~dev: jsforwp-blocks@1.0.0 7 verbose lifecycle jsforwp-blocks@1.0.0~dev: unsafe-perm in lifecycle true 8 verbose lifecycle jsforwp-blocks@1.0.0~dev: PATH: C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\zeug\how-to-gutenberg-plugin-master\node_modules\.bin;C:\Program Files (x86)\Intel\iCLS Client\;C:\Program Files\Intel\iCLS Client\;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Program Files\Intel\WiFi\bin\;C:\Program Files\Common Files\Intel\WirelessCommon\;C:\Program Files\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files\nodejs\;C:\Users\ScheibMadm\AppData\Roaming\npm;C:\Users\ScheibMadm\AppData\Local\atom\bin 9 verbose lifecycle jsforwp-blocks@1.0.0~dev: CWD: C:\***\how-to-gutenberg-plugin-master 10 silly lifecycle jsforwp-blocks@1.0.0~dev: Args: [ '/d /s /c', 'cross-env BABEL_ENV=default webpack --watch' ] 11 silly lifecycle jsforwp-blocks@1.0.0~dev: Returned: code: 1 signal: null 12 info lifecycle jsforwp-blocks@1.0.0~dev: Failed to exec dev script 13 verbose stack Error: jsforwp-blocks@1.0.0 dev: <code>cross-env BABEL_ENV=default webpack --watch</code> 13 verbose stack Exit status 1 13 verbose stack at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:285:16) 13 verbose stack at emitTwo (events.js:126:13) 13 verbose stack at EventEmitter.emit (events.js:214:7) 13 verbose stack at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14) 13 verbose stack at emitTwo (events.js:126:13) 13 verbose stack at ChildProcess.emit (events.js:214:7) 13 verbose stack at maybeClose (internal/child_process.js:925:16) 13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5) 14 verbose pkgid jsforwp-blocks@1.0.0 15 verbose cwd C:\zeug\how-to-gutenberg-plugin-master 16 verbose Windows_NT 6.1.7601 17 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "dev" 18 verbose node v8.11.3 19 verbose npm v5.6.0 20 error code ELIFECYCLE 21 error errno 1 22 error jsforwp-blocks@1.0.0 dev: <code>cross-env BABEL_ENV=default webpack --watch</code> 22 error Exit status 1 23 error Failed at the jsforwp-blocks@1.0.0 dev script. 23 error This is probably not a problem with npm. There is likely additional logging output above. 24 verbose exit [ 1, true ]I’ve checked the npm- and the node-Version:
npm: 5.6.0
node: v8.11.3I work with a windows 7 PC but have the same problems with a windows 10 PC.
Thanks a lot.
Hey Zac,
how are you?
Do you have a idea, what I can try to get it work? I have no new idea :-/Thanks a lot.
Okay, this is a little unusual but could we hop on a call to resolve this? There is some troubleshooting I want to try that would be easier on a call together.
javascriptforwp.com/chat
Do any of those times work for you by chance? If not, contact me in the chat app on the page here and we’ll schedule a time 👍🏻
I am having problems at the same point, getting similar errors. I’m on a Mac. NPM 6.2.0. NODE 10.7.0.
Error on running npm install:
WARN tarball tarball data for hoek@2.16.3 (sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0=) seems to be corrupted. Trying one more time.
WARN tarball tarball data for hoek@2.16.3 (sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0=) seems to be corrupted. Trying one more time.
npm WARN jsforwp-blocks@2.0.0 No repository field.npm ERR! code EINTEGRITY
npm ERR! Verification failed while extracting hoek@2.16.3:
npm ERR! Verification failed while extracting hoek@2.16.3:
npm ERR! sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0= integrity checksum failed when using sha1: wanted sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0= but got sha512-QLg82fGkfnJ/4iy1xZ81/9SIJiq1NGFUMGs6ParyjBZr6jW2Ufj/snDqTHixNlHdPNwN2RLVD0Pi3igeK9+JfA== sha1-ljRQKqEsRF3Vp8VzS1cruHOKrLs=. (8882 bytes)——
node_modules folder empty. Ran npm run dev and get this error:
> jsforwp-blocks@2.0.0 dev /Users/russellweller/Sites/wpblocks/wp-content/plugins/gutenberg-course-master
> cross-env BABEL_ENV=default webpack –watchsh: cross-env: command not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! jsforwp-blocks@2.0.0 dev:cross-env BABEL_ENV=default webpack --watch
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the jsforwp-blocks@2.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.Oh geez. My apologies ya’ll. I just realized this morning this was from a messed up hash in the package-lock.json file.
I just fixed it and tested with a student having the same issue. Would ya’ll mind trying again? Should hopefully work this time 👍🏼
Well, maybe not. It seems to have frozen in npm run dev:
> jsforwp-blocks@2.0.0 dev /Users/russellweller/Sites/wpblocks/wp-content/plugins/gutenberg-course-master
> cross-env BABEL_ENV=default webpack –watchWebpack is watching the files…
Hash: 45459f496af61c52f922
Version: webpack 3.12.0
Time: 3636ms
Asset Size Chunks Chunk Names
./assets/js/editor.blocks.js 473 kB 0 [emitted] [big] ./assets/js/editor.blocks
./assets/js/frontend.blocks.js 3.02 kB 1 [emitted] ./assets/js/frontend.blocks
./assets/css/blocks.style.css 5.67 kB 0 [emitted] ./assets/js/editor.blocks
./assets/css/blocks.editor.css 658 bytes 0 [emitted] ./assets/js/editor.blocks
[49] ./blocks/index.js 444 bytes {0} [built]
[50] ./blocks/i18n.js 51 bytes {0} [built]
[51] ./blocks/01-static/index.js 1.63 kB {0} [built]
[55] ./blocks/02-richtext/index.js 2.18 kB {0} [built]
[58] ./blocks/03-text-alignment-toolbar/index.js 2.73 kB {0} [built]
[60] ./blocks/04-block-alignment-toolbar/index.js 3.64 kB {0} [built]
[62] ./blocks/05-custom-toolbar/index.js 5 kB {0} [built]
[69] ./blocks/07-inspector-control-fields/index.js 3.24 kB {0} [built]
[117] ./blocks/08-form-fields/index.js 2.31 kB {0} [built]
[123] ./blocks/10-media-upload/index.js 3.65 kB {0} [built]
[126] ./blocks/11-url-input/index.js 3.99 kB {0} [built]
[128] ./blocks/11-url-input-conditional/index.js 4.18 kB {0} [built]
[130] ./blocks/12-dynamic/index.js 2.01 kB {0} [built]
[133] ./blocks/14-meta-box/index.js 2.1 kB {0} [built]
[136] ./blocks/frontend.js 33 bytes {1} [built]
+ 122 hidden modules
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/raw-loader/index.js!node_modules/postcss-loader/lib/index.js??ref–1-2!node_modules/sass-loader/lib/loader.js??ref–1-3!blocks/14-meta-box/style.scss:
[0] ./node_modules/raw-loader!./node_modules/postcss-loader/lib??ref–1-2!./node_modules/sass-loader/lib/loader.js??ref–1-3!./blocks/14-meta-box/style.scss 85 bytes {0} [built]
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/raw-loader/index.js!node_modules/postcss-loader/lib/index.js??ref–1-2!node_modules/sass-loader/lib/loader.js??ref–1-3!blocks/12-dynamic/style.scss:
[0] ./node_modules/raw-loader!./node_modules/postcss-loader/lib??ref–1-2!./node_modules/sass-loader/lib/loader.js??ref–1-3!./blocks/12-dynamic/style.scss 182 bytes {0} [built]
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/raw-loader/index.js!node_modules/postcss-loader/lib/index.js??ref–1-2!node_modules/sass-loader/lib/loader.js??ref–1-3!blocks/08-form-fields/style.scss:
[0] ./node_modules/raw-loader!./node_modules/postcss-loader/lib??ref–1-2!./node_modules/sass-loader/lib/loader.js??ref–1-3!./blocks/08-form-fields/style.scss 635 bytes {0} [built]
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/raw-loader/index.js!node_modules/postcss-loader/lib/index.js??ref–1-2!node_modules/sass-loader/lib/loader.js??ref–1-3!blocks/07-inspector-control-fields/style.scss:
[0] ./node_modules/raw-loader!./node_modules/postcss-loader/lib??ref–1-2!./node_modules/sass-loader/lib/loader.js??ref–1-3!./blocks/07-inspector-control-fields/style.scss 958 bytes {0} [built]
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/raw-loader/index.js!node_modules/postcss-loader/lib/index.js??ref–1-2!node_modules/sass-loader/lib/loader.js??ref–1-3!blocks/06-inspector-controls/style.scss:
[0] ./node_modules/raw-loader!./node_modules/postcss-loader/lib??ref–1-2!./node_modules/sass-loader/lib/loader.js??ref–1-3!./blocks/06-inspector-controls/style.scss 898 bytes {0} [built]
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/raw-loader/index.js!node_modules/postcss-loader/lib/index.js??ref–1-2!node_modules/sass-loader/lib/loader.js??ref–1-3!blocks/05-custom-toolbar/style.scss:
[0] ./node_modules/raw-loader!./node_modules/postcss-loader/lib??ref–1-2!./node_modules/sass-loader/lib/loader.js??ref–1-3!./blocks/05-custom-toolbar/style.scss 858 bytes {0} [built]
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/raw-loader/index.js!node_modules/postcss-loader/lib/index.js??ref–1-2!node_modules/sass-loader/lib/loader.js??ref–1-3!blocks/04-block-alignment-toolbar/style.scss:
[0] ./node_modules/raw-loader!./node_modules/postcss-loader/lib??ref–1-2!./node_modules/sass-loader/lib/loader.js??ref–1-3!./blocks/04-block-alignment-toolbar/style.scss 731 bytes {0} [built]
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/raw-loader/index.js!node_modules/postcss-loader/lib/index.js??ref–1-2!node_modules/sass-loader/lib/loader.js??ref–1-3!blocks/03-text-alignment-toolbar/style.scss:
[0] ./node_modules/raw-loader!./node_modules/postcss-loader/lib??ref–1-2!./node_modules/sass-loader/lib/loader.js??ref–1-3!./blocks/03-text-alignment-toolbar/style.scss 723 bytes {0} [built]
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/raw-loader/index.js!node_modules/postcss-loader/lib/index.js??ref–1-2!node_modules/sass-loader/lib/loader.js??ref–1-3!blocks/02-richtext/style.scss:
[0] ./node_modules/raw-loader!./node_modules/postcss-loader/lib??ref–1-2!./node_modules/sass-loader/lib/loader.js??ref–1-3!./blocks/02-richtext/style.scss 476 bytes {0} [built]
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/raw-loader/index.js!node_modules/postcss-loader/lib/index.js??ref–1-2!node_modules/sass-loader/lib/loader.js??ref–1-3!blocks/01-static/style.scss:
[0] ./node_modules/raw-loader!./node_modules/postcss-loader/lib??ref–1-2!./node_modules/sass-loader/lib/loader.js??ref–1-3!./blocks/01-static/style.scss 464 bytes {0} [built]
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/raw-loader/index.js!node_modules/postcss-loader/lib/index.js??ref–2-2!node_modules/sass-loader/lib/loader.js??ref–2-3!blocks/10-media-upload/editor.scss:
[0] ./node_modules/raw-loader!./node_modules/postcss-loader/lib??ref–2-2!./node_modules/sass-loader/lib/loader.js??ref–2-3!./blocks/10-media-upload/editor.scss 495 bytes {0} [built]
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/raw-loader/index.js!node_modules/postcss-loader/lib/index.js??ref–2-2!node_modules/sass-loader/lib/loader.js??ref–2-3!blocks/05-custom-toolbar/editor.scss:
[0] ./node_modules/raw-loader!./node_modules/postcss-loader/lib??ref–2-2!./node_modules/sass-loader/lib/loader.js??ref–2-3!./blocks/05-custom-toolbar/editor.scss 109 bytes {0} [built]
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/raw-loader/index.js!node_modules/postcss-loader/lib/index.js??ref–2-2!node_modules/sass-loader/lib/loader.js??ref–2-3!blocks/01-static/editor.scss:
[0] ./node_modules/raw-loader!./node_modules/postcss-loader/lib??ref–2-2!./node_modules/sass-loader/lib/loader.js??ref–2-3!./blocks/01-static/editor.scss 133 bytes {0} [built]Hey Russel, I’m trying to duplicate and having trouble. Does
npm run devcause an error. If you edit one of the JS files like /blocks/01-static/index.js does it recompile the changes?Hey Zac,
can you please tell me, where you updated the package-lock.json?
Do you change this one:
https://github.com/zgordon/how-to-gutenberg-plugin/blob/master/package-lock.json
or that one:
https://github.com/zgordon/gutenberg-course/blob/v2/jsforwp-example-blocks/package-lock.jsonI tryed both but can´t see a diffrent result.
- You must be logged in to reply to this topic.