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.

1 Like

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