[svelte-kit] Cannot Load ES module from agnostic-helpers

[eli-xciv]

Describe the bug
sveltekit/vite cannot load ESM module: agnostic-helpers

To Reproduce
Steps to reproduce the behavior:

1. npm install agnostic-svelte
2. Use any component from agnostic-svelte

<script>
    import 'agnostic-svelte/css/common.min.css';
	import { Button, Input, InputAddonItem } from "agnostic-svelte";
    let valueText = '';
    let addonValueText = '';
    let textareaValueText = '';
	let textIsVisible = '';
	let toggleTextVisibility = () => {}
</script>

4. npm run dev
5. See error

(node:204850) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
Unexpected token 'export'
{PATH}node_modules/agnostic-helpers/dist/index.esm.js:48
export { usePagination };
^^^^^^

SyntaxError: Unexpected token 'export'
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1033:15)
    at Module._compile (node:internal/modules/cjs/loader:1069:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:170:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:198:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:385:24)
Unexpected token 'export'
{PATH}node_modules/agnostic-helpers/dist/index.esm.js:48
export { usePagination };
^^^^^^

Expected behavior
Local development server loads.

I was able to work around this error by adding "type":"module" to {PATH}/node_modules/agnostic-helpers/package.json

Desktop (please complete the following information):

• OS:Fedora 36
• Version:
  "agnostic-svelte": "^1.1.27"

[roblevintennis]

Thanks for the bug and fix 🙏🏽

[don-wang]

I got the same error, thank you for the suggestion. @eli-xciv

May I ask when will this fix be updated to NPM package? @roblevintennis

[hahuang65]

Bumping this, as 1.1.27 is still the version NPM installs and this still happens on sveltekit projects.

[roblevintennis]

Hey y'all I reopened this. Life is getting in my way at the moment so I cannot bump the version but once I can get back to AgnosticUI work this will be a priority. Apologies for the inconvenience.

[eli-xciv]

@don-wang and @hahuang65

If you need it included with an npm build you can manually copy the package from node_modules to another folder (e.g. $PROJECTPATH/custom_modules, apply the edit thats in the PR, and add the custom package to your package.json until this verison gets bumped.

Here's what I did to get the build working for a netlify deployment

1. Copy agnostic-helpers from node_modules into custom_node_modules
2. Modify custom_node_modules/agnostic-helpers/package.json to include the type:module
3. add the following to your projects package.json

	"devDependencies": {
		"@playwright/test": "^1.22.2",
		"@sveltejs/adapter-auto": "next",
		"@sveltejs/kit": "next",
		"@types/cookie": "^0.5.1",
		"agnostic-helpers": "file:/custom_node_modules/agnostic-helpers", <--- this line here
		"agnostic-svelte": "^1.1.27",
		"autoprefixer": "^10.4.8",

You're project will use the local custom agnostic helpers rather than the published version

[Wakeful-Cloud]

A programmatic patcher:

//Imports (CommonJS only)
// const {dirname, join} = require('path');
// const {readFileSync, writeFileSync} = require('fs');

//Imports (ES Module only)
import {dirname, join} from 'path';
import {fileURLToPath} from 'url';
import {readFileSync, writeFileSync} from 'fs';

//Get the directory of this file (ES Module only)
const __dirname = dirname(fileURLToPath(import.meta.url));

//You may need to change this depending on the location of this file
const target = join(__dirname, 'node_modules/agnostic-helpers/package.json');

//Patch the package.json file
const pkg = JSON.parse(readFileSync(target, 'utf-8'));
pkg.type = 'module';
writeFileSync(target, JSON.stringify(pkg, null, 2));

console.log(`Patched ${target}`);

Then just add the below to your project's package.json:

{
  "scripts": {
+    "postinstall": "node [PATH TO THE ABOVE FILE]",
  }
}

And the patch will always be applied after any npm install command (Rerunning the script is harmless and won't corrupt anything).

[roblevintennis]

Sorry for the delay. I'm starting to slowly get back into things over here. I went ahead and published agnostic-helpers 1.03 version with @eli-xciv fix and pointed the packages to it e.g. for agnostic-svelte:
https://github.com/AgnosticUI/agnosticui/blob/master/agnostic-svelte/package.json#L65

That said, you'd have to temporarily point to #master not the NPM package as I haven't yet published the package update.

github:{UserName}/{RepoName}#{CommitId}

I haven't tested but maybe it's something like this?

"agnostic-helpers": https://github.com/AgnosticUI/agnosticui/tree/master/agnostic-helpers

Let me know if this is at all helpful or not. I'm hoping to get agnostic-svelte-ts to parity so I can just replace agnostic-svelte with that (and get the proper typings for free etc. etc. I think I just need to finish the Pagination component to do that so it's fairly close I think)