Not running with webpack 5.x

[phoenixseo]

i am a bloody beginner with webpack based workflows, so i cannot fix the errors occuring when running this project on webpack 5.21.2 (which seems the actual version at time of writing this).

i've tried to install webpack@4.46.0 but installer is running into dependency errors which i cannot resolve. i tried to install with legacy-deps, but it failed also.

could you please update this webpack-tailwind-starter kit with its excellent explanations on https://hackernoon.com/building-a-reusable-front-end-development-project-using-webpack-and-tailwind-css-nsk2de9 to version 5.x of webpack?

i need a working example to explore more. i am currently trying to "enrich" a drupal theme with tailwindcss and would like to implement this with a working webpack rountrip, where a minimized (tree-shaken) css file and js file get baked from it.

thank you very much :-)

[justinhough]

@phoenixseo Could you provide the dependency errors that you are getting? It's difficult to diagnose dependency errors without the original error you are receiving.

The original article and this project were written to work with Webpack v4.29.6. This is technically not an ongoing project that is continually updated to meet all new updates, but was meant as a starting point for those learning to use Webpack.

[phoenixseo]

terminal spits this out:

ash@1.0.0 dev webpack --config webpack.config.js --mode development

Hash: 4b94bb72145c9a19e088 Version: webpack 4.46.0 Time: 20546ms Built at: 11.02.2021 01:09:44 Asset Size Chunks Chunk Names ./dist.bundle.js 5.19 KiB main [emitted] main Entrypoint main = ./dist.bundle.js [./src/css/source.css] 716 bytes {main} [built] [failed] [1 error] [./src/js/source.js] 69 bytes {main} [built]

ERROR in ./src/css/source.css Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js): TypeError: this.getOptions is not a function at Object.loader (/Volumes/webroot/sites/phoenixseo9/web/themes/custom/ash/node_modules/postcss-loader/dist/index.js:38:24) at /Volumes/webroot/sites/phoenixseo9/web/themes/custom/ash/node_modules/webpack/lib/NormalModule.js:316:20 at /Volumes/webroot/sites/phoenixseo9/web/themes/custom/ash/node_modules/loader-runner/lib/LoaderRunner.js:367:11 at /Volumes/webroot/sites/phoenixseo9/web/themes/custom/ash/node_modules/loader-runner/lib/LoaderRunner.js:233:18 @ ./src/js/source.js 1:0-27 Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/postcss-loader/dist/cjs.js??postcss!src/css/source.css: Entrypoint mini-css-extract-plugin = * [./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js?!./src/css/source.css] ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js??postcss!./src/css/source.css 264 bytes {mini-css-extract-plugin} [built] [failed] [1 error]

ERROR in ./src/css/source.css (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js??postcss!./src/css/source.css)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
    at Object.loader (/Volumes/webroot/sites/phoenixseo9/web/themes/custom/ash/node_modules/postcss-loader/dist/index.js:38:24)

npm ERR! code 1 npm ERR! path /Volumes/webroot/sites/phoenixseo9/web/themes/custom/ash npm ERR! command failed npm ERR! command sh -c webpack --config webpack.config.js --mode development

[justinhough]

It doesn't look like a dependency error. Webpack is just failing to build based on an error in the file here: ./src/css/source.css.

It might be an issue with Tailwind CSS not being found in the project.

Could you try just putting in the following in the CSS file and seeing if it compiles.

body {
  background-color: orange;
}

[phoenixseo]

thanks for your help :-)

put your css code into source.css and ran: npm run dev result (truncated):

ash@1.0.0 dev webpack --config webpack.config.js --mode development

Hash: 4b94bb72145c9a19e088 Version: webpack 4.46.0 Time: 11149ms Built at: 11.02.2021 01:38:27 Asset Size Chunks Chunk Names ./dist.bundle.js 5.19 KiB main [emitted] main Entrypoint main = ./dist.bundle.js [./src/css/source.css] 716 bytes {main} [built] [failed] [1 error] [./src/js/source.js] 69 bytes {main} [built]

ERROR in ./src/css/source.css Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js): TypeError: this.getOptions is not a function at Object.loader (/Volumes/webroot/sites/phoenixseo9/web/themes/custom/ash/node_modules/postcss-loader/dist/index.js:38:24) at /Volumes/webroot/sites/phoenixseo9/web/themes/custom/ash/node_modules/webpack/lib/NormalModule.js:316:20 at /Volumes/webroot/sites/phoenixseo9/web/themes/custom/ash/node_modules/loader-runner/lib/LoaderRunner.js:367:11 at /Volumes/webroot/sites/phoenixseo9/web/themes/custom/ash/node_modules/loader-runner/lib/LoaderRunner.js:233:18 @ ./src/js/source.js 1:0-27

[justinhough]

@phoenixseo Thanks that helps!

Pushed some updates to the project that includes the latest version as of today for Webpack v5.21.2. The main issue was the way the config for PostCSS Loader 4+ had changed in how the plugins for tailwind and autoprefiver were being loaded.

Best recommendation would be to download the repo again and do a fresh install via npm install to get the latest updates.

You can see the latest updates to the package.json here: https://github.com/Hounder-Co/webpack-tailwind-starter/commit/10942d85e7b0efdf8152a57cf911e8e6d32d338a#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519`

and to the webpack.config.js here: https://github.com/Hounder-Co/webpack-tailwind-starter/commit/67894d34dd5f0b76911e1dd132284a8eeebbb39d#diff-1fb26bc12ac780c7ad7325730ed09fc4c2c3d757c276c3dacc44bfe20faf166f

On my side running the project with the latest repository code with nothing additional should provide the following results:

Thanks.

[phoenixseo]

thank you very much! :-) you are awesome :-) i'll try it tomorrow as it is 2 o'clock in the morning here and i am getting really tired. thank you very much for your time and support