Doesn't work with electron-forge / electron 24.1.2

[ivxvm]

Hello, seems like this library doesn't work anymore with recent electron ecosystem.

// preload.ts (also tried this in electron's main, where window is created)
const Store = require("electron-store");
Store.initRenderer();

// somewhere in renderer codebase
import Store from "electron-store";
import { atomWithStorage } from "jotai/utils";

const persistentStorage = new Store();

export const atomWithPersistentStorage = <T>(name: string, defaultValue: T) =>
  atomWithStorage<T>(name, defaultValue, {
    getItem: (key) => persistentStorage.get(key, defaultValue) as T,
    setItem: (key, value) => persistentStorage.set(key, value),
    removeItem: (key) => persistentStorage.delete(key),
    subscribe: (key, callback) =>
      persistentStorage.onDidChange(key, (newValue) => callback(newValue as T)),
  });

Errors I get:

ERROR in ./node_modules/electron/index.js
Invalid dependencies have been reported by plugins or loaders for this module. All reported dependencies need to be absolute paths.
Invalid dependencies may lead to broken watching and caching.
As best effort we try to convert all invalid values to absolute paths and converting globs into context dependencies, but this is deprecated behavior.
Loaders: Pass absolute paths to this.addDependency (existing files), this.addMissingDependency (not existing files), and this.addContextDependency (directories).
Plugins: Pass absolute paths to fileDependencies (existing files), missingDependencies (not existing files), and contextDependencies (directories).
Globs: They are not supported. Pass absolute path to the directory as context dependencies.
The following invalid values have been reported:
 * "C:/Users/ivxvm/Code/wicked-launcher/node_modules/electron/dist/LICENSE"
 * "C:/Users/ivxvm/Code/wicked-launcher/node_modules/electron/dist/LICENSES.chromium.html"
 * "C:/Users/ivxvm/Code/wicked-launcher/node_modules/electron/dist/chrome_100_percent.pak"
 * and more ...
ERROR in ./node_modules/atomically/dist/index.js 5:13-28
Module not found: Error: Can't resolve 'path' in 'C:\Users\ivxvm\Code\wicked-launcher\node_modules\atomically\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/atomically/dist/utils/fs.js 4:11-24
Module not found: Error: Can't resolve 'fs' in 'C:\Users\ivxvm\Code\wicked-launcher\node_modules\atomically\dist\utils'
Did you mean './fs'?
Requests that should resolve in the current directory need to start with './'.
Requests that start with a name are treated as module requests and resolve within module directories (node_modules).
If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.
ERROR in ./node_modules/atomically/dist/utils/fs.js 5:15-30
Module not found: Error: Can't resolve 'util' in 'C:\Users\ivxvm\Code\wicked-launcher\node_modules\atomically\dist\utils'

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: { "util": require.resolve("util/") }'
	- install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "util": false }
ERROR in ./node_modules/atomically/dist/utils/temp.js 4:13-28
Module not found: Error: Can't resolve 'path' in 'C:\Users\ivxvm\Code\wicked-launcher\node_modules\atomically\dist\utils'

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/conf/dist/source/index.js 16:15-30
Module not found: Error: Can't resolve 'util' in 'C:\Users\ivxvm\Code\wicked-launcher\node_modules\conf\dist\source'

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: { "util": require.resolve("util/") }'
	- install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "util": false }
ERROR in ./node_modules/conf/dist/source/index.js 17:11-24
Module not found: Error: Can't resolve 'fs' in 'C:\Users\ivxvm\Code\wicked-launcher\node_modules\conf\dist\source'
ERROR in ./node_modules/conf/dist/source/index.js 18:13-28
Module not found: Error: Can't resolve 'path' in 'C:\Users\ivxvm\Code\wicked-launcher\node_modules\conf\dist\source'

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/conf/dist/source/index.js 19:15-32
Module not found: Error: Can't resolve 'crypto' in 'C:\Users\ivxvm\Code\wicked-launcher\node_modules\conf\dist\source'

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: { "crypto": require.resolve("crypto-browserify") }'
	- install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "crypto": false }
ERROR in ./node_modules/conf/dist/source/index.js 20:15-32
Module not found: Error: Can't resolve 'assert' in 'C:\Users\ivxvm\Code\wicked-launcher\node_modules\conf\dist\source'

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: { "assert": require.resolve("assert/") }'
	- install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "assert": false }
ERROR in ./node_modules/electron-store/index.js 2:13-28
Module not found: Error: Can't resolve 'path' in 'C:\Users\ivxvm\Code\wicked-launcher\node_modules\electron-store'

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/index.js 1:11-24
Module not found: Error: Can't resolve 'fs' in 'C:\Users\ivxvm\Code\wicked-launcher\node_modules\electron'
ERROR in ./node_modules/electron/index.js 2:13-28
Module not found: Error: Can't resolve 'path' in 'C:\Users\ivxvm\Code\wicked-launcher\node_modules\electron'

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/env-paths/index.js 2:13-28
Module not found: Error: Can't resolve 'path' in 'C:\Users\ivxvm\Code\wicked-launcher\node_modules\env-paths'

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/env-paths/index.js 3:11-24
Module not found: Error: Can't resolve 'os' in 'C:\Users\ivxvm\Code\wicked-launcher\node_modules\env-paths'

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: { "os": require.resolve("os-browserify/browser") }'
	- install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "os": false }
ERROR in ./node_modules/pkg-up/node_modules/find-up/index.js 2:13-28
Module not found: Error: Can't resolve 'path' in 'C:\Users\ivxvm\Code\wicked-launcher\node_modules\pkg-up\node_modules\find-up'

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/pkg-up/node_modules/locate-path/index.js 2:13-28
Module not found: Error: Can't resolve 'path' in 'C:\Users\ivxvm\Code\wicked-launcher\node_modules\pkg-up\node_modules\locate-path'

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/pkg-up/node_modules/path-exists/index.js 2:11-24
Module not found: Error: Can't resolve 'fs' in 'C:\Users\ivxvm\Code\wicked-launcher\node_modules\pkg-up\node_modules\path-exists'

[steve981cr]

I ran into the same issue.

• I get the error when packaging the app with Electron-Forge in Windows. This is Electron's recommended Packager.
• I do not get the error on Mac.
• I do not get the error on Windows if I use the Electron-Builder packager.
• I have isolated the error to be caused if I use Electron Store. If I just comment out the use of it, the error goes away. And interestingly, if I use electron-settings instead of Electron-Store (they perform a similar function) I get the same type of error.

Attached is a screenshot of the error message I get.

[SteveCastle]

The docs seem to be out of date as you can't create a store in the renderer process anymore. Everything works great if I only create my store in the main process and use IPC to communicate. Electron React Boilerplate project has some useful docs on this.

https://electron-react-boilerplate.js.org/docs/electron-store

[steve981cr]

My solution was to make a super simple version of electron-store that works for my needs. At the time of this writing electron-store doesn't work with apps packaged with electron-forge, or at least it didn't work for me. I made a gist of what I did for anyone having this problem: https://gist.github.com/steve981cr/499dae0c2a4c6340d0f35656dae92020

[sintanial]

After some research, i found a solution:

1. Need to add in main webpack config target: "electron-main",

import type {Configuration} from 'webpack';

import {rules} from './webpack.rules';
import {plugins} from './webpack.plugins';

export const mainConfig: Configuration = {
    entry: './src/index.ts',
    target: "electron-main", // <-- PUT IT HERE
    module: {
        rules,
    },
    plugins,
    resolve: {
        extensions: ['.js', '.ts', '.jsx', '.tsx', '.css', '.json'],
    },
};

2. Need to add in renderer webpack config target: "electron-renderer",

import type { Configuration } from 'webpack';

import { rules } from './webpack.rules';
import { plugins } from './webpack.plugins';

rules.push({
  test: /\.css$/,
  use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
});

export const rendererConfig: Configuration = {
  target: "electron-renderer", // <-- PUT IT HERE
  module: {
    rules,
  },
  plugins,
  resolve: {
    extensions: ['.js', '.ts', '.jsx', '.tsx', '.css'],
  },
};