Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
I need help investigating why I'm seeing these errors in the devtools for my registration.html page (screenshots uploaded). I'm not using a frontend framework, and my server is just FiveServer in VsCode.
I'm trying to add a new subscriber using Mailchimp's API, but there's the error starting out I just mentioned. Plus, when I mimic the registration, hit the 'Register' button, it takes me to a 405 page that says "This page isn't working"
<body>
<div id="header-container"></div>
<h2 class="register-headline">Register</h2>
<h4 class="register-sub-headline">
Already have an account? <a href="#">Login Here</a>
</h4>
<form action="/register" method="post" class="registration-form">
<label for="first-name" class="form-label">First Name</label>
<input
type="text"
id="first-name"
name="first-name"
class="form-input"
required
/><br /><br />
<label for="last-name" class="form-label">Last Name</label>
<input
type="text"
id="last-name"
name="last-name"
class="form-input"
required
/><br /><br />
<label for="email" class="form-label">Email</label>
<input
type="email"
id="email"
name="email"
class="form-input"
required
/><br /><br />
<label for="password" class="form-label">Password</label>
<input
type="password"
id="password"
name="password"
class="form-input"
required
/><br /><br />
<input type="submit" value="Register" class="form-button" />
</form>
<script src="registration.js" type="module"></script>
</body>
const registrationForm = document.querySelector(".registration-form");
// const mailchimp = require("@mailchimp/mailchimp_marketing");
import * as mailchimp from "/node_modules/@mailchimp/mailchimp_marketing";
// set mailchimp config
mailchimp.setConfig({
apiKey: "",
server: "us10",
});
// Mailchimp list ID
const listId = "";
// Function to subscribe new user to Mailchimp
async function subscribeUser(firstName, lastName, email) {
try {
const response = await mailchimp.lists.addListMember(listId, {
email_address: email,
status: "subscribed", // change to "pending" if confirmation is required
merge_fields: {
FNAME: firstName,
LNAME: lastName,
},
});
console.log(`Successfully added new subscriber! Contat's ID is: ${response.id}`);
} catch (error) {
console.error("There was an error", error);
}
}
// Add event listener to the form for submission
registrationForm.addEventListener("submit", async (event) => {
event.preventDefault(); // prevent default form submission
// Get form data
const formData = new FormData(registrationForm);
const data = {};
formData.forEach((value, key) => {
data[key] = value;
});
// Subscribe user to Mailchimp
subscribeUser(data["first-name"], data["last-name"], data["email"]);
// Can now send data to server / redirect to Dashboard
setTimeout(() => {
window.location.href = "../../Pages/Dashboard/dashboard.html";
}, 1000);
});