Error adding Tailwind CSS to Phoenix 1.5 LiveView application

marcdel · September 17, 2020, 3:53am

I’m trying to add Tailwind CSS to a Phoenix application and getting some errors.

I’m following this guide. I’ve tried these same steps on:

The actual Phoenix app I’m working on
A brand new Phoenix 1.5 LiveView app mix phx.new --live tailwind_demo
A brand new Phoenix 1.5 non-LiveView app mix phx.new tailwind_demo

I’ve also tried the Fullstack Phoenix generator with the Tailwind and LiveView options.

All 4 ways I get the same errors, which makes me thing it’s an issue with my system.

Versions of any relevant things I can think of:

▶ node -v
v13.3.0

▶ elixir -v
Erlang/OTP 22 [erts-10.6.4] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] [hipe]

Elixir 1.10.3 (compiled with Erlang/OTP 21)

mix.exs
...
elixir: "~> 1.7",
...
{:phoenix, "~> 1.5.3"},

ERROR in ./css/app.scss
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):
Error: Package exports for '/Users/marc/Code/marcdel/tailwind_demo/assets/node_modules/klona' do not define a valid './full' target
    at resolveExportsTarget (internal/modules/cjs/loader.js:614:9)
    at applyExports (internal/modules/cjs/loader.js:499:14)
    at resolveExports (internal/modules/cjs/loader.js:548:12)
    at Function.Module._findPath (internal/modules/cjs/loader.js:650:22)
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:948:27)
    at Function.Module._load (internal/modules/cjs/loader.js:854:27)
    at Module.require (internal/modules/cjs/loader.js:1023:19)
    at require (/Users/marc/Code/marcdel/tailwind_demo/assets/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
    at Object.<anonymous> (/Users/marc/Code/marcdel/tailwind_demo/assets/node_modules/postcss-loader/dist/utils.js:16:13)
    at Module._compile (/Users/marc/Code/marcdel/tailwind_demo/assets/node_modules/v8-compile-cache/v8-compile-cache.js:194:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1167:10)
    at Module.load (internal/modules/cjs/loader.js:983:32)
    at Function.Module._load (internal/modules/cjs/loader.js:891:14)
    at Module.require (internal/modules/cjs/loader.js:1023:19)
    at require (/Users/marc/Code/marcdel/tailwind_demo/assets/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
    at Object.<anonymous> (/Users/marc/Code/marcdel/tailwind_demo/assets/node_modules/postcss-loader/dist/index.js:24:14)
    at Module._compile (/Users/marc/Code/marcdel/tailwind_demo/assets/node_modules/v8-compile-cache/v8-compile-cache.js:194:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1167:10)
    at Module.load (internal/modules/cjs/loader.js:983:32)
    at Function.Module._load (internal/modules/cjs/loader.js:891:14)
    at Module.require (internal/modules/cjs/loader.js:1023:19)
    at require (/Users/marc/Code/marcdel/tailwind_demo/assets/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
    at Object.<anonymous> (/Users/marc/Code/marcdel/tailwind_demo/assets/node_modules/postcss-loader/dist/cjs.js:3:18)
    at Module._compile (/Users/marc/Code/marcdel/tailwind_demo/assets/node_modules/v8-compile-cache/v8-compile-cache.js:194:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1167:10)
    at Module.load (internal/modules/cjs/loader.js:983:32)
    at Function.Module._load (internal/modules/cjs/loader.js:891:14)
    at Module.require (internal/modules/cjs/loader.js:1023:19)
    at require (/Users/marc/Code/marcdel/tailwind_demo/assets/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
    at loadLoader (/Users/marc/Code/marcdel/tailwind_demo/assets/node_modules/loader-runner/lib/loadLoader.js:18:17)
    at iteratePitchingLoaders (/Users/marc/Code/marcdel/tailwind_demo/assets/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
    at iteratePitchingLoaders (/Users/marc/Code/marcdel/tailwind_demo/assets/node_modules/loader-runner/lib/LoaderRunner.js:165:10)
    at /Users/marc/Code/marcdel/tailwind_demo/assets/node_modules/loader-runner/lib/LoaderRunner.js:176:18
    at loadLoader (/Users/marc/Code/marcdel/tailwind_demo/assets/node_modules/loader-runner/lib/loadLoader.js:47:3)
    at iteratePitchingLoaders (/Users/marc/Code/marcdel/tailwind_demo/assets/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
    at iteratePitchingLoaders (/Users/marc/Code/marcdel/tailwind_demo/assets/node_modules/loader-runner/lib/LoaderRunner.js:165:10)
    at /Users/marc/Code/marcdel/tailwind_demo/assets/node_modules/webpack/lib/NormalModule.js:316:20
    at /Users/marc/Code/marcdel/tailwind_demo/assets/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users/marc/Code/marcdel/tailwind_demo/assets/node_modules/loader-runner/lib/LoaderRunner.js:172:11
    at loadLoader (/Users/marc/Code/marcdel/tailwind_demo/assets/node_modules/loader-runner/lib/loadLoader.js:32:11)
    at iteratePitchingLoaders (/Users/marc/Code/marcdel/tailwind_demo/assets/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
    at iteratePitchingLoaders (/Users/marc/Code/marcdel/tailwind_demo/assets/node_modules/loader-runner/lib/LoaderRunner.js:165:10)
    at /Users/marc/Code/marcdel/tailwind_demo/assets/node_modules/loader-runner/lib/LoaderRunner.js:176:18
    at loadLoader (/Users/marc/Code/marcdel/tailwind_demo/assets/node_modules/loader-runner/lib/loadLoader.js:47:3)
    at iteratePitchingLoaders (/Users/marc/Code/marcdel/tailwind_demo/assets/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
    at iteratePitchingLoaders (/Users/marc/Code/marcdel/tailwind_demo/assets/node_modules/loader-runner/lib/LoaderRunner.js:165:10)
    at /Users/marc/Code/marcdel/tailwind_demo/assets/node_modules/loader-runner/lib/LoaderRunner.js:176:18
    at loadLoader (/Users/marc/Code/marcdel/tailwind_demo/assets/node_modules/loader-runner/lib/loadLoader.js:47:3)
    at iteratePitchingLoaders (/Users/marc/Code/marcdel/tailwind_demo/assets/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
    at runLoaders (/Users/marc/Code/marcdel/tailwind_demo/assets/node_modules/loader-runner/lib/LoaderRunner.js:365:2)
    at NormalModule.doBuild (/Users/marc/Code/marcdel/tailwind_demo/assets/node_modules/webpack/lib/NormalModule.js:295:3)
    at NormalModule.build (/Users/marc/Code/marcdel/tailwind_demo/assets/node_modules/webpack/lib/NormalModule.js:446:15)
    at Compilation.buildModule (/Users/marc/Code/marcdel/tailwind_demo/assets/node_modules/webpack/lib/Compilation.js:739:10)
    at /Users/marc/Code/marcdel/tailwind_demo/assets/node_modules/webpack/lib/Compilation.js:1111:12
    at /Users/marc/Code/marcdel/tailwind_demo/assets/node_modules/webpack/lib/NormalModuleFactory.js:409:6
    at /Users/marc/Code/marcdel/tailwind_demo/assets/node_modules/webpack/lib/NormalModuleFactory.js:155:13
    at AsyncSeriesWaterfallHook.eval [as callAsync] (eval at create (/Users/marc/Code/marcdel/tailwind_demo/assets/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:4:1)
    at AsyncSeriesWaterfallHook.lazyCompileHook (/Users/marc/Code/marcdel/tailwind_demo/assets/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/marc/Code/marcdel/tailwind_demo/assets/node_modules/webpack/lib/NormalModuleFactory.js:138:29
    at /Users/marc/Code/marcdel/tailwind_demo/assets/node_modules/webpack/lib/NormalModuleFactory.js:346:9
    at processTicksAndRejections (internal/process/task_queues.js:79:11)
 @ ./js/app.js 4:0-25
 @ multi ./js/app.js
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/sass-loader/dist/cjs.js!node_modules/postcss-loader/dist/cjs.js!css/app.scss:
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./css/app.scss] 3.55 KiB {mini-css-extract-plugin} [not cacheable] [built] [failed] [1 error]

    ERROR in ./css/app.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./css/app.scss)
    Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
    Error: Package exports for '/Users/marc/Code/marcdel/tailwind_demo/assets/node_modules/klona' do not define a valid './full' target
        at resolveExportsTarget (internal/modules/cjs/loader.js:614:9)
        at applyExports (internal/modules/cjs/loader.js:499:14)
        at resolveExports (internal/modules/cjs/loader.js:548:12)
        at Function.Module._findPath (internal/modules/cjs/loader.js:650:22)
        at Function.Module._resolveFilename (internal/modules/cjs/loader.js:948:27)
        at Function.Module._load (internal/modules/cjs/loader.js:854:27)
        at Module.require (internal/modules/cjs/loader.js:1023:19)
        at require (/Users/marc/Code/marcdel/tailwind_demo/assets/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
        at Object.<anonymous> (/Users/marc/Code/marcdel/tailwind_demo/assets/node_modules/postcss-loader/dist/utils.js:16:13)
        at Module._compile (/Users/marc/Code/marcdel/tailwind_demo/assets/node_modules/v8-compile-cache/v8-compile-cache.js:194:30)
        at Object.Module._extensions..js (internal/modules/cjs/loader.js:1167:10)
        at Module.load (internal/modules/cjs/loader.js:983:32)
        at Function.Module._load (internal/modules/cjs/loader.js:891:14)
        at Module.require (internal/modules/cjs/loader.js:1023:19)
        at require (/Users/marc/Code/marcdel/tailwind_demo/assets/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
        at Object.<anonymous> (/Users/marc/Code/marcdel/tailwind_demo/assets/node_modules/postcss-loader/dist/index.js:24:14)
        at Module._compile (/Users/marc/Code/marcdel/tailwind_demo/assets/node_modules/v8-compile-cache/v8-compile-cache.js:194:30)
        at Object.Module._extensions..js (internal/modules/cjs/loader.js:1167:10)
        at Module.load (internal/modules/cjs/loader.js:983:32)
        at Function.Module._load (internal/modules/cjs/loader.js:891:14)
        at Module.require (internal/modules/cjs/loader.js:1023:19)
        at require (/Users/marc/Code/marcdel/tailwind_demo/assets/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
        at Object.<anonymous> (/Users/marc/Code/marcdel/tailwind_demo/assets/node_modules/postcss-loader/dist/cjs.js:3:18)
        at Module._compile (/Users/marc/Code/marcdel/tailwind_demo/assets/node_modules/v8-compile-cache/v8-compile-cache.js:194:30)
        at Object.Module._extensions..js (internal/modules/cjs/loader.js:1167:10)
        at Module.load (internal/modules/cjs/loader.js:983:32)
        at Function.Module._load (internal/modules/cjs/loader.js:891:14)
        at Module.require (internal/modules/cjs/loader.js:1023:19)
        at require (/Users/marc/Code/marcdel/tailwind_demo/assets/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
        at loadLoader (/Users/marc/Code/marcdel/tailwind_demo/assets/node_modules/loader-runner/lib/loadLoader.js:18:17)
        at iteratePitchingLoaders (/Users/marc/Code/marcdel/tailwind_demo/assets/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
        at iteratePitchingLoaders (/Users/marc/Code/marcdel/tailwind_demo/assets/node_modules/loader-runner/lib/LoaderRunner.js:165:10)
        at /Users/marc/Code/marcdel/tailwind_demo/assets/node_modules/loader-runner/lib/LoaderRunner.js:176:18
        at loadLoader (/Users/marc/Code/marcdel/tailwind_demo/assets/node_modules/loader-runner/lib/loadLoader.js:47:3)
        at iteratePitchingLoaders (/Users/marc/Code/marcdel/tailwind_demo/assets/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
        at iteratePitchingLoaders (/Users/marc/Code/marcdel/tailwind_demo/assets/node_modules/loader-runner/lib/LoaderRunner.js:165:10)

mindok · September 17, 2020, 4:23am

Looks like this is a node issue: https://github.com/nodejs/modules/issues/446

I don’t think the version of Elixir / Liveview / Phoenix is going to make a difference - here’s another similar issue https://github.com/postcss/autoprefixer/issues/1328 - looks like they solved it by using Node v12 or 14.

marcdel · September 17, 2020, 5:03am

That did it, thanks!

If anyone else has this issue, I also had to (cd assets && npm rebuild node-sass) after upgrading node versions.

bradrf · February 5, 2021, 10:56pm

Hey folks! I’m an Elixir newb and running into what I think is a similar issue, however, I’m already using Node v12.20.1. Ideas on what I’m might’ve done wrong? The error info is really not helping me understand where to look:

ERROR in ./css/app.scss
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 (/app/assets/node_modules/postcss-loader/dist/index.js:38:24)
    at /app/assets/node_modules/webpack/lib/NormalModule.js:316:20
    at /app/assets/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /app/assets/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
 @ ./js/app.js 4:0-25
 @ multi ./js/app.js
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/sass-loader/dist/cjs.js!node_modules/postcss-loader/dist/cjs.js!css/app.scss:
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./css/app.scss] 219 bytes {mini-css-extract-plugin} [built] [failed] 
[1 error]
    
    ERROR in ./css/app.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./css/app.scss)
    Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
    TypeError: this.getOptions is not a function
        at Object.loader (/app/assets/node_modules/postcss-loader/dist/index.js:38:24)

derek-zhou · February 6, 2021, 4:49am

Anything can go wrong; the number one suspect is something is amiss in your webpack config.
Also I strongly suggest not to use sass together with postcss. All sane functionalities in sass have counterparts in postcss. You gain nothing out of it except making the pipeline even more brittle.

gbenga504 · February 11, 2021, 7:27pm

In case anyone wants to solve this, you can downgrade your postcss-loader to 4.2.0. Also, it’s best to make it a dev dependency

Sebb · February 11, 2021, 9:14pm

I took some notes when I setup tailwind (and alpine) with LiveView last week, maybe this helps someone.

Also, this is my first post here, so: Hello!

widojansen · February 28, 2021, 10:02am

Thx. Solved my webpack errors with latest phoenix.

This is the important part:
NOTE: can’t install postcss-loader@latest (v5.0) wih a phoenix 1.5.7 generated project, because it requires webpack v5.

loganhelms · July 15, 2021, 1:35am

This article worked for me when I ran into issues with Mike Clark’s article