Tampermonkey-Vencord compatibility

[Bacaenbrazos]

The plugin is unusable when using Vencord as a Tampermonkey .js file.

Build failed with 1 error:
src/plugins/fileSplitter/index.tsx:1:38: ERROR: Could not resolve "@utils/webpack"

It is impossible to make the new Vencord build with the plugin inside.

[gerbingerbones]

Did you find a solution?

[sioaeko]

Hello everyone!

If you are trying to test or develop plugins locally, you might be seeing errors like Could not resolve "@utils/webpack" or Could not resolve "./userplugins/...".

This is not a bug. This error means you are in the wrong folder.

Please read this guide carefully to understand the difference between the Vencord Data Folder and the Vencord Source Code Folder.

---

The Problem: Data Folder vs. Source Code Folder

Many users mistake the Vencord Data Folder for the Source Code Folder.

1. The Vencord DATA Folder (❌ WRONG Place)

This is the folder where Vencord/Equicord is installed on your computer.

• Location: Usually in %APPDATA% or a similar location.
• Contents: You will see files like equicord.asar, settings, and themes.
• This is the WRONG place to build plugins. If you put a .tsx file here, the build will always fail because this is not a development environment.

2. The Vencord SOURCE CODE Folder (✅ CORRECT Place)

This is the folder you download from GitHub (git clone or .zip) to develop or build Vencord.

• Location: Wherever you downloaded it (e.g., C:\dev\equicord-main\).
• Contents: You MUST see folders like src and files like package.json.
• This is the ONLY place to build plugins. The @utils/webpack files only exist inside this folder's build system.

---

✅ How to Correctly Build Your Local Plugin (5 Steps)

To fix all errors and build your .tsx plugin, follow these steps inside the SOURCE CODE FOLDER:

1. Go to the Source Code Folder: Open the folder that contains the src and package.json files.
2. Navigate to userplugins: Go into src/userplugins.
3. Create the Plugin Folder: Create a new folder for your plugin (e.g., fileSplitter).
4. Create index.tsx: Inside that new folder, create a file named index.tsx.
5. Paste & Build: Paste your plugin code into index.tsx and then run pnpm run dev (or pnpm run build) from the root of the Source Code Folder.

Correct Structure:

.../equicord-main/
├── src/
│   ├── userplugins/
│   │   ├── fileSplitter/
│   │   │   ├── index.tsx  \<-- (Paste your code here)
│   │   └── ...
│   └── ...
├── package.json
└── ...

If you follow this structure, the build system will find your plugin, understand @utils/webpack, and compile your code successfully.