Cannot build while there is another SSR plugin in the same config

[Malix-Labs]

Issue

I am developing a SvelteKit website which in I do host my Tampermonkey's userscripts. I can't manage to make the plugin be built after I added my svelte website to the repo.

adding

rollupOptions: {
    output: {
        inlineDynamicImports: false,
    },
},

in the build vite config option doesn't work as SvelteKit:

The following Vite config options will be overridden by SvelteKit:
  - build.rollupOptions.input

[Malix-Labs]

• Comment Reply in https://github.com/Tampermonkey/tampermonkey/issues/1717 from @7nik:

  ⋯ I had a really good experience using vite-plugin-monkey to develop and build a userscript (TS + Svelte in my case)

  Hello again @7nik! Do you think you could support me?

[7nik]

What are you trying to achieve by using SvelteKit in the userscript? It is a full-stack framework. SvelteKit is supposed to run on a server. For making a userscipt with an advanced UI you need just Svelte (maybe with some router) but not SvelteKit.

[Malix-Labs]

@lisonge

you should make the order of vite plugin monkey is last one

It throws me another build error

[Malix-Labs]

@7nik

Using SvelteKit in the userscript?

Nope, I don't use SvelteKit in my userscript, I host the userscript on a svelte website (so only basically making it be downloadable from my website). Nothing svelte related does takes part in how I dev my userscript.

[7nik]

If you are trying to build the website and all the userscripts in one command, I'm not sure it's possible - they conflict. Maybe you need two configs - one for the website, and another for userscripts. And sequentially run to builds.

[lisonge]

@Malix-Off

vite-plugin-monkey can not work with vite ssr plugin such as SvelteKit

[lisonge]

@Malix-Off

if you want to build your SvelteKit Application and userscript at the same time

add new file named vite.user.config.ts to your working directory

import { defineConfig } from 'vite';
import monkey from 'vite-plugin-monkey';

export default defineConfig({
  plugins: [
    monkey({
      entry: 'external/script/user.ts',
      // .... your config
    }),
  ],
});

change the build script in package.json to vite build && vite --config vite.user.config.ts

then run pnpm run build or npm run build

[Malix-Labs]

Oh okay, then I guess I will have to define multiple config build and make them run subsequently after running npm run build. it makes sense. I will try that and keep y'all in touch

[Malix-Labs]

Partial Success

Content

@lisonge's answer partially worked

Issue Persistence

But unfortunately, the fact that it is two different builds remove the Tampermonkey's metadata comments

So it is not really working properly.

Comprehension Try

• Comment Reply from @lisonge:

  vite-plugin-monkey can not work with vite ssr plugin such as SvelteKit

  Could you explain why? It doesn't really makes sense to me why it couldn't work as it's a regular build with not much happening at the pluggin level (at least compared to how SvelteKit interacts with the build)

[7nik]

default:
    return userscriptBuildConfig && sveltekitBuildConfig;

Note this code returns only the second config. It does not run two builds.

For me, it looks like SvelteKit treated the userscript as a regular script.

Try to output the userscript into the static folder.

[Malix-Labs]

default:
  return userscriptBuildConfig && sveltekitBuildConfig;

Note this code returns only the second config. It does not run two builds.

You're right. Do you know how to make it run both?

[7nik]

For command npm run build with the script build being "vite build"?

[Malix-Labs]

For me, it looks like SvelteKit treated the userscript as a regular script.

As it should be, but at the same time not very much since as @lisonge said:

vite-plugin-monkey can not work with vite ssr plugin such as SvelteKit

[Malix-Labs]

Try to output the userscript into the static folder.

May I ask you where should that be inputed in the code I provided?

[Malix-Labs]

For command npm run build with the script build being "vite build"?

Here is my scripts values in package.json:

    "scripts": {
        "dev": "vite dev",
        "build": "tsc && vite build",
        "preview": "vite preview",
        "check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
        "check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
        "lint": "prettier --plugin-search-dir . --check .",
        "format": "prettier --plugin-search-dir . --write ."
    },

Basically I used npx vite build -m INPUT_MODE

[7nik]

A && B is the same as A ? B : A and as objects always are truthy, it will return B.

Put the static folder into the root of your project folder. It's the default folder for assets in SvelteKit. The files will be available as site.name/filename.extension on the site. You can add subfolders there as well.

[Malix-Labs]

A && B is the same as A ? B : A and as objects always are truthy, it will return B.

You're right, i'm very dumb, thx about that.

the static folder into the root of your project folder.

What should I put inside it? The raw ts userscript, or the built output one?

Remember I need the ts userscript to be built with vite; idk how vite works, but as it's a "static" directory, I'm afraid it doesn't build the file. (or do you mean that it is exactly what we want so we have to make the first build be the userscript output in static, then we build the website directly so it doesn't remove comments?)

[7nik]

Out the compiled userscripts into the static so during the website building, it will just copy them without any modifications.

[Malix-Labs]

Out the compiled userscripts into the static so during the website building, it will just copy them without any modifications.

Okay, so if I understand correctly, I have to do two builds:

1. Userscript Build
   • Output in static
2. Website Build
   • With reference to the path to the built userscript in static

Or would the second build be unnecessary in case of a usersctipt change, because the references path remains the same, and only a deploy would be needed to push the static files changes to production?

[7nik]

• With reference to the path to the built userscript in static

Not sure I got it right.

For a file like static/some-name.script.user.js, you reference it as site.name/some-name.script.user.js. The rest is correct.

Technically you can skip the second build if there are no changes on the site and just update userscripts.

[Malix-Labs]

Not sure I got it right.

For a file like static/some-name.script.user.js, you reference it as site.name/some-name.script.user.js.

I was talking about the reference as file path, not the URL ahah, but ye, I got it :)

Technically you can skip the second build if there are no changes on the site and just update userscripts.

Nice, that's what I thought in my second thought. Imma try to develop that then. Thanks a lot for your help, I really do appreciate your time!

[lisonge]

@Malix-Off

Could you explain why? It doesn't really makes sense to me why it couldn't work as it's a regular build with not much happening at the pluggin level (at least compared to how SvelteKit interacts with the build)

The construction mode and configuration of sveltekit and vite-plugin-monkey conflict

just like make vite both build browser web app and ssr app in the same config

[Malix-Labs]

I now have yet another problem with this double config method: #54