Skip to content

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

@jrnkng

Description

@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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions