Error: Can't resolve 'use-sync-external-store/shim/with-selector' in '/../node_modules/@slate-yjs/react/dist'

[rcbevans]

ERROR in ./node_modules/@slate-yjs/react/dist/index.js 82:0-94
Module not found: Error: Can't resolve 'use-sync-external-store/shim/with-selector' in '/../node_modules/@slate-yjs/react/dist'
Did you mean 'with-selector.js'?
BREAKING CHANGE: The request 'use-sync-external-store/shim/with-selector' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
webpack compiled with 2 errors and 1 warning

I'm trying to bump @slate-yjs/core and @slate-yjs/react to ^0.3.0 and after fixing up the breaking API changes to cursors, my front-end is unable to build due to to the error above.

This is in a react 17.0.2 create-react-app project with no explicit dependency on use-sync-external-store myself.

I tried nuking all node_modules, as well as installing after removing yarn.lock.

FWIW I don't have a package.json with "type": "module".

Any idea where this might be coming from, or how to resolve the issue?

[faizansaleem13504]

Facing the exact same issue

[faizansaleem13504]

One solution that worked for me was to patch the package.json file and setting default export from "default": "./dist/index.js" to "default": "./dist/index.cjs"

[cjjeon]

This is somewhat related to this thread anza-xyz/wallet-adapter#200 which seems like webpack 5 issue with create-react-app.

The way I fixed this issue is updating webpack config following https://stackoverflow.com/questions/63280109/how-to-update-webpack-config-for-a-react-project-created-using-create-react-app.

And I updated the file config-overrides.js as:

// config-overrides.js
module.exports = function override(config, env) {
  // New config, e.g. config.plugins.push...
  config.module.rules.push({
    test: /\.m?js/,
    resolve: {
      fullySpecified: false,
    },
  });
  return config;
};

[rcbevans]

@cjjeon I feel terrible for not following up here, but I ended up doing exactly this.

[jameskirkby]

For anyone using Next.js (we're using v13.1.5), adding this to the next.config.js fixed the issue:

// next.config.js
const nextConfig = {
  // ...
  transpilePackages: ['@slate-yjs/react'],
}

module.exports = nextConfig

[thovden]

I ran into this using vitest (I don't get this error in vite for some reason). I resolved it in vitest.config forcing use of the CJS variant:

test: {
  alias: {
        '@slate-yjs/react': path.resolve(baseDir, 'node_modules', '@slate-yjs', 'react', 'dist', 'index.cjs'),
  }
}