Default import is not a function during build and preview

[knpwrs]

Describe the bug

I am attempting to use the default export of a package I made (https://github.com/knpwrs/envariant) in sveltekit. It works fine during development, but during the build process I see the following output:

TypeError: envariant is not a function
    at file:///<path_redacted>session.server.js:4:18
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:541:24)
    at async Promise.all (index 0)
    at async prerender (file:///<path_redacted>/node_modules/@sveltejs/kit/src/core/prerender/prerender.js:375:19)

I can see similar issues that others have had (#1526, #704). I was confused about why my app was prerendering given that I'm not using the static adapter, but I figured out that I could disable prerendering for the whole project (I don't need prerendering for my project, only SSR):

const config = {
  kit: {
    adapter: adapter(),
    prerender: {
      enabled: false,
    },
  },
};

This works for the build, but then when I run vite preview and open my browser I'm greeted with a pretty error page:

When I move the call to envariant to be inside the load function rather than a top-level call, I'm greeted with gql is not a function. This is just gql-tag from npm and that function is likewise called inside the loader.

Everything works just fine in development. Is there anything I have to do to get default exports working when running my built app?

Reproduction

This reproduces for the about page: https://stackblitz.com/edit/sveltejs-kit-template-default-ag2fwq?file=src%2Froutes%2Fabout%2F%2Bpage.js&terminal=dev

Logs

No response

System Info

System:
    OS: macOS 12.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 1.49 GB / 32.00 GB
    Shell: 5.8 - /opt/homebrew/bin/zsh
  Binaries:
    Node: 18.7.0 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.15.0 - /opt/homebrew/bin/npm
    Watchman: 2022.08.22.00 - /opt/homebrew/bin/watchman
  Browsers:
    Brave Browser: 101.1.38.111
    Chrome: 105.0.5195.102
    Chrome Canary: 99.0.4828.0
    Firefox: 104.0.2
    Safari: 15.2

Severity

blocking all usage of SvelteKit

Additional Information

I've updated this from "annoyance" to "blocking all usage of SvelteKit" because I originally thought that this would only be a build-time error, but it appears to affect the built app as well.

[benmccann]

Your package doesn't follow the Node.js spec. Please see https://kit.svelte.dev/faq#packages

[knpwrs]

Indeed, that's the problem! I applied the following change to my library's package.json:

diff --git a/package.json b/package.json
index 4a79287..fc86735 100644
--- a/package.json
+++ b/package.json
@@ -6,8 +6,12 @@
     "access": "public"
   },
   "description": "An Invariant for Environment Variables",
-  "main": "dist/commonjs/index.js",
-  "module": "dist/esnext/index.js",
+  "type": "module",
+  "exports": {
+    "import": "./dist/esnext/index.js",
+    "require": "./dist/commonjs/index.js",
+    "default": "./dist/esnext/index.js"
+  },
   "types": "dist/esnext/index.d.ts",
   "sideEffects": false,
   "scripts": {

Granted, the file extension for require is incorrect. I'm not seeing any immediately obvious generalized way for tsc to output cjs files. It seems like rollup or esbuild bundling would be the way to go rather than transpiling a directory with tsc?

And I'll probably end up switching to urql and using the gql export of @urql/core, rather than gql-tag since they appear to be set up incorrectly as well.

Thank you!