niccolox

Phoenix Components DaisyUI runs locally but fails on Fly.io with library dependencies

inspired by the latest Phoenx.Components work on dev I started to build a Phoenix 1.7 dev sandbox and include a Phoenix Components DaisyUI library module and deploy to fly.io so I can run e2e tests in Browserstack and Percy.io

A couple of questions;

How do I create a Phoenix Component library? I started GitHub - niccolox/phoenix_components_daisy: phoenix components daisy · GitHub but got an error

#18 0.780 warning: function elixirc_paths/1 is unused
#18 0.780   /app/deps/phoenix_components_daisy/mix.exs:21
#18 0.780 
#18 0.828 ==> phoenix_components_daisy
#18 0.828 Compiling 2 files (.ex)
#18 0.843 warning: module attribute @doc was set but no definition follows it
#18 0.843   lib/phoenix_components_daisy.ex:6
#18 0.843 
#18 0.850 
#18 0.850 == Compilation error in file lib/components/cards/card.ex ==
#18 0.850 ** (CompileError) lib/components/cards/card.ex:2: module Phoenix.Component is not loaded and could not be found
#18 0.850     (elixir 1.14.0) expanding macro: Kernel.use/1
#18 0.850     lib/components/cards/card.ex:2: PhoenixComponentsDaisy.Card (module)
#18 0.852 could not compile dependency :phoenix_components_daisy, "mix compile" failed. Errors may have been logged above. You can recompile this dependency with "mix deps.compile phoenix_components_daisy", update it with "mix deps.update phoenix_components_daisy" or clean it with "mix deps.clean phoenix_components_daisy"

does a library of Phoenix Components need a phoenix requirement? *

I know the Phoenix Components work when I include them as simple files in the components folder
https://github.com/niccolox/phx_1_7_dev_sandbox/blob/main/lib/phx_1_7_dev_sandbox_web/components/daisycard.ex

When I use the Local Phoenix Component (i.e. not imported from Github) I get a a tailwind esbuild error

 => ERROR [builder 13/17] RUN mix assets.deploy                                                                                                                                    3.5s
------                                                                                                                                                                                  
 > [builder 13/17] RUN mix assets.deploy:                                                                                                                                               
#22 0.838                                                                                                                                                                               
#22 0.838 01:33:55.337 [debug] Downloading tailwind from https://github.com/tailwindlabs/tailwindcss/releases/download/v3.1.8/tailwindcss-linux-x64                                     
#22 3.474 node:internal/modules/cjs/loader:933                                                                                                                                          
#22 3.474   const err = new Error(message);                                                                                                                                             
#22 3.474               ^
#22 3.474 
#22 3.474 Error: Cannot find module 'daisyui'
#22 3.474 Require stack:
#22 3.474 - /app/assets/tailwind.config.js
#22 3.474 - /snapshot/tailwindcss/lib/cli.js
#22 3.474 - /snapshot/tailwindcss/standalone-cli/standalone.js
#22 3.474 1) If you want to compile the package/file into executable, please pay attention to compilation warnings and specify a literal in 'require' call. 2) If you don't want to compile the package/file into executable and want to 'require' it from filesystem (likely plugin), specify an absolute path in 'require' call using process.cwd() or process.execPath.
#22 3.474     at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
#22 3.474     at Function._resolveFilename (pkg/prelude/bootstrap.js:1955:46)
#22 3.474     at Function.Module._load (node:internal/modules/cjs/loader:778:27)
#22 3.474     at Module.require (node:internal/modules/cjs/loader:1005:19)
#22 3.474     at Module.require (pkg/prelude/bootstrap.js:1855:31)
#22 3.474     at Module.require (/snapshot/tailwindcss/standalone-cli/standalone.js:25:22)
#22 3.474     at require (node:internal/modules/cjs/helpers:102:18)
#22 3.474     at Object.<anonymous> (/app/assets/tailwind.config.js:21:5)
#22 3.474     at Module._compile (node:internal/modules/cjs/loader:1105:14)
#22 3.474     at Module._compile (pkg/prelude/bootstrap.js:1894:32) {
#22 3.474   code: 'MODULE_NOT_FOUND',
#22 3.474   requireStack: [
#22 3.474     '/app/assets/tailwind.config.js',
#22 3.474     '/snapshot/tailwindcss/lib/cli.js',
#22 3.474     '/snapshot/tailwindcss/standalone-cli/standalone.js'
#22 3.474   ],
#22 3.474   pkg: true
#22 3.474 }
#22 3.488 ** (Mix) `mix tailwind default --minify` exited with 1
------
Error error building: executor failed running [/bin/sh -c mix assets.deploy]: exit code: 1

Sandbox Phoenix 1.7 dev app
https://github.com/niccolox/phx_1_7_dev_sandbox

Phoenix Component DaisyUI dev library
https://github.com/niccolox/phoenix_components_daisy

3 comments

/phoenix #flyio #phoenixcomponents

3 1508 3

2022-10-01 03:04:10 UTC

Marked As Solved

andreaseriksson

You need to run npm install in the docker file.

Post #3

Also Liked

tcoopman

For building on fly.io

There is not any magic. You’ll see a docker file is created by fly. Have a look at those instructions and see if they work locally. Especially the failing step of mix assets.deploy. if that works see if you can build the docker image locally.

Post #2