Uncaught referenceerror: экспорт не определяется, даже я не использую его ⇐ Javascript

[Anonymous]

У меня есть электронное приложение с наложением по загруженному веб -сайту в React, и я получаю ошибку: < /p>

Код: Выделить всё

Uncaught ReferenceError: exports is not defined
at index.js:2:23

Это на второй строке: object.defineproperty (exports, "__esmodule", {value: true});
Даже я не использую какие -либо модули nodejs внутри react app.

Код: Выделить всё

/src
|--assets/
|--electron/
|--overlay/
|--shared/
|-.eslintrc.cjs
|-.gitignore
|-package.json
|-postcss.config.js
|-tailwind.config.js
|-tsconfig.electron.json
|-tsconfig.overlay.json
< /code>
В основном активы содержат изображения, электрон содержит код бэкэнд в TypeScript, наложение содержит код React, Shared содержит типы, разделяемые между бэкэнд и фронталом."build": "bun run build:css && bun run build:overlay && bun run build:electron && cpx \"src/assets/**/*\" dist/assets",
"build:css": "bunx tailwindcss -i ./src/overlay/index.css -o ./dist/overlay/index.css --minify",
"build:electron": "tsc -p tsconfig.electron.json",
"build:overlay": "bun build src/overlay/index.tsx --config tsconfig.overlay.json --outdir=dist/overlay --format=esm --target=browser --external=electron --external=fs --external=path --external=os --splitting",
"start": "bun run build && electron dist/electron/main.js",

/src/overlay содержит bunfig.toml, global.d.ts, index.css и index.tsx
bunfig.toml:

Код: Выделить всё

entrypoint = "index.tsx"
outdir = "../../dist/overlay"
target = "browser"
sourcemap = true
minify = false
format = "esm"
< /code>
global.d.ts:
import { Config } from "../shared/types";

export {};

declare global {
interface Window {
electronAPI: {
onSidebarToggle: (callback: () => void) => void;
openExternal: (url: string) => void;
saveConfig: (config: Partial) => void;
onConfigLoaded: (callback: (config: Config) => void) => void;
};
}
}
< /code>
index.css:
@tailwind base;
@tailwind components;
@tailwind utilities;
< /code>
index.tsx:
import "./index.css";

import { createRoot } from "react-dom/client";

const mount = document.createElement("div");
mount.id = "sidebar-root";
document.body.appendChild(mount);

const App = () => {
return ;
};

createRoot(mount).render();

/src/shared содержит types.ts:

Код: Выделить всё

export const defaultConfig: Config = {
autofocus: false,
notify: true,
rpcEnabled: true,
informed: false,
accentColor: "",
};

export interface Config {
autofocus: boolean;
notify: boolean;
rpcEnabled: boolean;
informed: boolean;
accentColor: string;
}

Если важно, это/src/electron/preload.ts:

Код: Выделить всё

import { contextBridge, ipcRenderer, clipboard, shell } from "electron";
import { Config } from "../shared/types";

declare global {
interface Window {
toggleSidebar: () => void;
}
}

contextBridge.exposeInMainWorld("electronAPI", {
onSidebarToggle: (callback: () => void) => {
ipcRenderer.on("sidebar-toggle", (_event, ...args) => {
console.log("sidebar-toggle event received in preload");
callback();
});
},
saveConfig: (config: Partial) =>
ipcRenderer.send("save-config", config),
onConfigLoaded: (callback: (config: Config) => void) => {
console.log("Setting up config loaded listener");
ipcRenderer.on("config-loaded", (event, config) => callback(config));
},
copyToClipboard: (text: string) => clipboard.writeText(text),
openExternal: (url: string) => shell.openExternal(url),
checkForUpdates: () => ipcRenderer.invoke("check-for-updates"),
quitAndInstall: () => ipcRenderer.send("quit-and-install"),
updateAvailable: (
callback: (event: Electron.IpcRendererEvent, ...args: unknown[]) => void
) =>  ipcRenderer.on("update-available", callback),
updateDownloaded: (
callback: (event: Electron.IpcRendererEvent, ...args: unknown[]) => void
) => ipcRenderer.on("update-downloaded", callback),
downloadUpdate: () => ipcRenderer.invoke("download-update"),
});
< /code>
Я вводит наложение на веб -сайт, например: < /p>
function injectOverlay(mainWindow: BrowserWindow) {
const { pathToFileURL } = require("url");
const overlayScriptPath = path.join(__dirname, "../overlay/index.js");
const overlayScriptUrl = pathToFileURL(overlayScriptPath).href;

mainWindow.webContents.executeJavaScript(`
const s = document.createElement("script");
s.type = "module";
s.src = "${overlayScriptUrl}";
document.body.appendChild(s);
`);
}
< /code>
dtsconfig.electron.json содержит: < /p>
{
"compilerOptions": {
"outDir": "dist",
"rootDir": "src",
"module": "Node16",
"target": "ESNext",
"moduleResolution": "node16",
"esModuleInterop": true,
"strict": true,
"jsx": "react-jsx",
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"exclude": ["node_modules"],
"include": [
"src/electron/**/*",
"src/overlay/**/*",
"postcss.config.js",
"tailwind.config.js"
],
"assets": ["src/assets/**/*"]
}
< /code>
dtsconfig.overlay.json содержит: < /p>
{
"compilerOptions": {
"outDir": "dist/overlay",
"rootDir": "src/overlay",
"module": "ESNext",
"target": "ESNext",
"jsx": "react-jsx",
"moduleResolution": "bundler",
"esModuleInterop": true,
"strict": true
},
"include": ["src/overlay/**/*"]
}
< /code>
Забавный факт в том, что если я запускаю: < /p>
bun build src/overlay/index.tsx \
--config tsconfig.overlay.json \
--outdir=dist/overlay \
--format=esm \
--target=browser \
--external=electron --external=fs --external=path --external=os \
--splitting \

, а затем: электрон dist/electron/main.js
Я не получаю ошибки, но когда я запускаю npm start , я получаю ошибку, даже команда сборки точно такая же, как и в package.json.

Подробнее здесь: https://stackoverflow.com/questions/796 ... ont-use-it