[DevTools Bug]: Can not work on devtools, instructions lead to error

[sroussey]

Website or app

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en

Repro steps

Because react requires java, not on macos (but assumes brew installed!):

brew update && brew install java
sudo ln -sfn /usr/local/opt/openjdk/libexec/openjdk.jdk /Library/Java/JavaVirtualMachines/openjdk.jdk
export PATH="/usr/local/opt/openjdk/bin:$PATH"' >> ~/.zshrc
export PATH="/usr/local/opt/openjdk/bin:$PATH" >> ~/.zshrc
export PATH="/usr/local/opt/openjdk/bin:$PATH"

Because react requires node before v17 (but assuming you have nvm installed!):

nvm install 16

then the real stuff (directions inside folders like ./chrome/ are quite wrong):

git clone https://github.com/facebook/react.git
cd react
yarn install
yarn build-for-devtools
cd packages/react-devtools-extensions
yarn build:chrome
yarn build:chrome:local
yarn run test:chrome

Now inside devtools:

Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval'".

    at ./src/contentScripts/prepareInjection.js (prepareInjection.js:133:1)
    at __webpack_require__ (prepareInjection.js:20:30)
    at prepareInjection.js:84:18
    at prepareInjection.js:87:10

What exactly are you doing that works in order to build, test, and develop this extension?

How often does this bug happen?

Every time

DevTools package (automated)

No response

DevTools version (automated)

No response

Error message (automated)

No response

Error call stack (automated)

No response

Error component stack (automated)

No response

GitHub query string (automated)

No response

[mondaychen]

Sounds like you are trying to set up the development environment of DevTools extension and found the docs confusing, rather than reporting a bug in DevTools. The docs are indeed confusing and outdated, and I plan to improve them in near future.
That being said, I never encountered the issue you described. Can you let me know which version of Chrome are you using?

[sroussey]

Stable version. 109

[mondaychen]

Ah I've successfully reproduced this issue. The root cause is that webpack was using eval for local (dev mode) build. Will submit a fix soon

[sroussey]

Thanks!