{"id":601,"date":"2023-02-02T10:35:02","date_gmt":"2023-02-02T10:35:02","guid":{"rendered":"https:\/\/frontendguruji.com\/blog\/?p=601"},"modified":"2023-02-02T10:47:18","modified_gmt":"2023-02-02T10:47:18","slug":"invalid-options-object-dev-server","status":"publish","type":"post","link":"https:\/\/frontendguruji.com\/blog\/invalid-options-object-dev-server\/","title":{"rendered":"ValidationError: Invalid options object Dev Server &#8211; Webpack 5"},"content":{"rendered":"\n<p>Today while updating Webpack 4 to 5, got below error:<br><strong>ValidationError: Invalid options object Dev Server has been initiated using an options object that does not match the API schema.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"192\" src=\"https:\/\/frontendguruji.com\/blog\/wp-content\/uploads\/2023\/02\/Screenshot-2023-02-02-at-3.16.16-PM-1024x192.png\" alt=\"invalid options object dev server, webpack 4 to 5, Invalid options object, web pack, Dev Server\" class=\"wp-image-602\" srcset=\"https:\/\/frontendguruji.com\/blog\/wp-content\/uploads\/2023\/02\/Screenshot-2023-02-02-at-3.16.16-PM-1024x192.png 1024w, https:\/\/frontendguruji.com\/blog\/wp-content\/uploads\/2023\/02\/Screenshot-2023-02-02-at-3.16.16-PM-300x56.png 300w, https:\/\/frontendguruji.com\/blog\/wp-content\/uploads\/2023\/02\/Screenshot-2023-02-02-at-3.16.16-PM-768x144.png 768w, https:\/\/frontendguruji.com\/blog\/wp-content\/uploads\/2023\/02\/Screenshot-2023-02-02-at-3.16.16-PM-1536x287.png 1536w, https:\/\/frontendguruji.com\/blog\/wp-content\/uploads\/2023\/02\/Screenshot-2023-02-02-at-3.16.16-PM-150x28.png 150w, https:\/\/frontendguruji.com\/blog\/wp-content\/uploads\/2023\/02\/Screenshot-2023-02-02-at-3.16.16-PM.png 1604w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>After some analysis &#x1f50e;, found that there are changes in the options we provide to Webpack Dev Server in Webpack 5.&#x1f575;&#xfe0f;&#x200d;&#x2642;&#xfe0f;<\/p>\n\n\n\n<h2>Invalid options object Dev Server &#8211; Updating Webpack 4 to 5<\/h2>\n\n\n\n<p>Below changes are needed in webpack devserver configurations:<\/p>\n\n\n\n<p><strong>contentBase:&#8221;public&#8221;<\/strong> is now <strong>static: {directory: &#8220;public&#8221;}<\/strong><br><strong>disableHostCheck: true<\/strong> is now <strong>allowedHosts: &#8220;all&#8221;<\/strong><br><strong>clientLogLevel: &#8216;info&#8217;<\/strong> is now <strong>client: {logging: &#8216;info&#8217;}<\/strong><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>For more changes, visit <a href=\"https:\/\/github.com\/webpack\/webpack-dev-server\/blob\/master\/CHANGELOG.md\" target=\"_blank\" rel=\"noreferrer noopener\">Webpack changelog<\/a>.<\/p>\n\n\n\n<p>More articles on <a href=\"https:\/\/frontendguruji.com\/blog\/category\/issues-solutions\/\">Issues &amp; solutions<\/a>.<br>Thanks &#x1f64f;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Today while updating Webpack 4 to 5, got below error:ValidationError: Invalid options object Dev Server has been initiated using an options object that does not match the API schema. After some analysis &#x1f50e;, found that there are changes in the options we provide to Webpack Dev Server in Webpack 5.&#x1f575;&#xfe0f;&#x200d;&#x2642;&#xfe0f; Invalid options object Dev Server &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"https:\/\/frontendguruji.com\/blog\/invalid-options-object-dev-server\/\"> <span class=\"screen-reader-text\">ValidationError: Invalid options object Dev Server &#8211; Webpack 5<\/span> Read More &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-global-header-display":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":""},"categories":[30],"tags":[31,32,23],"_links":{"self":[{"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/posts\/601"}],"collection":[{"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/comments?post=601"}],"version-history":[{"count":5,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/posts\/601\/revisions"}],"predecessor-version":[{"id":613,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/posts\/601\/revisions\/613"}],"wp:attachment":[{"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/media?parent=601"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/categories?post=601"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/tags?post=601"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}