Error adding Tailwind CSS to Phoenix 1.5 LiveView application

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)

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.

2 Likes

That did it, thanks!

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

1 Like

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)

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.

1 Like

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

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!

3 Likes

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.

1 Like

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