Webpack Error ?

[Ladet02]

Im trying to use thois this with tailwind and Im getting this error

ERROR in ./src/styles/index.scss (./src/styles/index.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/styles/index.scss)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
/home/ladet/dev/ladetme/frontend/node_modules/postcss-import/index.js:45
      if (styles.source?.input?.file) {
                        ^

SyntaxError: Unexpected token '.'
    at wrapSafe (internal/modules/cjs/loader.js:915:16)
    at Module._compile (internal/modules/cjs/loader.js:963:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (/home/ladet/dev/ladetme/frontend/postcss.config.js:11:5)
    at Module._compile (internal/modules/cjs/loader.js:999:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
 @ ./src/styles/index.scss
 @ ./src/application/app.js 2:0-30

ERROR in ./src/styles/index.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
/home/ladet/dev/ladetme/frontend/node_modules/postcss-import/index.js:45
      if (styles.source?.input?.file) {
                        ^

SyntaxError: Unexpected token '.'
    at wrapSafe (internal/modules/cjs/loader.js:915:16)
    at Module._compile (internal/modules/cjs/loader.js:963:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (/home/ladet/dev/ladetme/frontend/postcss.config.js:11:5)
    at Module._compile (internal/modules/cjs/loader.js:999:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at tryRunOrWebpackError (/home/ladet/dev/ladetme/frontend/node_modules/webpack/lib/HookWebpackError.js:88:9)
    at __webpack_require_module__ (/home/ladet/dev/ladetme/frontend/node_modules/webpack/lib/Compilation.js:5049:12)
    at __webpack_require__ (/home/ladet/dev/ladetme/frontend/node_modules/webpack/lib/Compilation.js:5006:18)
    at /home/ladet/dev/ladetme/frontend/node_modules/webpack/lib/Compilation.js:5077:20
    at symbolIterator (/home/ladet/dev/ladetme/frontend/node_modules/neo-async/async.js:3485:9)
    at done (/home/ladet/dev/ladetme/frontend/node_modules/neo-async/async.js:3527:9)
    at Hook.eval [as callAsync] (eval at create (/home/ladet/dev/ladetme/frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
    at /home/ladet/dev/ladetme/frontend/node_modules/webpack/lib/Compilation.js:4984:43
    at symbolIterator (/home/ladet/dev/ladetme/frontend/node_modules/neo-async/async.js:3482:9)
    at timesSync (/home/ladet/dev/ladetme/frontend/node_modules/neo-async/async.js:2297:7)
-- inner error --
Error: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
/home/ladet/dev/ladetme/frontend/node_modules/postcss-import/index.js:45
      if (styles.source?.input?.file) {
                        ^

SyntaxError: Unexpected token '.'
    at wrapSafe (internal/modules/cjs/loader.js:915:16)
    at Module._compile (internal/modules/cjs/loader.js:963:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (/home/ladet/dev/ladetme/frontend/postcss.config.js:11:5)
    at Module._compile (internal/modules/cjs/loader.js:999:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Object.<anonymous> (/home/ladet/dev/ladetme/frontend/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!/home/ladet/dev/ladetme/frontend/node_modules/postcss-loader/dist/cjs.js!/home/ladet/dev/ladetme/frontend/node_modules/sass-loader/dist/cjs.js!/home/ladet/dev/ladetme/frontend/src/styles/index.scss:1:7)
    at /home/ladet/dev/ladetme/frontend/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:441:11
    at Hook.eval [as call] (eval at create (/home/ladet/dev/ladetme/frontend/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:5:1)
    at /home/ladet/dev/ladetme/frontend/node_modules/webpack/lib/Compilation.js:5051:39
    at tryRunOrWebpackError (/home/ladet/dev/ladetme/frontend/node_modules/webpack/lib/HookWebpackError.js:83:7)
    at __webpack_require_module__ (/home/ladet/dev/ladetme/frontend/node_modules/webpack/lib/Compilation.js:5049:12)
    at __webpack_require__ (/home/ladet/dev/ladetme/frontend/node_modules/webpack/lib/Compilation.js:5006:18)
    at /home/ladet/dev/ladetme/frontend/node_modules/webpack/lib/Compilation.js:5077:20
    at symbolIterator (/home/ladet/dev/ladetme/frontend/node_modules/neo-async/async.js:3485:9)
    at done (/home/ladet/dev/ladetme/frontend/node_modules/neo-async/async.js:3527:9)

Generated code for /home/ladet/dev/ladetme/frontend/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!/home/ladet/dev/ladetme/frontend/node_modules/postcss-loader/dist/cjs.js!/home/ladet/dev/ladetme/frontend/node_modules/sass-loader/dist/cjs.js!/home/ladet/dev/ladetme/frontend/src/styles/index.scss
1 | throw new Error("Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):\n/home/ladet/dev/ladetme/frontend/node_modules/postcss-import/index.js:45\n      if (styles.source?.input?.file) {\n                        ^\n\nSyntaxError: Unexpected token '.'\n    at wrapSafe (internal/modules/cjs/loader.js:915:16)\n    at Module._compile (internal/modules/cjs/loader.js:963:27)\n    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)\n    at Module.load (internal/modules/cjs/loader.js:863:32)\n    at Function.Module._load (internal/modules/cjs/loader.js:708:14)\n    at Module.require (internal/modules/cjs/loader.js:887:19)\n    at require (internal/modules/cjs/helpers.js:74:18)\n    at Object.<anonymous> (/home/ladet/dev/ladetme/frontend/postcss.config.js:11:5)\n    at Module._compile (internal/modules/cjs/loader.js:999:30)\n    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)");
 @ ./src/application/app.js 2:0-30

ERROR in src/styles/index.scss
 12:193  ✖  Expected line length to be no more than 120 characters  max-line-length                 
 12:195  ✖  Unexpected missing end-of-source newline                no-missing-end-of-source-newline

webpack 5.70.0 compiled with 3 errors in 2326 ms

[michael-yin]

@Ladet02

you can check https://github.com/AccordBox/django-tailwind-alpine-htmx

[FilipWozniak]

I get exactly the same error message.

I've installed Wagtail with "npm command at frontend directory" setup, enabled live reloading feature and I get the following error trying to configure Tailwind:

I've checked all the steps provided here like a million times.

Can you assist @michael-yin?