Error adding Tailwind CSS to Phoenix 1.5 LiveView application

marcdel

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)

8 comments

/phoenix #webpack #liveview #tailwindcss

0 4124 8

2021-07-15 01:35:57 UTC

Showing Posts 1 to 8

Show Best Posts
Show All (oldest first)
Show All (newest first)

mindok

Looks like this is a node issue: node v13.0-v13.1 errors on require of a module with "exports" defined · Issue #446 · nodejs/modules · GitHub

I don’t think the version of Elixir / Liveview / Phoenix is going to make a difference - here’s another similar issue Package exports for '...\autoprefixer\node_modules\kleur' do not define a valid './colors' target in version 9.8.1 · Issue #1328 · postcss/autoprefixer · GitHub - looks like they solved it by using Node v12 or 14.

Post #1

marcdel

That did it, thanks!

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

Post #2

bradrf

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)

Post #3

derek-zhou

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.

Post #4