Getting Error: module not found: path when call preloadBindings()

[adn35350]

Hi, I integrate your module into my Electron project created from scratch. I follow the README to config i18next-electron-fs-backend but I'm getting this error when call preloadBindings() in preload.ts.

VM13 sandbox_bundle:2 Unable to load preload script: /home/user/git/personnel/calculator-electron/dist/preload.js
(anonymous) @ VM13 sandbox_bundle:2
(anonymous) @ VM13 sandbox_bundle:2
___electron_webpack_init__ @ VM13 sandbox_bundle:2
(anonymous) @ VM13 sandbox_bundle:2
VM13 sandbox_bundle:2 Error: module not found: path
    at preloadRequire (VM13 sandbox_bundle:2:82124)
    at Object.path (<anonymous>:84:18)
    at __webpack_require__ (<anonymous>:108:42)
    at eval (index.js:1:1659)
    at ./node_modules/i18next-electron-fs-backend/lib/index.js (<anonymous>:20:1)
    at __webpack_require__ (<anonymous>:108:42)
    at eval (preload.ts:5:39)
    at ./src/preload.ts (<anonymous>:62:1)
    at __webpack_require__ (<

Here is my detailed files. package.json

    "devDependencies": {
        "@types/node": "^20.3.1",
        "@types/react": "^18.2.12",
        "@types/react-dom": "^18.2.5",
        "autoprefixer": "^10.4.14",
        "css-loader": "^6.8.1",
        "electron": "^25.1.1",
        "electron-builder": "^24.4.0",
        "html-webpack-plugin": "^5.5.3",
        "postcss": "^8.4.24",
        "postcss-loader": "^7.3.3",
        "prettier": "^2.8.8",
        "style-loader": "^3.3.3",
        "tailwindcss": "^3.3.2",
        "ts-loader": "^9.4.3",
        "ts-node": "^10.9.1",
        "typescript": "^5.1.3",
        "webpack": "^5.87.0",
        "webpack-cli": "^5.1.4",
        "webpack-dev-server": "^4.15.1",
        "webpack-merge": "^5.9.0"
    },
    "dependencies": {
        "i18next": "^23.2.1",
        "i18next-electron-fs-backend": "^3.0.0",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-i18next": "^13.0.0"
    }

preload.ts

console.log('Preload script loaded successfully.');

import { contextBridge, ipcRenderer } from 'electron';
import { preloadBindings } from 'i18next-electron-fs-backend';

contextBridge.exposeInMainWorld('api', {
    i18nextElectronBackend: preloadBindings(ipcRenderer, process),
});

main.ts

import {
    app,
    BrowserWindow,
    BrowserWindowConstructorOptions,
    ipcMain,
} from 'electron';
import { clearMainBindings, mainBindings } from 'i18next-electron-fs-backend';
import path from 'path';
import fs from 'fs';

const createWindow = (): void => {
    const isProd = process.env.NODE_ENV === 'production' || app.isPackaged;

    const browserWindowOptions: BrowserWindowConstructorOptions = {
        height: 600,
        width: 800,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js'),
        },
    };

    // Create the browser window.
    const mainWindow = new BrowserWindow(browserWindowOptions);
    mainBindings(ipcMain, mainWindow, fs);

    if (isProd) {
        // and load the index.html of the app.
        mainWindow.loadFile(path.resolve(__dirname, 'index.html'));
    } else {
        // dev server
        mainWindow.loadURL('http://localhost:3000/index.html');
        // Open the DevTools.
        mainWindow.webContents.openDevTools();
    }
};

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    } else {
        clearMainBindings(ipcMain);
    }
});

app.on('activate', () => {
    // On OS X it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) {
        createWindow();
    }
});

And finally i18n.ts

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import backend from 'i18next-electron-fs-backend';
import path from 'path';

i18n
    .use(backend)
    .use(initReactI18next)
    .init({
        backend: {
            loadPath: '/locales/{{lng}}/{{ns}}.json',
            //addPath: '../locales/{{lng}}/{{ns}}.missing.json',
            contextBridgeApiKey: 'api', // needs to match first parameter of contextBridge.exposeInMainWorld in preload file; defaults to "api"
        },

        // other options you might configure
        debug: true,
        lng: 'fr',
    });

export default i18n;

Does i18next-electron-fs-backend is incompatible with my project or packages version ?

[ransome1]

@adn35350 I have encountered the same issue. Did you solve it?

[adn35350]

@adn35350 I have encountered the same issue. Did you solve it?

Not yet. I'm still waiting for an answer of the repository owner

[ransome1]

Too bad. For now I'm doing the translation stuff in the renderer, not my preferred way :/