Dual package import issue in electron-forge/webpack env and potential fix

[edongashi]

Importing jotai/utils leads to a different import path compared to importing only jotai. This creates a duplicate instance of the library and state is not shared between the two, leading to issues ilke this one. Somehow the jotai import inside node_modules resolves to esm/index.mjs whereas the import from the project resolves to esm/index.js.

Electron has no support for ES modules currently, but webpack handles the resolution and conversion to commonjs, so it's fine to import ESM from node_modules. Specifying resolve.conditionNames in webpack.renderer.config.js seems to have fixed the issue for me:

module.exports = {
  module: {
    rules,
  },
  plugins: [...plugins, new NodePolyfillPlugin()],
  resolve: {
    conditionNames: ['import', 'module', 'require', 'default'], // <---------
    extensions: ['.js', '.ts', '.jsx', '.tsx', '.css'],
  },
};

conditionNames is an ordered list of import strategies from packages and now everything resolves to jotai/*.mjs.
I'm not sure what the difference between import and module is, but I added both in any case to avoid issues with other installed packages.

I haven't done further tests but the linked issue no longer occurs.
Thanks to @dai-shi for pointing me in the right direction.

[dai-shi]

Thanks for the investigation.
Yes, it should the "right" fix for now.
I think you don't need "module" for this case, to resolve *.mjs in jotai.
But, "module" might be for other libs.