UnhandledPromiseRejectionWarning: TypeError: Cannot destructure property 'service' of 'this._compiler.$tailwind' as it is undefined.

[pySilver]

Hi!

I'm just trying to make it work with basic Laravel Mix (webpack warpper) setup and it fails with:

~/P/sample-ui[130]>yarn watch                                                                                                                                                       323.18s (main|✚) 17:15
yarn               yarn watch                                                                                                                                                       323.18s (main|✚) 17:15
yarn run v1.22.17
$ mix watch

● Mix █████████████████████████ building (10%) 0/3 entries 2/3 dependencies 0/2 modules 2 active

● Mix █████████████████████████ building (10%) 0/3 entries 5/11 dependencies 0/5 modules 5 active

● Mix █████████████████████████ building (10%) 0/3 entries 16/21 dependencies 2/15 modules 13 active

● Mix █████████████████████████ building (10%) 0/3 entries 28/38 dependencies 3/20 modules 17 active

● Mix █████████████████████████ building (10%) 0/3 entries 30/38 dependencies 4/20 modules 16 active

● Mix █████████████████████████ building (10%) 0/3 entries 46/50 dependencies 12/31 modules 17 active

● Mix █████████████████████████ building (28%) 1/3 entries 202/202 dependencies 66/85 modules 17 active
 node_modules/@popperjs/core/lib/dom-utils/getClippingRect.js

(node:47002) UnhandledPromiseRejectionWarning: TypeError: Cannot destructure property 'service' of 'this._compiler.$tailwind' as it is undefined.
    at Object.CssLoader (/Users/Silver/Projects/sample-ui/node_modules/tailwindcss-webpack-plugin/dist/loaders/css-loader.js:66:11)
    at LOADER_EXECUTION (/Users/Silver/Projects/sample-ui/node_modules/loader-runner/lib/LoaderRunner.js:132:14)
    at runSyncOrAsync (/Users/Silver/Projects/sample-ui/node_modules/loader-runner/lib/LoaderRunner.js:133:4)
    at iterateNormalLoaders (/Users/Silver/Projects/sample-ui/node_modules/loader-runner/lib/LoaderRunner.js:251:2)
    at /Users/Silver/Projects/sample-ui/node_modules/loader-runner/lib/LoaderRunner.js:224:4
    at /Users/Silver/Projects/sample-ui/node_modules/webpack/lib/NormalModule.js:834:15
    at Array.eval (eval at create (/Users/Silver/Projects/sample-ui/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:12:1)
    at runCallbacks (/Users/Silver/Projects/sample-ui/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:27:15)
    at /Users/Silver/Projects/sample-ui/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:200:4
    at /Users/Silver/Projects/sample-ui/node_modules/graceful-fs/graceful-fs.js:123:16
(Use `node --trace-warnings ...` to show where the warning was created)
(node:47002) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
^C⏎

[await-ovo]

hi, thanks for your feedback. Could you please provide a repo to reproduce it, thanks a lot

[pySilver]

@await-ovo thanks for response. here it is: https://github.com/pySilver/tailwindcss-webpack-plugin-bug

[await-ovo]

Hi @pySilver , This should be fixed in tailwindcss-webpack-plugin@0.0.7. You can see if there are still problems on your side.

[pySilver]

@await-ovo thanks. Looks like its working now! :)

[pySilver]

@await-ovo I was a little too fast. For some reason it wasn't working initially, then it after couple of browser reloads it clicked in but at the end it doesn't work. OK sounds like a mystery. What I'm seeing is bunch of empty classes injected into header. So devtools suggestions works but as classes are empty there is no useful outcome: https://share.cleanshot.com/nk3owO

[await-ovo]

@await-ovo I was a little too fast. For some reason it wasn't working initially, then it after couple of browser reloads it clicked in but at the end it doesn't work. OK sounds like a mystery. What I'm seeing is bunch of empty classes injected into header. So devtools suggestions works but as classes are empty there is no useful outcome: https://share.cleanshot.com/nk3owO

@pySilver Yeah, The empty classes is just for auto completion, it should generate a new class on demand when you changing class name in devtools. This is based on webpack HMR.

What I'm confused about is how HMR works in laravel-mix, After run yarn hot, i changed the content of src/js/app.js under the repository you provided, then the browser automatically reload, but the content is not up to date, is this also the case on your end?

[pySilver]

Yes. Unfortunately it is. I've followed instructions posted here but still no luck: https://laravel-mix.com/docs/6.0/hot-module-replacement#basic-usage-in-laravel