require() of ES Module issue with safe-stringify

[ptheofan]

Instaling the plugin in nuxt produces the following.

require() of ES Module ..../node_modules/@sindresorhus/safe-stringify/index.js from ..../node_modules/pinia-shared-state/dist/index.js not supported. Instead change the require of .../node_modules/@sindresorhus/safe-stringify/index.js in .../node_modules/pinia-shared-state/dist/index.js to a dynamic import() which is available in all CommonJS modules.

[wobsoriano]

What happens if you put @sindresorhus/safe-stringify in build.transpile of nuxt.config.ts?

export default defineNuxtConfig({
  build: { transpile: ['@sindresorhus/safe-stringify'] }
})

[ptheofan]

Nothing really changes, same error. Adding however the shared-state also in the transpile did allow the build to complete, however, the end result was a complete mess.

transpile: [
      '@sindresorhus/safe-stringify',
      'pinia-shared-state',
    ]

If it helps, you can see the "project" I am trying it with here https://github.com/ptheofan/nuxt-pinia-demo/tree/shared-state

[wobsoriano]

Thanks for the repro! Will definitely check it out

[Nincha]

Hey!

Pretty much the same problem I think here, when trying to import like this (in a Quasar project boot file):

import {PiniaSharedState} from 'pinia-shared-state'
...
  pinia.use(PiniaSharedState({
    enable: true,
    initialize: false
  }))

Results in:

[Quasar Dev Webserver] / -> error during render
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: E:\Projets\vsl-app-notypescript\node_modules\@sindresorhus\safe-stringify\index.js
require() of ES modules is not supported.
require() of E:\Projets\vsl-app-notypescript\node_modules\@sindresorhus\safe-stringify\index.js from E:\Projets\vsl-app-notypescript\node_modules\pinia-sha
red-state\dist\index.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in
 that package scope as ES modules.
Instead rename E:\Projets\vsl-app-notypescript\node_modules\@sindresorhus\safe-stringify\index.js to end in .cjs, change the requiring code to use import()
, or remove "type": "module" from E:\Projets\vsl-app-notypescript\node_modules\@sindresorhus\safe-stringify\package.json.

    at new NodeError (internal/errors.js:322:7)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1102:13)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:101:18)
    at Object.<anonymous> (E:\Projets\vsl-app-notypescript\node_modules\pinia-shared-state\dist\index.js:1:809)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)

Sorry I'm not an expert at ESM, but if needed I can try to provide more info. :)

Cheers! Charlie

[wobsoriano]

Hi @Nincha , thanks for reporting too.

Can you try [email protected]?

[Nincha]

Thanks for you feedback!

I've tried and now the import seems ok, but it throws a new error when I keep pinia.use(PiniaSharedState .... : "BroadcastChannel is not defined"

Hope it helps. :D

[wobsoriano]

are you using nuxt @Nincha ?

[Nincha]

are you using nuxt @Nincha ?

Nope, I'm implementing your library on a Quasar project, pretty much following their documentation to implement Pinia. Strange thing ATM I can't find the link to the specific page that shows example for pinia implementation but I'll look again tomorrow from my PC.

[Nincha]

Found out the link I followed. :)

[wobsoriano]

Haven't used quasar but where do you add pinia plugins? @Nincha

[Nincha]

Quasar has a built-in feature that pre-installs Pinia. It generates an src\stores\index.js file which looks like this (I let their comments + my code importing your plugin) :

[wobsoriano]

Hey, it's probably calling the broadcast-channel module in the server. Try to polyfill it or install the plugin only on the client-side.

In Nuxt, you can do it with a suffix in the file name: my-plugin.client.ts.