marcdel
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)
Marked As Solved
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.
2
Also Liked
Sebb
I took some notes when I setup tailwind (and alpine) with LiveView last week, maybe this helps someone.
https://github.com/georgfaust/petal
Also, this is my first post here, so: Hello!
3
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.
1
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.
1
Last Post!
loganhelms
Popular in Questions
Hi,
I am new to Elixir. I am trying to use the DateTime component to insert a date into MySQL however the there seems to be no way to fo...
New
Hello, how can I check the Phoenix version ?
Thanks !
New
I have seen a lot of code which picks the first element from a list using Enum.at(0) instead of List.first. Is there a reason why people ...
New
Hi guys, i’m new in the Elixir world, and i have to say, that i love it!
i’m having some problem to understand anonymous functions with ...
New
When I run the Plug and I recompile I wind up having to use Ctrl C to quit iex and start again. Witht the help of rlwrap I can use the cu...
New
I want to highlight html closing tags when i click a html tag. That works in .html files but doesnt work for html.eex templates. How can...
New
I am trying to start a new phoenix project with elixir 1.9, but mix phx.new does not work. It says that ** (Mix) The task "phx.new" could...
New
Other popular topics
I am using Ecto timestamps with postgres, I can see the timestamps() use the :naive_dateime but for my use case I wanted to store the ti...
New
Hi. I’ve noticed that Windows Powershell has it’s own IEX command and you cannot access Elixir’s IEX due to the conflict. This isn’t a cr...
New
Hello again - after a longish gap I’ve decided I really must dig into Elixir and see what’s been happening here - so I have a few questio...
New
I wrote this comment on r/haskell, and it’s not popular there. :wink: But I think I’m on to something…
Haskell reminds me of Java, and e...
New
Hi All,
I set a environment variables in dev.exs , like below code.
when i start server, how can i set the ${enable} value?
thanks.
d...
New
In the code below, if the create action is not set to accept “extra_key” as an input, it errors out with a message shown above. Is there ...
New
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Courses that'll move you from confusion to "Aha, now I get it!"
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #elixirconf-us
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #security
- #hex
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Producing high quality Elixir screencasts since 2017.
Enabling companies to succeed by building software people love.
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"