{"id":9497,"date":"2019-10-01T01:25:03","date_gmt":"2019-10-01T06:25:03","guid":{"rendered":"https:\/\/krisbunda.com\/blog\/?p=9497"},"modified":"2019-10-11T16:10:53","modified_gmt":"2019-10-11T21:10:53","slug":"try-this-for-npm-build-setup-errors-in-your-local-wordpress-development-environment","status":"publish","type":"post","link":"https:\/\/krisbunda.com\/blog\/2019\/10\/01\/try-this-for-npm-build-setup-errors-in-your-local-wordpress-development-environment\/","title":{"rendered":"Try this for NPM Build Setup Errors in Your Local WordPress Development Environment"},"content":{"rendered":"\n<p>I&#8217;m posting this because it took me a while to figure out, so hopefully it takes you less time. If you&#8217;re seeing &#8220;<code>wp-scripts is not recognized as an internal or external command<\/code>&#8221; errors, read on. <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"516\" height=\"1327\" src=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/10\/Hey-making-custom-theme-default-colors-is-fun-but-lets-automate-these-update-builds.png\" alt=\"Hey, making custom theme default colors is fun, but lets automate these updates with Node Package Manager builds. \" class=\"wp-image-9516\" srcset=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/10\/Hey-making-custom-theme-default-colors-is-fun-but-lets-automate-these-update-builds.png 516w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/10\/Hey-making-custom-theme-default-colors-is-fun-but-lets-automate-these-update-builds-58x150.png 58w\" sizes=\"auto, (max-width: 516px) 100vw, 516px\" \/><figcaption>Hey, making custom theme default colors is fun, but lets automate these updates with Node Package Manager builds. <\/figcaption><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Let&#8217;s Automate Script Rebuilds in Local WordPress Development Environment using Node Package Manager (NPM)<\/h3>\n\n\n\n<p>I wanted to automate rebuilds upon changes made to JavaScript files in my local WordPress development environment&#8211;that way I can see the effect of every little change to my code in real time. But trying to get the build command to work was only producing errors, like <code>\"wp-scripts is not recognized as an internal or external command\"<\/code><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Good YouTube Tutorial for setting up NPM local WordPress dev environment refreshing:<\/h2>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"3. Gutenberg from Scratch: NPM Build Setup for Gutenberg\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/jwIpsW3UoUI?list=PLriKzYyLb28lHhftzU7Z_DJ32mvLy4KKH\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><figcaption> <a href=\"https:\/\/www.youtube.com\/watch?v=jwIpsW3UoUI&amp;list=PLriKzYyLb28lHhftzU7Z_DJ32mvLy4KKH&amp;index=4\">https:\/\/www.youtube.com\/watch?v=jwIpsW3UoUI&amp;list=PLriKzYyLb28lHhftzU7Z_DJ32mvLy4KKH&amp;index=4<\/a> <\/figcaption><\/figure>\n\n\n\n<p>I was enabling Node auto builds for a local WordPress install per this nice YouTube tutorial. But it wasn&#8217;t working until I tried: <\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>add <span style=\"font-size: 16px;\"><code>\"@wordpress\/scripts\":&nbsp;\"^3.1.0\",<\/code><\/span> to the <code>\"DevDependencies{}\"<\/code> section of the <code>package.json<\/code> file, <\/li><li>and then re-run the <code>npm run build:scripts<\/code> command from terminal.<\/li><\/ol>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"844\" height=\"734\" src=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/10\/PACKAGE-JSON-FILE-FOR-WORDPRESS-LOCAL-DEVELOPMENT-ERROR-MESSAGE.png\" alt=\"PACKAGE JSON FILE FOR WORDPRESS LOCAL DEVELOPMENT-ERROR MESSAGE\" class=\"wp-image-9514\" srcset=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/10\/PACKAGE-JSON-FILE-FOR-WORDPRESS-LOCAL-DEVELOPMENT-ERROR-MESSAGE.png 844w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/10\/PACKAGE-JSON-FILE-FOR-WORDPRESS-LOCAL-DEVELOPMENT-ERROR-MESSAGE-150x130.png 150w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/10\/PACKAGE-JSON-FILE-FOR-WORDPRESS-LOCAL-DEVELOPMENT-ERROR-MESSAGE-600x522.png 600w\" sizes=\"auto, (max-width: 844px) 100vw, 844px\" \/><figcaption>PACKAGE JSON FILE FOR WORDPRESS LOCAL DEVELOPMENT-ERROR MESSAGE<\/figcaption><\/figure>\n\n\n\n<p>I don&#8217;t know why my <code>package.json<\/code> file was missing that particular <code>devDependency<\/code>, but it was. If that didn&#8217;t fix it for you, try running the:  <\/p>\n\n\n\n<ol class=\"wp-block-list\"><li><code>npm audit fix<\/code> command from terminal, <\/li><li>then close your text editor (after it&#8217;s done auditing), restart it, <\/li><li>try running  <code>npm run build:scripts<\/code> again to see if it works. <\/li><\/ol>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"619\" height=\"635\" src=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/10\/PACKAGE-JSON-FILE-FOR-WORDPRESS-LOCAL-DEVELOPMENT-ERROR-MESSAGE-2.png\" alt=\"PACKAGE JSON FILE FOR WORDPRESS LOCAL DEVELOPMENT-ERROR MESSAGE 2\" class=\"wp-image-9515\" srcset=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/10\/PACKAGE-JSON-FILE-FOR-WORDPRESS-LOCAL-DEVELOPMENT-ERROR-MESSAGE-2.png 619w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/10\/PACKAGE-JSON-FILE-FOR-WORDPRESS-LOCAL-DEVELOPMENT-ERROR-MESSAGE-2-146x150.png 146w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/10\/PACKAGE-JSON-FILE-FOR-WORDPRESS-LOCAL-DEVELOPMENT-ERROR-MESSAGE-2-600x616.png 600w\" sizes=\"auto, (max-width: 619px) 100vw, 619px\" \/><figcaption>PACKAGE JSON FILE FOR WORDPRESS LOCAL DEVELOPMENT-ERROR MESSAGE 2<\/figcaption><\/figure>\n\n\n\n<p>If that doesn&#8217;t do it, I&#8217;m out of ideas, Sorry!<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"768\" height=\"632\" src=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/10\/Node-Package-Manager-auto-build-for-wordpress-local-dev-environment-NOT-erroring-out.png\" alt=\"Node Package Manager auto build for wordpress local dev environment NOT erroring out\" class=\"wp-image-9518\" srcset=\"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/10\/Node-Package-Manager-auto-build-for-wordpress-local-dev-environment-NOT-erroring-out.png 768w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/10\/Node-Package-Manager-auto-build-for-wordpress-local-dev-environment-NOT-erroring-out-150x123.png 150w, https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/10\/Node-Package-Manager-auto-build-for-wordpress-local-dev-environment-NOT-erroring-out-600x494.png 600w\" sizes=\"auto, (max-width: 768px) 100vw, 768px\" \/><figcaption>Node Package Manager auto build for wordpress local dev environment NOT erroring out<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>I wanted to automate rebuilds in my local WordPress dev environment. But the NPM build command was only producing errors like &#8220;wp-scripts is not recognized as an internal or external command.&#8221; Try adding this line to your Package.json file to fix it.<\/p>\n","protected":false},"author":1,"featured_media":9513,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","inline_featured_image":false,"kt_blocks_editor_width":"","_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[4],"tags":[777,779,773,778,776,775,772,240],"class_list":["post-9497","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-designer","tag-automation","tag-cli","tag-code","tag-json","tag-node","tag-npm","tag-web-development","tag-wordpress"],"aioseo_notices":[],"jetpack_publicize_connections":[],"taxonomy_info":{"category":[{"value":4,"label":"Designer"}],"post_tag":[{"value":777,"label":"Automation"},{"value":779,"label":"CLI"},{"value":773,"label":"code"},{"value":778,"label":"JSON"},{"value":776,"label":"Node"},{"value":775,"label":"NPM"},{"value":772,"label":"web development"},{"value":240,"label":"WordPress"}]},"featured_image_src_large":["https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/10\/cropped-cover-NPM-auto-build-for-wordpress-local-dev-environment-erroring-out-1200x675.png",1200,675,true],"author_info":{"display_name":"Kris Bunda","author_link":"https:\/\/krisbunda.com\/blog\/author\/kris-bunda\/"},"comment_info":0,"category_info":[{"term_id":4,"name":"Designer","slug":"designer","term_group":0,"term_taxonomy_id":4,"taxonomy":"category","description":"Posts focusing on web, graphic, CAD, and other design.","parent":0,"count":91,"filter":"raw","cat_ID":4,"category_count":91,"category_description":"Posts focusing on web, graphic, CAD, and other design.","cat_name":"Designer","category_nicename":"designer","category_parent":0}],"tag_info":[{"term_id":777,"name":"Automation","slug":"automation","term_group":0,"term_taxonomy_id":781,"taxonomy":"post_tag","description":"","parent":0,"count":1,"filter":"raw"},{"term_id":779,"name":"CLI","slug":"cli","term_group":0,"term_taxonomy_id":783,"taxonomy":"post_tag","description":"","parent":0,"count":1,"filter":"raw"},{"term_id":773,"name":"code","slug":"code","term_group":0,"term_taxonomy_id":777,"taxonomy":"post_tag","description":"","parent":0,"count":4,"filter":"raw"},{"term_id":778,"name":"JSON","slug":"json","term_group":0,"term_taxonomy_id":782,"taxonomy":"post_tag","description":"","parent":0,"count":1,"filter":"raw"},{"term_id":776,"name":"Node","slug":"node","term_group":0,"term_taxonomy_id":780,"taxonomy":"post_tag","description":"","parent":0,"count":1,"filter":"raw"},{"term_id":775,"name":"NPM","slug":"npm","term_group":0,"term_taxonomy_id":779,"taxonomy":"post_tag","description":"","parent":0,"count":1,"filter":"raw"},{"term_id":772,"name":"web development","slug":"web-development","term_group":0,"term_taxonomy_id":776,"taxonomy":"post_tag","description":"","parent":0,"count":5,"filter":"raw"},{"term_id":240,"name":"WordPress","slug":"wordpress","term_group":0,"term_taxonomy_id":240,"taxonomy":"post_tag","description":"","parent":0,"count":5,"filter":"raw"}],"jetpack_featured_media_url":"https:\/\/krisbunda.com\/blog\/wp-content\/uploads\/2019\/10\/cropped-cover-NPM-auto-build-for-wordpress-local-dev-environment-erroring-out.png","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p1NcZe-2tb","amp_enabled":true,"_links":{"self":[{"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/posts\/9497","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/comments?post=9497"}],"version-history":[{"count":14,"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/posts\/9497\/revisions"}],"predecessor-version":[{"id":9560,"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/posts\/9497\/revisions\/9560"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/media\/9513"}],"wp:attachment":[{"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/media?parent=9497"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/categories?post=9497"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/krisbunda.com\/blog\/wp-json\/wp\/v2\/tags?post=9497"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}