{"id":125950,"date":"2018-08-14T13:17:54","date_gmt":"2018-08-14T13:17:54","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=125950"},"modified":"2018-08-14T13:33:56","modified_gmt":"2018-08-14T13:33:56","slug":"yarn-run-webpack-issues-in-akeneo","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/yarn-run-webpack-issues-in-akeneo\/","title":{"rendered":"yarn run webpack issues in Akeneo"},"content":{"rendered":"<p>Webpack is module builder in JavaScript which is used to server single file to the browser instead of multiple different files.<br \/>\nWebpack is also\u00a0npm\u00a0dependency in Akeneo. if webpack\u00a0is not present then you may not modify\/customize Akeneo views and UI.<\/p>\n<p><span style=\"text-decoration: underline\"><strong>Rebuild <\/strong><strong>webpack<\/strong><strong>\u00a0bundle<\/strong><\/span><br \/>\nWhenever js or view files are added or updated in Akeneo. then the user need to rebuild webpack files by running the command<\/p>\n<pre class=\"brush:shell\">yarn run webpack<\/pre>\n<p>&nbsp;<\/p>\n<p><span style=\"text-decoration: underline\"><strong>Issue<\/strong><\/span><br \/>\nBut when webpack\u00a0is not installed. User may get an error like in the image below<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-125951 size-full\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/05\/errr.png\" alt=\"webpack error: permission denied\" width=\"734\" height=\"211\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/05\/errr.png 734w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/05\/errr-250x72.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/05\/errr-300x86.png 300w\" sizes=\"(max-width: 734px) 100vw, 734px\" loading=\"lazy\" \/><\/p>\n<div class=\"highlight sh\">\n<div><\/div>\n<div class=\"line\"><span class=\"source shell\"><br \/>\n<span style=\"text-decoration: underline\"><strong>Solution<\/strong><\/span><\/span><\/div>\n<div class=\"line\"><span class=\"source shell\"><span class=\"source shell\">So, the solution is to add webpack\u00a0to npm packages by running the following\u00a0commands from Akeneo installation directory<br \/>\n<\/span><\/span><\/p>\n<pre class=\"brush:shell\">npm\u00a0install\u00a0--save-dev\u00a0webpack\r\nnpm\u00a0install\r\nyarn run webpack<\/pre>\n<\/div>\n<\/div>\n<div class=\"line\"><\/div>\n<div>After running these commands<br \/>\nwebpack\u00a0dependency would also be added in the packages.json<\/div>\n<div>\n<pre class=\"brush:plain\">{\r\n  \"name\": \"pim-community-dev\",\r\n  \"description\": \"Akeneo PIM Application\",\r\n  \"homepage\": \"http:\/\/www.akeneo.com\",\r\n  \"scripts\": {\r\n    \"webpack\": \"webpack --config webpack.config.js --env=prod\",\r\n    .\r\n    .\r\n    .<\/pre>\n<p>&nbsp;<\/p>\n<p><span style=\"text-decoration: underline\"><strong>Related Akeneo blogs:<br \/>\n<\/strong><\/span><a href=\"https:\/\/webkul.com\/blog\/setup-akeneo2-php7\/\">https:\/\/webkul.com\/blog\/setup-akeneo2-php7\/<\/a><\/p>\n<p><a href=\"https:\/\/webkul.com\/blog\/install-default-dataset-in-akeneo\/\">https:\/\/webkul.com\/blog\/install-default-dataset-in-akeneo\/<\/a><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Webpack is module builder in JavaScript which is used to server single file to the browser instead of multiple different files. Webpack is also\u00a0npm\u00a0dependency in Akeneo. if webpack\u00a0is not present then you may not modify\/customize Akeneo views and UI. Rebuild webpack\u00a0bundle Whenever js or view files are added or updated in Akeneo. then the user <a href=\"https:\/\/webkul.com\/blog\/yarn-run-webpack-issues-in-akeneo\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":163,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5709],"tags":[3649,5829,4184,7300],"class_list":["post-125950","post","type-post","status-publish","format-standard","hentry","category-akeneo","tag-akeneo","tag-pim","tag-webpack","tag-yarn"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>yarn run webpack issues in Akeneo - Webkul Blog<\/title>\n<meta name=\"description\" content=\"Webpack must be added as npm module in Akeneo to show customized and changed part of UI. Without webpack UI changes would not be reflected.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/yarn-run-webpack-issues-in-akeneo\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"yarn run webpack issues in Akeneo - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"Webpack must be added as npm module in Akeneo to show customized and changed part of UI. Without webpack UI changes would not be reflected.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/yarn-run-webpack-issues-in-akeneo\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-08-14T13:17:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-08-14T13:33:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2018\/05\/errr.png\" \/>\n<meta name=\"author\" content=\"Ankit Yadav\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ankit Yadav\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/yarn-run-webpack-issues-in-akeneo\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/yarn-run-webpack-issues-in-akeneo\/\"},\"author\":{\"name\":\"Ankit Yadav\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/45a97822858619ff05cff6fa033ecea6\"},\"headline\":\"yarn run webpack issues in Akeneo\",\"datePublished\":\"2018-08-14T13:17:54+00:00\",\"dateModified\":\"2018-08-14T13:33:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/yarn-run-webpack-issues-in-akeneo\/\"},\"wordCount\":142,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/yarn-run-webpack-issues-in-akeneo\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2018\/05\/errr.png\",\"keywords\":[\"Akeneo\",\"pim\",\"Webpack\",\"yarn\"],\"articleSection\":[\"Akeneo\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/yarn-run-webpack-issues-in-akeneo\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/yarn-run-webpack-issues-in-akeneo\/\",\"url\":\"https:\/\/webkul.com\/blog\/yarn-run-webpack-issues-in-akeneo\/\",\"name\":\"yarn run webpack issues in Akeneo - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/yarn-run-webpack-issues-in-akeneo\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/yarn-run-webpack-issues-in-akeneo\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2018\/05\/errr.png\",\"datePublished\":\"2018-08-14T13:17:54+00:00\",\"dateModified\":\"2018-08-14T13:33:56+00:00\",\"description\":\"Webpack must be added as npm module in Akeneo to show customized and changed part of UI. Without webpack UI changes would not be reflected.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/yarn-run-webpack-issues-in-akeneo\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/yarn-run-webpack-issues-in-akeneo\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/yarn-run-webpack-issues-in-akeneo\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/05\/errr.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/05\/errr.png\",\"width\":\"734\",\"height\":\"211\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/yarn-run-webpack-issues-in-akeneo\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"yarn run webpack issues in Akeneo\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/45a97822858619ff05cff6fa033ecea6\",\"name\":\"Ankit Yadav\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/dec576ccbc5f24feae14594b60cc05141ad99a42db37b2a7028a4c49acef2f94?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/dec576ccbc5f24feae14594b60cc05141ad99a42db37b2a7028a4c49acef2f94?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Ankit Yadav\"},\"url\":\"https:\/\/webkul.com\/blog\/author\/ankit-yadav726\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"yarn run webpack issues in Akeneo - Webkul Blog","description":"Webpack must be added as npm module in Akeneo to show customized and changed part of UI. Without webpack UI changes would not be reflected.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/yarn-run-webpack-issues-in-akeneo\/","og_locale":"en_US","og_type":"article","og_title":"yarn run webpack issues in Akeneo - Webkul Blog","og_description":"Webpack must be added as npm module in Akeneo to show customized and changed part of UI. Without webpack UI changes would not be reflected.","og_url":"https:\/\/webkul.com\/blog\/yarn-run-webpack-issues-in-akeneo\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2018-08-14T13:17:54+00:00","article_modified_time":"2018-08-14T13:33:56+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2018\/05\/errr.png","type":"","width":"","height":""}],"author":"Ankit Yadav","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Ankit Yadav","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/yarn-run-webpack-issues-in-akeneo\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/yarn-run-webpack-issues-in-akeneo\/"},"author":{"name":"Ankit Yadav","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/45a97822858619ff05cff6fa033ecea6"},"headline":"yarn run webpack issues in Akeneo","datePublished":"2018-08-14T13:17:54+00:00","dateModified":"2018-08-14T13:33:56+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/yarn-run-webpack-issues-in-akeneo\/"},"wordCount":142,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/yarn-run-webpack-issues-in-akeneo\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2018\/05\/errr.png","keywords":["Akeneo","pim","Webpack","yarn"],"articleSection":["Akeneo"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/yarn-run-webpack-issues-in-akeneo\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/yarn-run-webpack-issues-in-akeneo\/","url":"https:\/\/webkul.com\/blog\/yarn-run-webpack-issues-in-akeneo\/","name":"yarn run webpack issues in Akeneo - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/yarn-run-webpack-issues-in-akeneo\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/yarn-run-webpack-issues-in-akeneo\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2018\/05\/errr.png","datePublished":"2018-08-14T13:17:54+00:00","dateModified":"2018-08-14T13:33:56+00:00","description":"Webpack must be added as npm module in Akeneo to show customized and changed part of UI. Without webpack UI changes would not be reflected.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/yarn-run-webpack-issues-in-akeneo\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/yarn-run-webpack-issues-in-akeneo\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/yarn-run-webpack-issues-in-akeneo\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/05\/errr.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/05\/errr.png","width":"734","height":"211"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/yarn-run-webpack-issues-in-akeneo\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"yarn run webpack issues in Akeneo"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/45a97822858619ff05cff6fa033ecea6","name":"Ankit Yadav","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/dec576ccbc5f24feae14594b60cc05141ad99a42db37b2a7028a4c49acef2f94?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/dec576ccbc5f24feae14594b60cc05141ad99a42db37b2a7028a4c49acef2f94?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Ankit Yadav"},"url":"https:\/\/webkul.com\/blog\/author\/ankit-yadav726\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/125950","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/163"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=125950"}],"version-history":[{"count":14,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/125950\/revisions"}],"predecessor-version":[{"id":138688,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/125950\/revisions\/138688"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=125950"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=125950"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=125950"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}