Hello,
I have been getting this error on production, but it works fine in my local when I try to preview using netlify dev this is the error:
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /var/task/node_modules/@steeze-ui/heroicons/index.js
require() of ES modules is not supported.
require() of /var/task/node_modules/@steeze-ui/heroicons/index.js from /var/task/.netlify/server/entries/pages/__layout.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/@steeze-ui/heroicons/package.json.
Site Name: https://clock-in-app.netlify.app/
Framework: SvelteKit
Functions: No
package.json:
{
"name": "timesheet",
"version": "0.0.1",
"scripts": {
"dev": "svelte-kit dev --host",
"build": "svelte-kit build",
"package": "svelte-kit package",
"preview": "svelte-kit preview",
"test": "playwright test",
"check": "svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
"lint": "prettier --check --plugin-search-dir=. . && eslint .",
"format": "prettier --write --plugin-search-dir=. ."
},
"devDependencies": {
"@playwright/test": "^1.22.2",
"@rgossiaux/svelte-headlessui": "^1.0.2",
"@steeze-ui/heroicons": "^1.1.1",
"@steeze-ui/svelte-icon": "^1.3.1",
"@sveltejs/adapter-auto": "next",
"@sveltejs/kit": "next",
"@tailwindcss/forms": "^0.5.2",
"@tsconfig/svelte": "^3.0.0",
"@typescript-eslint/eslint-plugin": "^5.27.0",
"@typescript-eslint/parser": "^5.27.0",
"autoprefixer": "^10.4.7",
"daisyui": "^2.17.0",
"eslint": "^8.16.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-svelte3": "^4.0.0",
"netlify": "^11.0.2",
"postcss": "^8.4.14",
"prettier": "^2.6.2",
"prettier-plugin-svelte": "^2.7.0",
"svelte": "^3.44.0",
"svelte-check": "^2.7.1",
"svelte-preprocess": "^4.10.7",
"tailwindcss": "^3.1.4",
"tslib": "^2.3.1",
"typescript": "^4.7.2"
},
"type": "module",
"dependencies": {
"firebase": "^9.8.4",
"nanoid": "^4.0.0",
"yup": "^0.32.11"
}
}
tsconfig.json:
{
"extends": "./.svelte-kit/tsconfig.json",
"compilerOptions": {
"allowJs": true,
"checkJs": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true,
"skipLibCheck": true,
"sourceMap": true,
"strict": true
}
}
Netlify.toml:
[build]
command = "npm run build"
publish = "build"
[functions]
node_bundler = "esbuild"
One of the support topics is that this issue can be solved by adding functions in their .toml config hence I added it, but I’m still facing the issue. I’m not using netlify functions
