"Failed to parse source map" - Electron React app crashes

Question

I am new to coding. And trying to make an electron app with react. In the app I want to save user login information in the app so that I can automatically fetch the data when the app launches. So, I am using electron-settings to save the data.

code sample:

app.jsx

...

import setting from "electron-settings";

function App() {
  ...

  useEffect(() => {
    const getUser = async () => {
      return await setting.get('xpass-user')
    }
    
    console.log(getUser());
  }, [])
  
  return ...;
}

export default App;

electron.js

const { app, BrowserWindow, ipcMain } = require('electron')
const path = require('path')
const url = require('url')
const isDev = require('electron-is-dev')

function createWindow() {
  // Create the browser window.
  const win = new BrowserWindow({
    width: 1250,
    height: 900,
    titleBarStyle: "hiddenInset",
    autoHideMenuBar: true,
    webPreferences: {
      nodeIntegration: true,
      enableRemoteModule: true,
    }
  })

  win.loadURL(
    isDev
      ? 'http://localhost:3000'
      : url.format({
          pathname: path.join(__dirname, 'index.html'),
          protocol: 'file:',
          slashes: true
        })
  )

  win.webContents.openDevTools();

}

app.on('ready',createWindow)

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', function () {
  if (BrowserWindow.getAllWindows().length === 0) createWindow()
})

the error:

ERROR in ./node_modules/electron-settings/dist/settings.js 166:27-40

Module not found: Error: Can't resolve 'fs' in 'C:\Users\learner\app\node_modules\electron-settings\dist'

ERROR in ./node_modules/electron-settings/dist/settings.js 170:29-44

Module not found: Error: Can't resolve 'path' in 'C:\Users\learner\app\node_modules\electron-settings\dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:

• add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
• install 'path-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "path": false }

ERROR in ./node_modules/electron-settings/node_modules/mkdirp/lib/find-made.js 3:4-19

Module not found: Error: Can't resolve 'path' in 'C:\Users\app\node_modules\electron-settings\node_modules\mkdirp\lib'

If anyone can help me I'd be grateful. Thank You

Answer 1

Module not found: Error: Can't resolve 'fs' in...

In create-react-app, they have stubbed out 'fs'.You cannot import it. They did this because fs is a node core module.

Add the following to the root of the "package.json" file.

"browser": {
  "fs": false,
  "path": false,
  "os": false
}

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.

to resolve this issue check this question How to Polyfill node core modules in webpack 5