Unable to get Capacitor to output web and mobile builds

[occicat]

Came across this first: Capacitor Network Bug? Problem? Help Me which was close to the error I have but still not able to find a solution.

Problem:

Unable to build for mobile due to errors on mobile build thrown in logcat related to failed module expecting relative paths.

JavaScript Error: {“type”:“js.error”,“error”:{“message”:“Uncaught TypeError: Failed to resolve module specifier "@capacitor/core". Relative references must start with either "/", "./", or "…/".”,“url”:“https://www.testapp.com/“,“line”:0,“col”:0,“errorObject”:”{}”}}

What is working:

The web version builds and works with the exception that in order for it to work, I had to add paths to rollup config below, else it would fail.

paths: { ‘@capacitor/core’: ‘…/…/…/node_modules/@capacitor/core/dist/index.js’ },

What else have I tried:
Copying the node_modules folder to the android build folder and trying to build with that there and also modifying the path resulted in a warning stating flatDir should be avoided because it doesn’t support any meta-data formats. And ask :app:mergeDebugAssets FAILED
ERROR: [public/node_modules/levelup/node_modules/semver/semver.browser.js] Resource and asset merger: Duplicate resources.

Development Environment:

VSC: Version: 1.97.2
Iconic dashboard plugin
Node: 23.9.0
OSX Sonoma 14.4
Android Studio Meercat - 2024.3.1
Physical Android Device
“@capacitor/cli”: “^7.0.1”,
“@capacitor/android”: “^7.0.1”,
“@capacitor/core”: “^7.0.1”,
“@capacitor/ios”: “^7.0.1”,

Folder structure:

Capacitor.config.json

{
“appId”: “com.testapp.app”,
“appName”: “Testapp”,
“webDir”: “dist”,
“server”: {
“hostname”: “www.testapp.com”,
“androidScheme”: “https”
}
}

I have some red folders in my project as well:
node_modules
-@capacitor
android
-app

• capacitor-cordova-android-plugins

Capacitor doctor reports ok

Expected result

To be able to build for web and mobile as well without the above errors thrown

[twestrick]

It looks like you are using Java 22. Capacitor 7 supports 21. What is your Gradle JDK set to under File → Settings in Android Studio?

[occicat]

Interesting, when installing Capacitor and stepping through each page of the docs for v7, there wasn’t any mention of a strict Java version requirement.

After your mention of this I searched around more, but all I could find was this from the upgrade page ( which I wasn’t upgrading ) I did however have to download Android Meerkat in full and install and remove the previous version of Android studio due to a upgrade conflict presented from an earlier version of Android studio.

Would one need to roll back to 21 if they were already on a higher version now?

java --version
openjdk 22.0.2 2024-07-16

The settings in Android Meercat for Gradle JDK are empty

I’ve checked brew list and see

I reverted down to openjdk@21 as previously
java --version was reporting openjdk 22.0.2 2024-07-16
Now java --version is reporting openjdk 21.0.6 2025-01-21

The problems in VCS still persist and report after the above change.

[occicat]

One thing to note here is that despite the Java version being higher than 21, which is now back to 21, Capacitor would still build, however the issue still persists that the app can’t find the @capacitor/core etc files when bundling.

Downloading and calling each capacitor file as a regular JS library and importing worked only for capacitor/core, but when you try to add capacitor/app it fails again essentially leaving you not being able to use Capacitor still.

On a connected android device, building results in this error thrown in logcat, despite the following import being added:
import { Capacitor } from “@capacitor/core”;

[occicat]

The only way I was able to actually get Capacitor to work was to manually copy the node_modules folder to the following directory

/rootprojectfolder/android/app/src/main/assets/public

Then run the build. Trying to add the node_modules folder to the /dist folder chosen to build the Capacitor app would throw the flatDir warning and ceace building.

This is far from ideal, having to copy that folder over every single time and keeping an eye to ensure that the sync doesn’t blow that folder away again.

[twestrick]

Did you run npx cap sync android?

Generally, what steps are you doing to build your project? And what type of project do you have? Plan JS or are you using a framework?

[occicat]

No framework, pure JS.

I did run npx cap sync android. I have also updated to core@7.0.1.

I have been using the built in iconic dashboard plugin for VCS.

Steps entail clicking on build, sync, then android which then outputs to the phone.