kit

kit copied to clipboard

Describe the problem

For local and testing builds we use MockServiceWorker for our mocks. There's a Node component to the library so we can mock requests in SSR. However, it uses Node libraries, and esbuild throws an error if the platform is not set to node when we build for production. We want to test our app with a production build so that it's as close to what will actually ship as possible.

Without the esbuild configuration option, there's no way for us to change the platform specifically for test builds.

Describe the proposed solution

An option for configuring the build within adapters.

Alternatives considered

Another possibility would be changing the target/platform based on whether or not it is a "preview" build. Since previewing first requires us to build the app with a separate command, I'm not sure how this could be signaled to the build. Maybe a build flag?

Importance

i cannot use SvelteKit without it

Additional Information

Currently operating off a fork so we can use the latest SvelteKit.

Another possibility would be changing the target/platform based on whether or not it is a "preview" build. Since previewing first requires us to build the app with a separate command, I'm not sure how this could be signaled to the build.

svelte-kit preview doesn't use the adapted output, so even if the adapter fails, the .svelte-kit/output folder that is used by preview still exists.

If you don't want to waste resources from the adapter attempting to adapt the build and failing, you can set an environment variable and use it through process.env.WHATEVER in svelte.config.js to not set an adapter in kit config.

That works for solving this particular issue, but there's another issue because the targets passed to ESbuild are incorrect:

Module parse failed: Unexpected token (13066:47)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|       if (typeof window !== "undefined") {
|         const windowAny = window;
>         const dataLayer = windowAny.dataLayer ?? [];
|         windowAny.dataLayer = dataLayer;
|         gtag = function() {
Error: webpack returned an error. You may be able to resolve this issue by running npm install

I'll open up a separate issue for this

Reopening this issue for a different reason, we need to pass build plugins to esbuild so we can polyfill Node build-ins (annoying, but we currently still need to for a few legacy packages)

Another request for this in https://github.com/sveltejs/kit/issues/5756, which I closed as a duplicate of this issue

I am using Azure AD B2C for authentication. Microsoft provides extensions for account caching for refreshing access tokens. These extensions are provided as a C++ addon (and one of their dependencies is another C++ addon). Using the Node adapter results in a No loader is configured for ".node" files error from esbuild (image below).

The author of esbuild has offered a plugin to solve this problem. I could not figure out how to apply this plugin and from this issue I'm assuming it is not possible.

Are there any known workarounds?

Realized through some help on the discord that my adapter version was out of date. Was still using a version of adapter-node that used esbuild. Using the current next version I get Unexpected character '�' (Note that you need plugins to import files that are not JavaScript).

Reproduction repo

I dug into this a bit more and figured out why node modules aren't being included in the build despite adding the polyfills to the rollup configuration. It seems that the polyfills are added to the main index.js at /.svelte-kit/output/server/index.js (for our version, though it seems to be pretty much the same in the most recent version). However, this doesn't get assigned to the global and is scoped to the module itself because the output of the rollup build is in esm, and by the time esbuild runs there isn't really a way to ensure that the polyfills are globalized.

Trying to figure out a workaround but it's really difficult without access to the esbuild options in the adapter.