Deploying a phoenix + esbuild + react app

Questions / Help Build debugging
1

I’m trying to deploy a phoenix 1.6 app with react, on the client side. It builds fine locally but I can’t seem to get it to build remotely.

> ERROR [builder 13/17] RUN mix assets.deploy                                                                                                            1.3s
------
 > [builder 13/17] RUN mix assets.deploy:
#22 0.892 
#22 0.892 14:41:34.916 [debug] Downloading esbuild from https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.14.29.tgz
#22 1.243 ✘ [ERROR] Could not resolve "react"
#22 1.243 
#22 1.243     js/app.js:3:18:
#22 1.243       3 │ import React from 'react';
#22 1.243         ╵                   ~~~~~~~
#22 1.243 
#22 1.243   You can mark the path "react" as external to exclude it from the bundle, which will remove this error.

Following the suggestion and excluding it from the bundle leads to:

Uncaught Error: Dynamic require of "react" is not supported

I tried following the guides (Asset Management — Phoenix v1.6.12) but that didn’t help much either.

1 Like
2

i am having the same issue here, umbrella app, phoenix 1.7 rc-2
i install the external dependencies this way (inside of app/bla_web):
npm install flowbite --prefix assets

the package.json

{
  "dependencies": {
    "flowbite": "^1.6.3"
  }
}

error

#22 3.194 00:09:06.836 [debug] Downloading tailwind from https://github.com/tailwindlabs/tailwindcss/releases/download/v3.2.4/tailwindcss-linux-x64
#22 5.823 
#22 5.823 Rebuilding...
#22 6.749 
#22 6.750 Done in 1019ms.
#22 6.805 
#22 6.805 00:09:10.454 [debug] Downloading esbuild from https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.14.41.tgz
#22 7.005 ✘ [ERROR] Could not resolve "flowbite"
#22 7.005 
#22 7.005     js/app.js:25:7:
#22 7.005       25 │ import 'flowbite'
#22 7.005          ╵        ~~~~~~~~~~
#22 7.005 
#22 7.005   You can mark the path "flowbite" as external to exclude it from the bundle, which will remove this error.
#22 7.005 
#22 7.023 1 error
#22 7.037 ==> iobee_web
#22 7.037 ** (Mix) `mix esbuild default --minify` exited with 1
#22 ERROR: executor failed running [/bin/sh -c cd apps/iobee_web && npm install --production && mix assets.deploy]: exit code: 1
------
 > [builder 13/17] RUN cd apps/iobee_web && npm install --production && mix assets.deploy:
#22 7.005 
#22 7.005     js/app.js:25:7:
#22 7.005       25 │ import 'flowbite'
#22 7.005          ╵        ~~~~~~~~~~
#22 7.005 
#22 7.005   You can mark the path "flowbite" as external to exclude it from the bundle, which will remove this error.
#22 7.005 
#22 7.023 1 error
#22 7.037 ==> iobee_web
#22 7.037 ** (Mix) `mix esbuild default --minify` exited with 1
------
Error failed to fetch an image or build from source: error building: executor failed running [/bin/sh -c cd apps/iobee_web && npm install --production && mix assets.deploy]: exit code: 1
3

Edit:
I found the solution. The problem seems that the node_modules are not copied to the docker container.
Check your .dockerignore file if it excludes that folder. In my case, I commented out this line:

# /assets/node_modules/

2 Likes
4

Had this very same error today and the whole asset pipeline was failing. Thankful to @kiru 's comment.

Fly team should remove that line from Phoenix apps

1 Like