Can't resolve 'use-sync-external-store/shim' in `~/.../node_modules/wouter'. Did you mean 'index.js'?

[jrnkng]

When I import Route from 'wouter' I get the following error.

Can't resolve 'use-sync-external-store/shim' in `~/.../node_modules/wouter'
Did you mean 'index.js'?
BREAKING CHANGE: The request 'use-sync-external-store/shim' 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.

Created this project two days ago with create-react-app. Nothing special added really but somehow it doesn't work.

This is my package.json:

{
  "name": "...",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@mui/icons-material": "^5.11.0",
    "@mui/material": "^5.11.3",
    "@mui/styled-engine-sc": "^5.11.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.11",
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.10",
    "react": "^18.2.0",
    "react-bootstrap-icons": "^1.10.2",
    "react-dom": "^18.2.0",
    "react-dropzone": "^14.2.3",
    "react-scripts": "5.0.1",
    "styled-components": "^5.3.6",
    "typescript": "^4.9.4",
    "web-vitals": "^2.1.4",
    "wouter": "^2.10.0-alpha.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

EDIT:

I created a fresh create-react-app project and installed wouter. Same thing happens when I import Route and use it.

[HansBrende]

@jrnkng hm, I think this is due to a new webpack 5 feature.

React query had the same issue: TanStack/query#3521 (comment)

We can probably use their same fix.

[HansBrende]

@molefrog I opened up a PR to fix this issue, mind taking a look?

[molefrog]

@molefrog I opened up a PR to fix this issue, mind taking a look?

On it! Sorry, didn't get the notification.

[Ziinc]

The directory import issue affects other esm-focused bundlers as well.
For example, this error pops up in my tests when using vite for bundling:

Error: Directory import '/.../web/node_modules/use-sync-external-store/shim' is not supported resolving ES modules imported from /.../web/node_modules/wouter/react-deps.js
Did you mean to import use-sync-external-store/shim/index.js?

Adjusting the cjs dist import makes the error go away:

// react-deps.js
// var shim = require('use-sync-external-store/shim');  <--before
var shim = require('use-sync-external-store/shim/index.js');  <--after

this might help.

[molefrog]

Released in [email protected]

[HansBrende]

@jrnkng @Ziinc can you confirm it is working for you now?

[Ziinc]

Updated to latest, results in the following

Error: Cannot find module '/.../web/node_modules/wouter/use-sync-external-store' imported from /.../web/node_modules/wouter/react-deps.js

added a PR for the name resolution fix. #277

[molefrog]

@Ziinc Could you check once again please (alpha.3)?

[Ziinc]

@molefrog looks like the version was bumped but the change wasn't included. May be you forgot to pull when publishing?

[molefrog]

@molefrog looks like the version was bumped but the change wasn't included. May be you forgot to pull when publishing?

Sorry, my bad 🤦
Republished.

[Ziinc]

works great now 🥳 thanks @molefrog

[molefrog]

@Ziinc Let us know if you experience any other issues, I'll keep the alpha for the couple of days/weeks and if everything works well I can drop the release.