taro [email protected]打包微信小程序后文件路径与引用路径不符

[1stdoll]

Taro UI 版本信息

v2.3.4

问题描述

运行后小程序开发工具上提示weapp/npm/taro-ui/dist/weapp/components/tab-bar/index 路径下未找到组件，检查文件路径后发现路径不同。
取消提示页面的引用后发现其他引用Taro UI组件的页面均有该提示。
运行过程中未报错。

复现步骤

1.taro build --type weapp

复现代码

import { AtTabBar, } from 'taro-ui'

报错信息

[ pages/order-list/index.json 文件内容错误] pages/order-list/index.json: ["usingComponents"]["at-tab-bar"]: "../../npm/taro-ui/dist/weapp/components/tab-bar/index"，在 D:\work\Taro-joylink_minipro\dist\weapp/npm/taro-ui/dist/weapp/components/tab-bar/index 路径下未找到组件(env: Windows,mp,1.06.2308310; lib: 3.2.4)

系统信息

Taro CLI 2.2.21 environment info:
System:
OS: Windows 10
Binaries:
Node: 14.21.3 - D:\setup\nvm\nodejs\node.EXE
Yarn: 1.22.19 - D:\setup\nvm\node_global\yarn.CMD
npm: 6.14.18 - D:\setup\nvm\nodejs\npm.CMD

"@tarojs/components": "2.2.16",
"@tarojs/components-qa": "2.2.16",
"@tarojs/plugin-sass": "^2.2.10",
"@tarojs/plugin-uglify": "^2.2.10",
"@tarojs/redux": "2.2.16",
"@tarojs/router": "2.2.16",
"@tarojs/taro": "2.2.16",
"@tarojs/taro-alipay": "2.2.16",
"@tarojs/taro-weapp": "2.2.16",
"taro-ui": "^2.3.0",

补充信息

[taro-ui-bot]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[robinv8]

提供个最小可复现的 Demo

[1stdoll]

已解决。
写了个运行后重写文件夹路径的方法。

[1stdoll]

提供个最小可复现的 Demo

复现demo：
https://github.com/1stdoll/myTarouiDemo.git

[zpzxgcr]

已解决。 写了个运行后重写文件夹路径的方法。

我也是遇到这个问题我用的是pnpm 路径多了一层.npm 能贴一下你的解决办法吗

[1stdoll]

已解决。 写了个运行后重写文件夹路径的方法。

我也是遇到这个问题我用的是pnpm 路径多了一层.npm 能贴一下你的解决办法吗

我是在项目config文件里写了个方法传入打包过程中，然后在打包代码里应用
这是config里加的代码：
mini: {
onRunOver(_path = '') {
const outPath = path.join(_path, 'taro-ui')
const fromPath = path.join(_path, '.store/[email protected]/node_modules/taro-ui')
const existsDir = () => { console.log('hasDir in outPath =>', fs.existsSync(outPath))
if (!fs.existsSync(outPath)) { console.log('hasDir in fromPath =>', fs.existsSync(fromPath))
if (fs.existsSync(fromPath)) {
console.log('run renameSync')
fs.renameSync(fromPath, outPath)
existsDir()
} else console.error('组件目录不存在')
} else console.log(_path + '/taro-ui ok')
}
existsDir()
if (process.env.TARO_ENV === 'alipay') {
if (!fs.existsSync('../dist/alipay/mini.project.json')) {
fs.copyFileSync(path.resolve(__dirname, '..', 'mini.project.json'), path.resolve(__dirname, '..', 'dist/alipay/mini.project.json'))
} else console.log('dist/alipay/mini.project.json ok') } }, ｝

这是打包的代码里引用的代码：
// node_modules@tarojs\mini-runner\dist\index.js
function build(appPath, config) {
if (typeof onRunOver === 'function') onRunOver(path.join(appPath, config.outputRoot, 'npm'))
return __awaiter(this, void 0, void 0, function* () {
const mode = config.mode;
const baseWebpackChain = base_conf_1.default(appPath);
yield customizeChain(baseWebpackChain, config.modifyWebpackChain, config.webpackChain);
const buildWebpackConf = build_conf_1.default(appPath, mode, config, baseWebpackChain);
const webpackChain = baseWebpackChain.merge(buildWebpackConf);
const webpackConfig = webpackChain.toConfig();
const onBuildFinish = config.onBuildFinish;
// 此处添加
const onRunOver = config.onRunOver;
//
const compiler = webpack(webpackConfig);
return new Promise((resolve, reject) => {
if (config.isWatch) {
logHelper_1.bindDevLogger(compiler);
compiler.watch({
aggregateTimeout: 300,
poll: true
}, (err, stats) => {
if (err) {
logHelper_1.printBuildError(err);
if (typeof onBuildFinish === 'function') {
onBuildFinish({
error: err,
stats: null,
isWatch: true
});
}
return reject(err);
}
if (typeof onBuildFinish === 'function') {
onBuildFinish({
error: null,
stats,
isWatch: true
});
}
// 此处添加
if (typeof onRunOver === 'function') onRunOver(path.join(appPath, config.outputRoot, 'npm'))
//
resolve();
});
}
else {
logHelper_1.bindProdLogger(compiler);
compiler.run((err, stats) => {
if (err) {
logHelper_1.printBuildError(err);
if (typeof onBuildFinish === 'function') {
onBuildFinish({
error: err,
stats: null,
isWatch: false
});
}
return reject(err);
}
if (typeof onBuildFinish === 'function') {
onBuildFinish({error: null,stats,isWatch: false});
}
// 此处添加
if (typeof onRunOver === 'function') onRunOver(path.join(appPath, config.outputRoot, 'npm'))
//
resolve();
});
}
});
});
}

这算是邪道方案，因为打包配置不熟，没法一劳永逸，每次重新安装依赖都得重新加入后面这个。

[robinv8]

历史遗留问题了，我看下能不能正对 v2 版本修复一下，当然如果可以，尽可能使用 v3 版本