Must use import to load ES Module error

[hsb-tonmoy]

My code looks like this:

import { form, field } from 'svelte-forms';
import { required, pattern } from 'svelte-forms/validators';

const firstname = field('firstname', '', [required(), pattern(/^[a-z ,.'-]+$/i)], {
		valid: false
	});
const lastname = field('lastname', '', [required(), pattern(/^[a-z ,.'-]+$/i)], {
		valid: false
	});

const personalForm = form(firstname, lastname);

And I'm getting this error after deployment. It works fine on dev server:

500

Must use import to load ES Module: /var/task/node_modules/svelte-forms/index.js
require() of ES modules is not supported.
require() of /var/task/node_modules/svelte-forms/index.js from /var/task/.netlify/server/entries/pages/index.svelte.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /var/task/node_modules/svelte-forms/package.json.

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /var/task/node_modules/svelte-forms/index.js
require() of ES modules is not supported.
require() of /var/task/node_modules/svelte-forms/index.js from /var/task/.netlify/server/entries/pages/index.svelte.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /var/task/node_modules/svelte-forms/package.json.

[seriousManual]

how do you deploy your application?

this looks kind of weird since this is frontendcode (svelte-forms) that's consumed by node itselve, maybe there's a configuration issue?

[hsb-tonmoy]

I'm deploying to Netlify with the official adapter. svelte.config.js looks like this:

import preprocess from 'svelte-preprocess';
import adapter from '@sveltejs/adapter-netlify';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	kit: {
		adapter: adapter({ split: false }),

		// hydrate the <div id="svelte"> element in src/app.html
		target: '#svelte'
	},

	preprocess: [preprocess({ postcss: true })]
};

export default config;

[seriousManual]

I don't have any experience with sveltekit sorry

[Jakeii]

I would suggest that you check your project's package.json has type: 'module' present in it.

[hsb-tonmoy]

I would suggest that you check your project's package.json has type: 'module' present in it.

Yep, it does.

[Jakeii]

anyway you can get a look at the file /var/task/.netlify/server/entries/pages/index.svelte.js ?

[chainlist]

Hi,

can you try to update svelte & vite to their latest version?

[chainlist]

Note: svelte-forms in not bundle into a single file and is compiled with svelte-kit package command. Which transpiles the code into ES modules.

That seems wrong to me that your applications is having errors with require since svelte-forms doesn't have any require but is only working with import keyword (thus, ES modules)