Hello everyone,
Thanks a lot @banjerluke for your post — it really helped me get back into trying to publish a Meteor app to the mobile stores! Also, big thanks to @nachocodoner for your reply to my previous post on this topic.
I’m almost there. I’ve managed to set up a relatively comfortable dev environment with this Makefile, which automatically synchronizes the Meteor Cordova build with the Capacitor mobile build:
build-sync:
rm -rf capacitor/www-dist/* || exit 1; \
cp .meteor/local/build/programs/web.cordova/*.{css,html,json} capacitor/www-dist || exit 1; \
cp -r .meteor/local/build/programs/web.cordova/packages capacitor/www-dist/ || exit 1; \
mkdir capacitor/www-dist/app || exit 1; \
cp -r .meteor/local/build/programs/web.cordova/app/*.js capacitor/www-dist/app || exit 1; \
rsync -r --exclude='*.js' .meteor/local/build/programs/web.cordova/app/ capacitor/www-dist/ || exit 1; \
rm -rf capacitor/www-dist/**/*.map || exit 1; \
sed -i '' "s|WebAppLocalServer\.onError(function(e){console\.error(e)})||g" capacitor/www-dist/**/*.js || exit 1; \
curl -f --connect-timeout 20 'http://localhost:3000/__cordova/index.html' | \
sed -e 's|/__cordova/client/|/client/|g' -e 's|/__cordova/|/|g' \
> capacitor/www-dist/index.html; \
sed -i '' "3r capacitor/WALS-shim.html" capacitor/www-dist/index.html; \
npx cap sync;
enable-watch:
watchman-make -p '.meteor/local/build/programs/web.browser/**/*' -t build-sync
Combined with @nachocodoner’s suggestion in the Capacitor config:
"server": {
"url": "http://{{LOCAL_IP}}:{{PORT}}",
"cleartext": true
}
Now, I’ve hit what might be the final hurdle.
I’m working with Meteor 3.3.2, and I’m facing the same issue I ran into in previous experiments.
Our project uses the npm dependency @tanstack/react-query@5.36.0. Everything works perfectly on a classic web session - or using the development capacitor config since it directly loads the url within the WebView, but something breaks in the Cordova build:
getQueryDefaults(queryKey) {
const defaults = [...__privateGet(this, _queryDefaults).values()];
// TypeError: Spread syntax requires ...iterable[Symbol.iterator] to be a function
const result = {};
defaults.forEach((queryDefault) => {
if ((0, import_utils.partialMatchKey)(queryKey, queryDefault.queryKey)) {
Object.assign(result, queryDefault.defaultOptions);
}
});
return result;
}
I believe that same error was raised when using the web.browser.legacy build.
After digging into the generated builds, I noticed that the packages/modules output differs between builds.
That’s confusing, since according to the Meteor documentation, Cordova bundles should now be modern.
Has anyone else encountered this, or figured out how to make sure the Cordova build uses the same modern compilation as web.browser?
Any pointers appreciated!