SharedArrayBuffer will require cross-origin isolation as of M91, around May 2021
Solution 1
Update the react
and react-dom
versions from 17.0.1
to ==> 17.0.2
could resolve this problem.
You just need to run npm update
in the command prompt or bash, and hopefully you will see the changes in your package.json
file. (yarn upgrade react --latest
and yarn upgrade react-dom --latest
if you want the upgrade to persist to the package.json
)
Here is a git report from my app after applying the update:
Solution 2
As the warning shows, Chrome will require cross-origin isolation starting version 91 in order to use SharedArrayBuffer. As far as I know there is nothing you can do to resolve the warning other then wait for a react update.
Others are also having this issue as you can see here and here
The issue is fixed in this pull request but has not yet been released.
Edit: It is now fixed in version 17.0.2 of react.
Solution 3
Actually after update react-dom
to the latest version solved by me the problem, react
alone did not solve it:
npm i react@latest react-dom@latest
OR
yarn add react@latest react-dom@latest
Solution 4
For those not ready to upgrade to v17 yet (due to other legacy libraries), a simple workaround is to place the following code in any part of your index.html
<script>
// See https://github.com/facebook/react/issues/20829#issuecomment-802088260
if (!crossOriginIsolated) SharedArrayBuffer = ArrayBuffer;
</script>
Solution 5
Update the react and react-dom versions to 17.0.2, yarn upgrade react --latest
and yarn upgrade react-dom --latest
Also if using @hot-loader/react-dom or react-hot-loader, need to run yarn upgrade @hot-loader/react-dom --latest
and yarn upgrade react-hot-loader --latest
also.
Related videos on Youtube
MJBZA
I am a Ph.D. student of software engineering at the University of Calgary. At the same time, I am working remotely as a senior software architect, data engineer and a full-stack developer. Experienced with all stages of the development cycle for web apps and enterprise information systems. Well-versed in numerous programming languages including JavaScript, Node.js, PHP, Java, C#.NET, C++, HTML5, CSS3. Very well experienced with different SQL and NoSQL databases including SQL Server, MySQL, AWS DynamoDB, SAP HANA. Worked with different frameworks in the front-end and back-end like React, SAPUI5, Laravel, Spring Boot. Strong background in project management, software architecture, software design and customer relations. I graduated in August 2008 with a bachelor's degree of software engineering at University of Isfahan, Iran. Almost at the same time I started my career in a software company in June 2008. After 5 years of gaining working experiences, I immigrated to Germany to continue my studies towards a master's degree. In October 2013, I started my master studies at the University of Bonn and at the same time was working in different software companies. In August 2016, graduated with a master's degree in Computer Science and till January 2022 was working full-time as an IT consultant and developer at Cimt Services AG. At the moment I’m working with Cimt B.V. as a data engineer remotely.
Updated on June 16, 2021Comments
-
MJBZA almost 3 years
When creating a react app via
npx create-react-app
and running it, a warning pops up in DevTools (Chrome 88 and 89):scheduler.development.js:298 [Deprecation] SharedArrayBuffer will require cross-origin isolation as of M91, around May 2021. See https://developer.chrome.com/blog/enabling-shared-array-buffer/ for more details.
Environment
current version of create-react-app: 4.0.1 running from /Users/mahdi/.npm/_npx/25767/lib/node_modules/create-react-app Binaries: Node: 14.15.4 - ~/.nvm/versions/node/v14.15.4/bin/node Yarn: 1.22.4 - /usr/local/bin/yarn npm: 6.14.10 - ~/.nvm/versions/node/v14.15.4/bin/npm Browsers: Chrome: 88.0.4324.96 Edge: 87.0.664.66 Firefox: 84.0 Safari: 14.0.2 npmPackages: react: ^17.0.1 => 17.0.1 react-dom: ^17.0.1 => 17.0.1 react-scripts: Not Found npmGlobalPackages: create-react-app: Not Found
Steps to reproduce
npx create-react-app myapp
cd myapp && npm start Open
- http://localhost:3000 in Chrome 88 or 89, regular or Incognito mode
- Open DevTools: the warning is displayed
Any suggestion for resolving this warning?
-
Maran Sowthri about 3 yearsI could still see the warning even after updating.
-
MJBZA about 3 yearsDid you restart your development server?
-
Maran Sowthri about 3 yearsoh I didn't. It's working fine now (after restarting). Thanks much for your response!
-
Maran Sowthri about 3 years"Don't forget to restart the server after updating npm packages."
-
iDVB about 3 yearsWe still get this error even though we've updated to 17.0.2 for react and react-dom and have restarted dev server
-
Orange about 3 yearsI too can still the error after updating 17.0.2 and restarting the server
-
Leonard over 2 yearsI start a new project wit 17.0.2 and I still see this error... both React and react-dom.
-
Ko Ohhashi over 2 yearsmy react app is still not cross origin isolated even after upgrading to v17.02. Even newly created app is not cross origin isolated. do you have any idea?