[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>

3. npm run dev
4. 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. (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)