项目目录
项目目录
  • 发布:2022-05-18 11:55
  • 更新:2024-04-23 09:41
  • 阅读:14491

【报Bug】HBuilderX mac M1编译 vite/vue3 cli项目时编译不了(hbx运行编译)

分类:HBuilderX

产品分类: HbuilderX

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: macOS Monterey12.3.1 Apple M1芯片

HBuilderX版本号: 3.4.10

操作步骤:

使用Vue3/Vite版

创建以 javascript 开发的工程(如命令行创建失败,请直接访问 gitee (opens new window)下载模板)

npx degit dcloudio/uni-preset-vue#vite my-vue3-project  
cd  my-vue3-project  
npm install

打开HbuilderX 3.4.10-alpha 或者HbuilderX3.4.7正式版。
导入工程 my-vue3-project
点击菜单 运行->运行到浏览器->chrome (可暂时用h5测试,但项目是要做APP的,所以无法用cli的方式运行到指定设备或模拟器中
按照命令 npm run dev:h5是能正常启动的。

ps: HbuilderX 3.4.10 -alpha 的底部终端中输入 arch 系统架构居然是 i386, 我的系统如上面所说,是arm64 ,
哪怕运行配置中选择的运行终端类型是外部终端和内置终端都是如此。两者除了默认路径不同,好像没有啥区别

预期结果:
11:48:47.216 Port 3000 is in use, trying another one...  
11:48:47.222 Port 3001 is in use, trying another one...  
11:48:47.222   vite v2.9.9 dev server running at:  
11:48:47.228   - Local:    http://localhost:3002/  
11:48:47.250   - Network:  http://192.168.1.47:3002/  
11:48:47.256 项目 'app-terminal' 编译成功。前端运行日志,请另行在浏览器的控制台查看。  
11:48:47.262 H5版常见问题参考: https://ask.dcloud.net.cn/article/35232  
11:48:47.263   ready in 1134ms.  

实际结果:
[广告] 11:40:53.520 DCloud 2022新春招聘开启,欢迎前端、Android、C++/QT来投简历! 详情点击  
11:40:53.583 项目 'my-vue3-project' 开始编译...  
11:40:54.457 请注意运行模式下,因日志输出、sourcemap 以及未压缩源码等原因,性能和包体积,均不及发行模式。  
11:40:54.461 正在编译中...  
11:40:54.461 failed to load config from /Users/stephen/code/my-vue3-project/vite.config.js  
11:40:54.464 error when starting dev server:  
11:40:54.467 Error:   
11:40:54.468 You installed esbuild on another platform than the one you're currently using.  
11:40:54.469 This won't work because esbuild is written with native code and needs to  
11:40:54.471 install a platform-specific binary executable.  
11:40:54.480 Specifically the "esbuild-darwin-arm64" package is present but this platform  
11:40:54.480 needs the "esbuild-darwin-64" package instead. People often get into this  
11:40:54.483 situation by installing esbuild on Windows or macOS and copying "node_modules"  
11:40:54.483 into a Docker image that runs Linux, or by copying "node_modules" between  
11:40:54.484 Windows and WSL environments.  
11:40:54.486 If you are installing with npm, you can try not copying the "node_modules"  
11:40:54.487 directory when you copy the files over, and running "npm ci" or "npm install"  
11:40:54.488 on the destination platform after the copy. Or you could consider using yarn  
11:40:54.489 instead which has built-in support for installing a package on multiple  
11:40:54.490 platforms simultaneously.  
11:40:54.492 If you are installing with yarn, you can try listing both this platform and the  
11:40:54.492 other platform in your ".yarnrc.yml" file using the "supportedArchitectures"  
11:40:54.494 feature: https://yarnpkg.com/configuration/yarnrc/#supportedArchitectures  
11:40:54.499 Keep in mind that this means multiple copies of esbuild will be present.  
11:40:54.501 Another alternative is to use the "esbuild-wasm" package instead, which works  
11:40:54.502 the same way on all platforms. But it comes with a heavy performance cost and  
11:40:54.503 can sometimes be 10x slower than the "esbuild" package, so you may also not  
11:40:54.505 want to do that.  
11:40:54.506     at generateBinPath (/Users/stephen/code/my-vue3-project/node_modules/esbuild/lib/main.js:1788:17)  
11:40:54.506     at esbuildCommandAndArgs (/Users/stephen/code/my-vue3-project/node_modules/esbuild/lib/main.js:1872:31)  
11:40:54.508     at ensureServiceIsRunning (/Users/stephen/code/my-vue3-project/node_modules/esbuild/lib/main.js:2034:25)  
11:40:54.510     at Object.build (/Users/stephen/code/my-vue3-project/node_modules/esbuild/lib/main.js:1927:26)  
11:40:54.515     at bundleConfigFile (/Users/stephen/code/my-vue3-project/node_modules/vite/dist/node/chunks/dep-59dc6e00.js:61872:34)  
11:40:54.515     at loadConfigFromFile (/Users/stephen/code/my-vue3-project/node_modules/vite/dist/node/chunks/dep-59dc6e00.js:61849:35)  
11:40:54.518     at resolveConfig (/Users/stephen/code/my-vue3-project/node_modules/vite/dist/node/chunks/dep-59dc6e00.js:61376:34)  
11:40:54.520     at createServer (/Users/stephen/code/my-vue3-project/node_modules/vite/dist/node/chunks/dep-59dc6e00.js:59783:26)  
11:40:54.521     at createServer (/Users/stephen/code/my-vue3-project/node_modules/@dcloudio/vite-plugin-uni/dist/cli/server.js:15:50)  
11:40:54.522     at CAC.runDev (/Users/stephen/code/my-vue3-project/node_modules/@dcloudio/vite-plugin-uni/dist/cli/action.js:21:45)

bug描述:

使用官方vue-cli创建工程:

npx degit dcloudio/uni-preset-vue#vite my-vue3-project

此工程创建后

npm install

使用HubilderX的运行到... chrome浏览器,ios模拟器,安卓真机上都报一样的错误

具体错误如下(可查看附件)

[广告] 11:40:53.520 DCloud 2022新春招聘开启,欢迎前端、Android、C++/QT来投简历! 详情点击  
11:40:53.583 项目 'my-vue3-project' 开始编译...  
11:40:54.457 请注意运行模式下,因日志输出、sourcemap 以及未压缩源码等原因,性能和包体积,均不及发行模式。  
11:40:54.461 正在编译中...  
11:40:54.461 failed to load config from /Users/stephen/code/my-vue3-project/vite.config.js  
11:40:54.464 error when starting dev server:  
11:40:54.467 Error:   
11:40:54.468 You installed esbuild on another platform than the one you're currently using.  
11:40:54.469 This won't work because esbuild is written with native code and needs to  
11:40:54.471 install a platform-specific binary executable.  
11:40:54.480 Specifically the "esbuild-darwin-arm64" package is present but this platform  
11:40:54.480 needs the "esbuild-darwin-64" package instead. People often get into this  
11:40:54.483 situation by installing esbuild on Windows or macOS and copying "node_modules"  
11:40:54.483 into a Docker image that runs Linux, or by copying "node_modules" between  
11:40:54.484 Windows and WSL environments.  
11:40:54.486 If you are installing with npm, you can try not copying the "node_modules"  
11:40:54.487 directory when you copy the files over, and running "npm ci" or "npm install"  
11:40:54.488 on the destination platform after the copy. Or you could consider using yarn  
11:40:54.489 instead which has built-in support for installing a package on multiple  
11:40:54.490 platforms simultaneously.  
11:40:54.492 If you are installing with yarn, you can try listing both this platform and the  
11:40:54.492 other platform in your ".yarnrc.yml" file using the "supportedArchitectures"  
11:40:54.494 feature: https://yarnpkg.com/configuration/yarnrc/#supportedArchitectures  
11:40:54.499 Keep in mind that this means multiple copies of esbuild will be present.  
11:40:54.501 Another alternative is to use the "esbuild-wasm" package instead, which works  
11:40:54.502 the same way on all platforms. But it comes with a heavy performance cost and  
11:40:54.503 can sometimes be 10x slower than the "esbuild" package, so you may also not  
11:40:54.505 want to do that.  
11:40:54.506     at generateBinPath (/Users/stephen/code/my-vue3-project/node_modules/esbuild/lib/main.js:1788:17)  
11:40:54.506     at esbuildCommandAndArgs (/Users/stephen/code/my-vue3-project/node_modules/esbuild/lib/main.js:1872:31)  
11:40:54.508     at ensureServiceIsRunning (/Users/stephen/code/my-vue3-project/node_modules/esbuild/lib/main.js:2034:25)  
11:40:54.510     at Object.build (/Users/stephen/code/my-vue3-project/node_modules/esbuild/lib/main.js:1927:26)  
11:40:54.515     at bundleConfigFile (/Users/stephen/code/my-vue3-project/node_modules/vite/dist/node/chunks/dep-59dc6e00.js:61872:34)  
11:40:54.515     at loadConfigFromFile (/Users/stephen/code/my-vue3-project/node_modules/vite/dist/node/chunks/dep-59dc6e00.js:61849:35)  
11:40:54.518     at resolveConfig (/Users/stephen/code/my-vue3-project/node_modules/vite/dist/node/chunks/dep-59dc6e00.js:61376:34)  
11:40:54.520     at createServer (/Users/stephen/code/my-vue3-project/node_modules/vite/dist/node/chunks/dep-59dc6e00.js:59783:26)  
11:40:54.521     at createServer (/Users/stephen/code/my-vue3-project/node_modules/@dcloudio/vite-plugin-uni/dist/cli/server.js:15:50)  
11:40:54.522     at CAC.runDev (/Users/stephen/code/my-vue3-project/node_modules/@dcloudio/vite-plugin-uni/dist/cli/action.js:21:45)
2022-05-18 11:55 负责人:无 分享
已邀请:

最佳回复

项目目录

项目目录 (作者)

最终解决方案:(不在局限于版本)

上面的压缩包只支持0.14.39版,我研究了下参考官方这篇文章:

https://esbuild.github.io/getting-started/#download-a-build
可以在任何地方,运行:


curl -O https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.14.42.tgz  
tar xf ./esbuild-darwin-64-0.14.42.tgz  

解压后得到package
将package改名为"esbuild-darwin-64"
将"esbuild-darwin-64"文件夹copy到项目的"node_modules"中再次运行即可。

  • traveller2022

    确实可以

    2022-06-23 17:26

  • traveller2022

    就是版本号得更新下

    2022-06-23 17:26

  • 1***@qq.com

    回复 traveller2022: 请问怎么更新版本号?谢先了!

    2022-07-29 19:42

  • traveller2022

    回复 1***@qq.com: 把那个curl的地址里的esbuild版本号换成自己项目实际的版本号,再curl

    2022-08-20 16:27

  • 1***@qq.com

    可以,谢谢大佬

    2022-11-11 20:14

  • 在在

    运行之后还是报错呐

    2023-05-19 19:11

舌尖跳舞

舌尖跳舞 - 现在不减肥,以后徒伤悲。

推荐个解决办法:电脑M1,vite 4.2.1

Error:   
10:28:16.895 You installed esbuild for another platform than the one you're currently using.  
10:28:16.898 This won't work because esbuild is written with native code and needs to  
10:28:16.903 install a platform-specific binary executable.  
10:28:16.906 Specifically the "@esbuild/darwin-arm64" package is present but this platform  
10:28:16.909 needs the "@esbuild/darwin-x64" package instead. People often get into this  
10:28:16.910 situation by installing esbuild with npm running inside of Rosetta 2 and then  
10:28:16.913 trying to use it with node running outside of Rosetta 2, or vice versa (Rosetta  
10:28:16.916 2 is Apple's on-the-fly x86_64-to-arm64 translation service).

错误原因: 存在@esbuild/darwin-arm64,但需要@esbuild/darwin-x64
解决思路:package.json中添加"@esbuild/darwin-x64":"version", 但是m1芯片不支持,所以就找到 node_modules/@esbuild/darwin-arm64, 复制darwin-arm64文件夹改名darwin-x64,如下图所示

  • aelvetz

    我也是这样解决了。

    2023-04-28 17:00

  • 2***@qq.com

    可以

    2023-07-15 18:35

  • 8***@qq.com

    非常感谢,亲测可以了!

    2023-09-05 09:33

  • c***@outlook.com

    这个方法能行,下载 @esbuild/darwin-x64 始终报错 ,芯片不支持,这样手动修改可以解决问题

    2023-09-08 01:38

  • c***@163.com

    亲测可用,感谢!

    2023-09-11 16:28

  • 1***@qq.com

    2023-10-10 mac M1 使用你说的还是不行,有谁总结一下吗?

    2023-10-10 16:19

  • 1***@qq.com

    出现:Host version "0.18.20" does not match binary version "0.17.19"

    2023-10-10 16:20

  • n***@sina.cn

    回复 1***@qq.com: 仔细分析这两个版本是由什么依赖引入的,然后切换依赖版本,统一esbuild的版本。(yarn list查看依赖图)

    2023-10-17 13:41

  • 1***@163.com

    Cannot start service: Host version "0.16.17" does not match binary version "0.17.19" 我出现这个错误是什么情况啊

    2024-01-29 15:25

  • 5***@qq.com

    正解

    2024-05-07 14:29

4***@qq.com

4***@qq.com

这bug半年了都不解决的吗?
UniApp就是这么服务几百万开发者的吗?

  • 云帆Plan

    现在23年了,还没解决呢,真的拉胯,这个问题几乎搜不到

    2023-02-09 17:27

  • 3***@qq.com

    回复 云帆Plan: 2024了这个bug还在呢,我真的服了uniapp

    2024-02-28 12:51

云帆Plan

云帆Plan

经排查,应该是vite版本的问题,本来是4.x,使用官方提供的命令npx @dcloudio/uvm后,vite版本被修改为3.x,问题似乎解决了

  • 2***@qq.com

    感谢,运行app报错,原来用官方的npx @dcloudio/uvm alpha命令把vite升到4了,使用npx @dcloudio/uvm降为3.x可以运行

    2023-02-12 23:21

z***@foxmail.com

z***@foxmail.com

截止到今天目前出问题,esbuild要更新0.16.17,我是直接安装的

pnpm add @esbuild/darwin-arm64 -D

pnpm add @esbuild/darwin-x64 -D

  • z***@foxmail.com

    用什么版本,直接锁定就好了

    2023-03-27 16:14

  • 在在

    我也是esbuild0.16.17 不行呐

    2023-05-19 19:47

  • 3***@qq.com

    感谢楼主,解决了。我用的是:node@18.15.0, esbuild@0.16.17 -》安装依赖后,就报错esbuild问题 -》 然后使用楼主给的命令安装后(pnpm add @esbuild/darwin-x64@0.16.17 -D),再次运行就可以了。

    2023-05-23 16:23

项目目录

项目目录 (作者)

该问题已经解决
注意:我的版本是"version": "0.14.39", 必须要这个版本才行
node_modules目录下的 esbuild 目录下的lib目录下必须要有 downloaded-esbuild-darwin-64-esbuild 这个文件

我已经放在附件里,只要加入该文件就可以了,这个也是我运气好,第一次创建项目时,通过npm install 下载到这个文件,后来我发现官方esbuild更新过后,就再也无法下载到了。

查看esbuild/lib/main.js
下面有如下这句:(1768行 - 1841行)


unction downloadedBinPath(pkg, subpath) {  
  const esbuildLibDir = path.dirname(require.resolve("esbuild"));  
  return path.join(esbuildLibDir, `downloaded-${pkg}-${path.basename(subpath)}`);  
}  
function generateBinPath() {  
  if (ESBUILD_BINARY_PATH) {  
    return { binPath: ESBUILD_BINARY_PATH, isWASM: false };  
  }  
  const { pkg, subpath, isWASM } = pkgAndSubpathForCurrentPlatform();  
  let binPath;  
  try {  
    binPath = require.resolve(`${pkg}/${subpath}`);  
  } catch (e) {  
    binPath = downloadedBinPath(pkg, subpath);  
    if (!fs.existsSync(binPath)) {  
      try {  
        require.resolve(pkg);  
      } catch {  
        const otherPkg = pkgForSomeOtherPlatform();  
        if (otherPkg) {  
          throw new Error(`  
You installed esbuild on another platform than the one you're currently using.  
This won't work because esbuild is written with native code and needs to  
install a platform-specific binary executable.  

Specifically the "${otherPkg}" package is present but this platform  
needs the "${pkg}" package instead. People often get into this  
situation by installing esbuild on Windows or macOS and copying "node_modules"  
into a Docker image that runs Linux, or by copying "node_modules" between  
Windows and WSL environments.  

If you are installing with npm, you can try not copying the "node_modules"  
directory when you copy the files over, and running "npm ci" or "npm install"  
on the destination platform after the copy. Or you could consider using yarn  
instead which has built-in support for installing a package on multiple  
platforms simultaneously.  

If you are installing with yarn, you can try listing both this platform and the  
other platform in your ".yarnrc.yml" file using the "supportedArchitectures"  
feature: https://yarnpkg.com/configuration/yarnrc/#supportedArchitectures  
Keep in mind that this means multiple copies of esbuild will be present.  

Another alternative is to use the "esbuild-wasm" package instead, which works  
the same way on all platforms. But it comes with a heavy performance cost and  
can sometimes be 10x slower than the "esbuild" package, so you may also not  
want to do that.  
`);  
        }  
        throw new Error(`The package "${pkg}" could not be found, and is needed by esbuild.  

If you are installing esbuild with npm, make sure that you don't specify the  
"--no-optional" flag. The "optionalDependencies" package.json feature is used  
by esbuild to install the correct binary executable for your current platform.`);  
      }  
      throw e;  
    }  
  }  
  let isYarnPnP = false;  
  try {  
    require("pnpapi");  
    isYarnPnP = true;  
  } catch (e) {  
  }  
  if (isYarnPnP) {  
    const esbuildLibDir = path.dirname(require.resolve("esbuild"));  
    const binTargetPath = path.join(esbuildLibDir, `pnpapi-${pkg}-${path.basename(subpath)}`);  
    if (!fs.existsSync(binTargetPath)) {  
      fs.copyFileSync(binPath, binTargetPath);  
      fs.chmodSync(binTargetPath, 493);  
    }  
    return { binPath: binTargetPath, isWASM };  
  }  
  return { binPath, isWASM };  
}  
9***@qq.com

9***@qq.com - dobbinsoft 软件开发

我也遇到了,感谢

  • 项目目录 (作者)

    已经研究出最终方案,可以任意版本

    2022-06-01 14:29

干净又爱笑

干净又爱笑

使用上述提供的copy的方法后
报错信息: Cannot start service: Host version "0.14.48" does not match binary version "0.14.42"

解决方法:
重新安装依赖 将 node_modules/esbuild-darwin-arm64 修改为 esbuild-darwin-64

  • 1***@qq.com

    windows下碰到了同样的问题:[ERROR] Cannot start service: Host version "0.14.29" does not match binary version "0.14.51"

    请问怎么重新安装依赖,降版本? 感谢!

    2022-07-29 19:39

4***@qq.com

4***@qq.com

pnpm add @esbuild/darwin-x64@0.16.17 -D

7***@qq.com

7***@qq.com

您好,我这边版本是0.14.47, 最新包esbuild-darwin-64-0.14.45的 我怎么去降版本呢。

  • 项目目录 (作者)

    看上面的最终解决方案,不再局限于版本的方案,curl后面的文件版本改成自己目前的版本就可以了。

    2022-08-31 10:24

浅笑无痕

浅笑无痕

我用 MacBook Pro M1 Pro 芯片也遇到问题,uni-app 官方也没提供对应的解决方案,希望官方及时跟进

  • 瀚海浪亭

    把node_modules下面的esbuild-darwin-arm64复制粘贴一份,然后将复制粘贴出来的那个改名为esbuild-darwin-64

    2022-11-07 11:41

  • 1***@qq.com

    参考上面方案是可以的,可以任意版本

    2022-11-11 20:15

e***@foxmail.com

e***@foxmail.com - 你的指尖,拥有改变世界的力量!

vue-cli版 可以直接用 包管理工具手动安装即可

pnpm

pnpm add esbuild-darwin-64 -D

yarn

yarn add esbuild-darwin-64
  • 3***@qq.com

    我和你电脑一样 但是我不行 pnpm i 后pnpm add esbuild-darwin-64 -D

    2023-02-27 14:41

  • 瀚海浪亭

    回复 3***@qq.com: 不要用pnpm,用yarn

    2023-08-28 17:09

q***@gmail.com

q***@gmail.com

官方就是不打算解决这个问题了?这么久了还存在,真的吐了。

项目目录

项目目录 (作者)

把node_modules下面的esbuild复制粘贴一份,然后将复制粘贴出来的那个改名为esbuild-darwin-64 和 esbuild-darwin-arm64 各一个,改下名字就可以过了。

  • 在在

    这样也不行呐

    2023-05-19 19:16

1***@qq.com

1***@qq.com

可以先检查一下node版本,我用了最新的19.8.1 npm install得到的就是arm版本的@esbuild/darwin-arm64,换成官方稳定版v18.15.0的node就可以正常npm install获得@esbuild/darwin-x64了

Bman

Bman - 秃头的人

使用 npm i @esbuild/darwin-arm64 -D 安装就可以了

我的node 版本 18.16.0

  • 3***@qq.com

    真的吗?我一直修复不了,uniapp太坑了

    2024-02-28 13:18

j***@outlook.com

j***@outlook.com

现在gitee最新ts的hello world模版项目在mac m1pro 电脑上按照上述几个方法都不可用,还有最新的解决方案吗

1***@qq.com

1***@qq.com

按照上面的方法还是报错

✘ [ERROR] Cannot start service: Host version "0.18.20" does not match binary version "0.17.19"
  • 2***@qq.com

    请问解决了吗,我也是这个问题

    2024-03-06 17:58

h***@163.com

h***@163.com

Mac M1电脑,使用Vue3/Vite版创建项目,vite版本:"vite": "4.0.3"
使用HBuilderX运行项目报错:

14:43:00.142 Error:   
14:43:00.150 You installed esbuild for another platform than the one you're currently using.  
14:43:00.150 This won't work because esbuild is written with native code and needs to  
14:43:00.162 install a platform-specific binary executable.  
14:43:00.170 Specifically the "@esbuild/darwin-arm64" package is present but this platform  
14:43:00.171 needs the "@esbuild/darwin-x64" package instead. People often get into this  
14:43:00.179 situation by installing esbuild with npm running inside of Rosetta 2 and then  
14:43:00.179 trying to use it with node running outside of Rosetta 2, or vice versa (Rosetta  
14:43:00.187 2 is Apple's on-the-fly x86_64-to-arm64 translation service).

尝试安装 @esbuild/darwin-arm64

npm install -D @esbuild/darwin-arm64

安装的最新版本为0.19.10
运行项目报同样错误

拷贝darwin-arm64目录为darwin-x64

cp ./node_modules/@esbuild/darwin-arm64 ./node_modules/@esbuild/darwin-x64 

运行项目报以下错误

14:43:15.908 ✘ [ERROR] Cannot start service: Host version "0.16.17" does not match binary version "0.19.10"  
14:43:15.926 1 error  
14:43:15.927 failed to load config from vite.config.js  
14:43:15.940 error when starting dev server:

删除已经安装的@esbuild
修改package.json中@esbuild/darwin-arm64版本为0.16.17npm install安装后再次拷贝为darwin-x64
HBuilderX正常运行项目。

ted4kra

ted4kra

因为HBuilderX是x86架构,用Rosetta2运行起来的,npm识别的是电脑的架构。强制安装一下x86的@esbuild就行了。

npm i --force @esbuild/darwin-x64@0.17.19

要回复问题请先登录注册