在Umbrella项目中新建Phoenix 1.7应用构建失败

背景 #

我创建了一个全新的Umbrella应用，尝试在其中创建Phoenix应用，虽然能成功创建Phoenix应用，但无法完成构建。

问题重现步骤 #

按以下步骤在全新Umbrella项目中创建Phoenix应用：

• mix new test_app --umbrella
• cd apps
• mix phx.new web_interface --no-dashboard --no-ecto --no-gettext --no-mailer --live

上述命令执行正常，但执行应用初始化时出现问题：

• cd web_interface
• 执行mix setup返回如下警告：

08:14:50.318 [warning] tailwind version is not configured. Please set it in your config files:
config :tailwind, :version, "3.2.4"
Browserslist: caniuse-lite is outdated. Please run:
npx update-browserslist-db@latest
Why you should do it regularly: https://github.com/browserslist/update-db#readme
Rebuilding...

重建完成后出现错误：

Done in 200ms.
08:14:52.146 [warning] esbuild version is not configured. Please set it in your config files:

config :esbuild, :version, "0.16.4"

** (RuntimeError) no arguments passed to esbuild
(esbuild 0.7.0) lib/esbuild.ex:170: Esbuild.run/2
(esbuild 0.7.0) lib/mix/tasks/esbuild.ex:49: Mix.Tasks.Esbuild.install_and_run/1
(mix 1.14.1) lib/mix/task.ex:421: anonymous fn/3 in Mix.Task.run_task/4
(mix 1.14.1) lib/mix/task.ex:479: Mix.Task.run_alias/6
(mix 1.14.1) lib/mix/cli.ex:84: Mix.CLI.run_task/2

已尝试更新本地工具：

• mix local.hex
• mix archive.install hex phx_new

问题仍未解决，使用Windows系统。

疑问 #

1. 在Umbrella项目中新建应用时，Elixir会自动识别，无需额外操作，是否确实如此？
2. Phoenix 1.6中--live标记已成为默认项，Phoenix 1.7是否仍保持此默认设置？
3. 为何会遇到此错误？该如何解决？

关于Umbrella项目的自动识别 #

是的，Elixir会自动识别Umbrella项目中的子应用，无需额外配置。但要注意，子应用的依赖、配置是独立的，部分工具操作需要确保在子应用目录下执行，或者在Umbrella根目录用mix cmd针对子应用执行命令。

关于Phoenix 1.7的--live默认设置 #

Phoenix 1.7中--live不再是默认项。从1.7版本开始，Phoenix默认使用无LiveView的模板，若需要启用LiveView，必须显式添加--live参数，这和1.6的默认行为不同。

错误原因及解决方法 #

原因 #

在Umbrella子应用中创建Phoenix项目时，phx.new生成的配置文件可能未正确设置esbuild和tailwind的版本参数，加上Windows系统的路径或命令执行逻辑影响，导致mix setup运行时无法正确传递参数给esbuild。

解决步骤 #

1. 配置工具版本：在子应用web_interface的config/config.exs文件中添加以下配置：

   config :tailwind, :version, "3.2.4"
   config :esbuild, :version, "0.16.4"
   

2. 修复esbuild参数配置：检查web_interface的mix.exs中esbuild的任务配置，确保assets相关任务传递了正确参数，示例配置如下：

   defp aliases do
     [
       setup: ["deps.get", "assets.setup", "assets.build"],
       "assets.setup": ["tailwind.install", "esbuild.install"],
       "assets.build": ["tailwind default", "esbuild default"],
       "assets.deploy": ["tailwind default --minify", "esbuild default --minify", "phx.digest"]
     ]
   end
   

3. 更新browserslist数据库：进入子应用的assets目录，执行命令：

   npx update-browserslist-db@latest
   

4. 重新执行setup：回到web_interface目录，运行：

   mix setup
   

如果问题仍存在，尝试在Umbrella根目录下执行针对子应用的命令：

mix cmd --app web_interface mix setup

内容的提问来源于stack exchange，提问作者Flame_Phoenix