Was blocked because of a disallowed MIME type (“”) error while trying to access motoko function from js

Hi this is my first post on this forum.
It’s probably a beginner’s question, but I’m having a problem calling a Motoko function from JavaScript. I’m getting an error message and can’t proceed further:
Loading module from “http://127.0.0.1:4943/declarations/pro_backend” was blocked because of a disallowed MIME type (“”)

This is the Error:

index.html

IC Hello Starter We're sorry but this application doesn't work properly without JavaScript enabled. Please enable it to continue.
Click

Noxx

main.mo:

import Text “mo:base/Text”;
actor {
public query func greet(name : Text) : async Text {
return "Hello, " # name # “!”;
};

public func _dajdupy() : async Text
{
return “TEKST EXAMPLE !!!”;
};
};

script.js:
import { pro_backend } from “…/declarations/pro_backend”;

document.getElementById(“Btn”).addEventListener(“click”, async () =>
{
const name = document.getElementById(“place”);
const gr = await pro_backend._dajdupy();
document.getElementById(“place”).innerText = gr;
});

**in declaration folder I have this: **
in pro_backend.did.js

export const idlFactory = ({ IDL }) => {
return IDL.Service({
‘_dajdupy’ : IDL.Func(, [IDL.Text], ),
‘greet’ : IDL.Func([IDL.Text], [IDL.Text], [‘query’]),
});
};
export const init = ({ IDL }) => { return ; };

everything seems to be correct but as it says have you enabled js? maybe check if javascript is enabled in your browser

Everything is unlocked now, and when I run the project created with Vue frontend on the same browser, it works. Therefore, I’m wondering what I might have missed something. On html i got this:


But I simply don’t know what can cause this error

have you tried the vanila js template created by dfx when you use the command dfx new?
if yes do you get the same error with that template as well?
if not can you try it to see if the same thing happens?
i might sound stupid but have you deployed both forntend and backend canisters?

Hey thank U for answer I just ran dfx deploy moments ago, and now I have backend and frontend canisters available through the browser on the local replica

And after creating new project with frontend framework everything is fine so it’s not browser settings

In my view, it should work based on your configuration and code, however for an unknown reason there is an error. can you push your code in to a github repository and share the link of that here?

Ok there is my whole project files GitHub - Olirysolest/ICP_BaseNoFramework: This is my Code very basic but create without feamework

I checked your code and the problem is with your webpack config, because of that it can not import the Actor to call your backend canister. what you can do is try to make a new project with custom wbpack configuration and set the source in dfx.json for frontend to dist folder. The reason your code works with some frameworks or libraries is they have preset webpack config.

1 Like