ERROR: r.default.acequire is not a function

[Nevinia210]

Category

• Enhancement
• Bug
• Question

Version

Please specify what version of the library you are using: [1.17.0 , but it was not working also on version 1.15.2 ]

Expected / Desired Behavior / Question

Webpart work in all use cases as it should and render the content

Observed Behavior

Im facing issue with webpart build currently on top of spfx 1.17.2
webpart is quite simple - get some data from list and render them to user, its working normally in typical use cases, but in some use case it is throwing following error on page

Steps to Reproduce

one buggy scenario is:

1. open new browser tab
2. open some page different than root - like tenant.com/sites/somepage
3. click on company logo, which results in redirection to root home page - like tenant.com
4. webpart on page shows the error above

if there is some different approach, like try it on same tab and not open a new one - its working

code

there is my package.json

  "dependencies": {
    "@microsoft/sp-adaptive-card-extension-base": "1.17.0",
    "@microsoft/sp-core-library": "1.17.0",
    "@microsoft/sp-lodash-subset": "1.17.0",
    "@microsoft/sp-office-ui-fabric-core": "1.17.0",
    "@microsoft/sp-property-pane": "1.17.0",
    "@microsoft/sp-webpart-base": "1.17.0",
    "@pnp/spfx-controls-react": "^3.6.0",
    "@pnp/spfx-property-controls": "3.5.0",
    "infinite-scroll-hook": "1.0.2",
    "office-ui-fabric-react": "7.199.1",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-infinite-scroll-component": "6.1.0",
    "react-infinite-scroll-hook": "4.0.4",
    "react-infinite-scroller": "1.2.6",
    "react-responsive": "9.0.0",
    "react-waypoint": "^10.3.0",
    "tslib": "2.3.1",
    "usehooks-ts": "2.9.1"
  },
  "devDependencies": {
    "@microsoft/eslint-config-spfx": "1.17.0",
    "@microsoft/eslint-plugin-spfx": "1.17.0",
    "@microsoft/rush-stack-compiler-4.5": "0.4.0",
    "@microsoft/sp-build-web": "1.17.0",
    "@microsoft/sp-module-interfaces": "1.17.0",
    "@rushstack/eslint-config": "2.5.1",
    "@types/react": "17.0.45",
    "@types/react-dom": "17.0.17",
    "@types/react-infinite-scroller": "1.2.3",
    "@types/webpack-env": "1.15.2",
    "ajv": "6.12.5",
    "eslint": "8.7.0",
    "eslint-plugin-react-hooks": "4.3.0",
    "gulp": "4.0.2",
    "typescript": "4.5.5"
  }

Thanks!

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[ahmetyanik]

I have the same problem and need also an answer.

[PieterHeemeryck]

We are also having this issue. Twice now for the past 6 months. Seems to be related to different versions of ultimately the react-ace package being loaded (e.g. by 2 different SPFx solutions). Hopping between pages that have the different versions triggers this.

[email protected] and [email protected] seemed to have this conflicting set of sub dependencies on react-ace. Don't know if anyone can concur?

Anyone has any clue on how to prevent / solve this? We finally managed to fix it by setting the 2 packages to equal versions, as we had control over both SPFx solutions.

What I'm wondering is: what if you can't control (or even determine) the version of react-ace of a custom SPFx solution implemented by another party? That might pose some issues when adding your own custom SPFx solution to the same tenant / site / page...