TypeError being thrown when navigating to Roles

Questions and Answers Strapi Admin
1
System Information
  • Strapi Version: 4.7.1
  • Operating System: Windows 11
  • Database: sqlite
  • Node Version: v18.15.0
  • NPM Version: 9.5.0
  • Yarn Version: 1.22.19

I am unable to navigate to /admin/settings/roles or admin/settings/users-permissions/roles in the dashboard. When I do, the following error is thrown in the console browser, and I’m presented with a blank white page:

main.76664ff1.js:35 TypeError: (0 , r.default) is not a function
    at ce (Admin_settingsPage.a92ff3d4.chunk.js:169:1576)
    at xe (Admin_settingsPage.a92ff3d4.chunk.js:169:2518)
    at zu (main.76664ff1.js:1170:54665)
    at dc (main.76664ff1.js:1174:9133)
    at Bc (main.76664ff1.js:1174:989)
    at Jc (main.76664ff1.js:1174:917)
    at _l (main.76664ff1.js:1174:768)
    at Cu (main.76664ff1.js:1172:11074)
    at main.76664ff1.js:1170:39492
    at n.unstable_runWithPriority (main.76664ff1.js:1241:3850)

I have not been able to recreate this with a blank and unmodified project, but I can confirm that still happens if I reset my database to its original state. It’s worth noting I have a few changes and am making use of a few plugins:

Here is my package.json

{
  "dependencies": {
    "@strapi/plugin-graphql": "^4.0.5",
    "@strapi/plugin-i18n": "^4.7.1",
    "@strapi/plugin-users-permissions": "^4.7.1",
    "@strapi/provider-upload-cloudinary": "^4.7.1",
    "@strapi/strapi": "^4.7.1",
    "better-sqlite3": "8.2.0",
    "fs-extra": "^10.0.0",
    "lodash.set": "^4.3.2",
    "mime-types": "^2.1.27",
    "strapi-plugin-ezforms": "^0.1.5",
    "strapi-plugin-menus": "^1.3.1"
  },
  "name": "backend",
  "private": true,
  "version": "0.1.0",
  "description": "A Strapi application",
  "scripts": {
    "develop": "strapi develop",
    "start": "strapi start",
    "build": "strapi build",
    "strapi": "strapi"
  },
  "devDependencies": {},
  "author": {
    "name": "A Strapi developer"
  },
  "strapi": {
    "uuid": "38023836-e0b1-4f85-9066-813281c2539b",
    "template": "@strapi/template-blog@^2.0.0",
    "starter": "@strapi/starter-gatsby-blog"
  },
  "engines": {
    "node": ">=14.19.1 <=18.x.x",
    "npm": ">=6.0.0"
  },
  "license": "MIT"
}

I’m not using TypeScript at all in the strapi allication, which is why I find it strange to be throwing a TypeError. I am however using it in my frontend project.

What else could I provide in terms of diagnostic information to help here? Are there any places I could look to help fix this issue?

Many thanks,
Chris

2

@ChrisLau90 Have you found the solution?

3

No not yet, sorry. I do however have a work around for the mean time.

You can navigate directly to the sub pages by adding the IDs to the urls in the browser (e.g. /admin/settings/users-permissions/roles/2).

Are you seeing the same issue?

4

I also faced the same issue, and after a lot of research and development, I found a solution. Switching from npm to yarn solved the problem for me.

1 Like
5

I am using yarn and have done since the creation of this project, however I’m still getting this issue.

6

This worked for me also. Thanks!

7

The problem is with dependence: ‘match-sorter’, this dependency has a default export when installed with yarn, but when installed with NPM it has no default export, so it breaks when sorting in the role page in Strapi.

Path: /node_modules/match-sorter/dist/match-sorter.cjs.js

MatchSorter with NPM:
exports.matchSorter = matchSorter;

MatchSorter with YARN:
exports.default = matchSorter;

the import on the file: node_modules/@strapi/strapi/admin/admin/src/pages/SettingsPage/pages/Roles/ListPage/index.js

import matchSorter from 'match-sorter';

As a default import and that is the problem. For some reason, admin, helper-plugin, plugin-content-type-builders, and plugin-users-permissions on their package.json have match-sorter 4.0.2 but NPM installs “version”: “6.3.1”, and YARN “version”: “4.2.1”,