ReferenceError: __dirname is not defined in ES module scope [BUG]

[Rainff9f58ff178]

Describe the bug

code that electron-vite generated include "__dirname" keyword ,lead to error.

ReferenceError: __dirname is not defined in ES module scope.

build repo is "deepchat".

All log：

PS D:\deepchat> pnpm electron-vite dev --watch
rolldown-vite v7.1.0 building SSR bundle for development...

watching for file changes...

build started...
✓ 1921 modules transformed.
[plugin vite:reporter]
(!) D:/deepchat/src/main/presenter/index.ts is dynamically imported by D:/deepchat/src/main/presenter/devicePresenter/index.ts but also statically imported by D:/deepchat/src/main/index.ts, D:/deepchat/src/main/presenter/configPresenter/index.ts, D:/deepchat/src/main/presenter/configPresenter/mcpConfHelper.ts, D:/deepchat/src/main/presenter/deeplinkPresenter/index.ts, D:/deepchat/src/main/presenter/githubCopilotDeviceFlow.ts, D:/deepchat/src/main/presenter/knowledgePresenter/index.ts, D:/deepchat/src/main/presenter/knowledgePresenter/knowledgeStorePresenter.ts, D:/deepchat/src/main/presenter/llmProviderPresenter/index.ts, D:/deepchat/src/main/presenter/llmProviderPresenter/providers/anthropicProvider.ts, D:/deepchat/src/main/presenter/llmProviderPresenter/providers/geminiProvider.ts, D:/deepchat/src/main/presenter/llmProviderPresenter/providers/ollamaProvider.ts, D:/deepchat/src/main/presenter/llmProviderPresenter/providers/openAICompatibleProvider.ts, D:/deepchat/src/main/presenter/llmProviderPresenter/providers/openAIResponsesProvider.ts, D:/deepchat/src/main/presenter/mcpPresenter/inMemoryServers/autoPromptingServer.ts, D:/deepchat/src/main/presenter/mcpPresenter/inMemoryServers/builtinKnowledgeServer.ts, D:/deepchat/src/main/presenter/mcpPresenter/inMemoryServers/conversationSearchServer.ts, D:/deepchat/src/main/presenter/mcpPresenter/inMemoryServers/customPromptsServer.ts, D:/deepchat/src/main/presenter/mcpPresenter/inMemoryServers/deepResearchServer.ts, D:/deepchat/src/main/presenter/mcpPresenter/inMemoryServers/imageServer.ts, D:/deepchat/src/main/presenter/mcpPresenter/inMemoryServers/meetingServer.ts, D:/deepchat/src/main/presenter/mcpPresenter/index.ts, D:/deepchat/src/main/presenter/mcpPresenter/mcpClient.ts, D:/deepchat/src/main/presenter/notifactionPresenter.ts, D:/deepchat/src/main/presenter/oauthPresenter.ts, D:/deepchat/src/main/presenter/shortcutPresenter.ts, D:/deepchat/src/main/presenter/tabPresenter.ts, D:/deepchat/src/main/presenter/threadPresenter/index.ts, D:/deepchat/src/main/presenter/threadPresenter/searchManager.ts, D:/deepchat/src/main/presenter/trayPresenter.ts, D:/deepchat/src/main/presenter/windowPresenter/index.ts, D:/deepchat/src/main/utils/index.ts, dynamic import will not move module into another chunk.

out/main/duckdb3.node                 297.79 kB
out/main/duckdb5.node                 306.18 kB
out/main/duckdb.node                  316.31 kB
out/main/duckdb2.node                 388.08 kB
out/main/duckdb4.node                 403.31 kB
out/main/presenter-CRxOkaii.js          0.09 kB
out/main/fileFromPath-dksEh8zM.js       4.46 kB
out/main/index.js                  11,817.64 kB
built in 9002ms.

build the electron main process successfully

-----

rolldown-vite v7.1.0 building SSR bundle for development...

watching for file changes...

build started...
✓ 4 modules transformed.
out/preload/floating.js                  1.16 kB
out/preload/chunks/electron-l3qRBony.js  2.01 kB
out/preload/index.js                     3.83 kB
built in 76ms.

build the electron preload files successfully

-----

dev server running for the electron renderer process at:

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://192.168.31.71:5173/
  ➜  Network: http://192.168.9.1:5173/
  ➜  Network: http://192.168.107.1:5173/
  ➜  Vue DevTools: Open http://localhost:5173/__devtools__/ as a separate window
  ➜  Vue DevTools: Press Alt(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools

start electron app...


App threw an error during load
ReferenceError: __dirname is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and 'D:\deepchat\package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
    at file:///D:/deepchat/out/main/index.js:52:90
    at file:///D:/deepchat/out/main/index.js:35:364
    at file:///D:/deepchat/out/main/index.js:61:51
    at ModuleJob.run (node:internal/modules/esm/module_job:274:25)
    at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:644:26)
    at async loadApplicationPackage (file:///D:/deepchat/node_modules/.pnpm/electron@35.7.4/node_modules/electron/dist/resources/default_app.asar/main.js:127:9)
    at async file:///D:/deepchat/node_modules/.pnpm/electron@35.7.4/node_modules/electron/dist/resources/default_app.asar/main.js:240:9

Electron-Vite Version

electron-vite/4.0.0 win32-x64 node-v20.19.0

Electron Version

electron 35.7.4

Vite Version

vite/7.1.0 win32-x64 node-v20.19.0

Validations

• Follow the Code of Conduct.
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[bluesky335]

Got same error when I use electron-store in renderer processes.

[Rainff9f58ff178]

@bluesky335 Do you fix this 🤔

[bluesky335]

@bluesky335 Do you fix this 🤔

@Rainff9f58ff178
No, I use electron-conf instead.

[luzilong2005]

See: This file is being treated as an ES module because it has a '.js' file extension and 'D:\deepchat\package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.

My config:

main : {
            plugins : [externalizeDepsPlugin(), bytecodePlugin()],
            build   : {
                lib : {
                    entry : path.join(rootDir, "src/main/src/main.ts"),
                },
                rollupOptions : {
                    output : {
                        format : "cjs",
                    },
                },
                outDir : path.join(outDir, "main"),

            },
        },
        preload : {
            plugins : [externalizeDepsPlugin(), bytecodePlugin()],
            build   : {
                lib : {
                    entry : path.join(rootDir, "src/preload/preload.ts"),
                },
                rollupOptions : {
                    output : {
                        format : "cjs",
                    },
                },
                outDir : path.join(outDir, "preload"),
            },
        },