just update npx to latest version => npm update npx

when the hell its gonna resolve any update regarding this?

Need to install the following packages: create-react-app Ok to proceed? (y) y

Creating a new React app in C:\Users\Hamza\Desktop\MERN\client.

Installing packages. This might take a couple of minutes. Installing react, react-dom, and react-scripts with cra-template...

added 1919 packages, and audited 1920 packages in 8m

145 packages are looking for funding run npm fund for details

96 vulnerabilities (85 moderate, 11 high)

To address all issues, run: npm audit fix

Run npm audit for details.

Initialized a git repository.

Installing template dependencies using npm...

added 32 packages, and audited 1952 packages in 35s

145 packages are looking for funding run npm fund for details

96 vulnerabilities (85 moderate, 11 high)

To address issues that do not require attention, run: npm audit fix

To address all issues (including breaking changes), run: npm audit fix --force

Run npm audit for details. Removing template package using npm...

removed 1 package, and audited 1951 packages in 10s

145 packages are looking for funding run npm fund for details

96 vulnerabilities (85 moderate, 11 high)

To address issues that do not require attention, run: npm audit fix

To address all issues (including breaking changes), run: npm audit fix --force

Run npm audit for details.

Created git commit.

Success! Created client at C:\Users\Hamza\Desktop\MERN\client Inside that directory, you can run several commands:

npm start Starts the development server.

npm run build Bundles the app into static files for production.

npm test Starts the test runner.

npm run eject Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

cd client npm start

Happy hacking!

Okay, say I have a png-sequence of 1500 images that I need to load and play back. Not really practical to add 1500 import statements to the code. This would be simple to do with images in the public folder - not in the src. And why use build ressources on copying images from src to public if they are already optimized once and for all?

I think this is a pretty common scenario thats been overlooked.

We’re not yet asking application authors to try the release.

People won't listen (like me).

For example, TikTok has upgraded to React 18 already (https://twitter.com/Brooooook_lyn/status/1402632529270632456?s=20)

Since people want to try out fresh things immediately, I think a list of what is blocking people from upgrading is helpful and can reduce other one's time-wasting.

<!-- Please provide a clear and concise description of what the bug is. Include screenshots if needed. Please test using the latest version of the relevant React packages to make sure your issue has not already been fixed. -->

React version: 17.0.2

Steps To Reproduce

1. Render a button and a scrollable list with a height of 150px. The list should contain an array of 15 items, making sure to set the key prop of each item to unique values.
2. Observe that you can see around 8 of the original 15 list items in view.
3. On clicking the button, insert 15 more items into the beginning of the list, once again making sure to set the key prop of each item to unique values.
4. Observe that you can now see around 8 of the new list items in view.

<!-- Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Issues without reproduction steps or code examples may be immediately closed as not actionable. -->

Link to code example: https://codesandbox.io/s/keen-sound-7q5yf?file=/src/App.js

<!-- Please provide a CodeSandbox (https://codesandbox.io/s/new), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem. You may provide a screenshot of the application if you think it is relevant to your bug report. Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve. -->

The current behavior

If the scroll position is at the very top of a list, after inserting new items at the beginning of the list, the new items are now visible.

The expected behavior

If the scroll position is at the very top of a list, after inserting new items at the beginning of the list, the original items should remain visible.

NOTE: When the scroll position is 1 or more pixels from the top of a list, after inserting new items at the beginning of the list, the new items remain visible as expected.

Hi! Can you clarify what would be the purpose of an issue like this? We’re not yet asking application authors to try the release.

The Alpha is focused on the library maintainers, and there will be a several months period before the Beta. It’s expected things would need adjustment early on, and I’m worried making a list of popular libraries before the authors even got a chance to try the release might be a bit premature.

We are committed to working with library authors and helping find recommendations where they’re unclear, including on this issue tracker. I’m just not sure that making a public list is the right way to kick this off.

What do you think?

https://github.com/ReactTraining/react-router/issues/7870

I do not have permission to post https://github.com/reactwg/react-18/discussions. Please open and pin a new issue in that repo to list all widely-used library that does not work with React 18 or need special handling.

https://github.com/facebook/create-react-app/blob/master/packages/babel-preset-react-app/dependencies.js#L88-L89

// This will need to change once we upgrade to corejs@3
corejs: 3,

Was the change not really that needed?

Here is a patch-package you can use until the PR is merged

diff --git a/node_modules/react-scripts/config/paths.js b/node_modules/react-scripts/config/paths.js
index 67ba927..767cbcb 100644
--- a/node_modules/react-scripts/config/paths.js
+++ b/node_modules/react-scripts/config/paths.js
@@ -72,7 +72,7 @@ module.exports = {
   appJsConfig: resolveApp('jsconfig.json'),
   yarnLockFile: resolveApp('yarn.lock'),
   testsSetup: resolveModule(resolveApp, 'src/setupTests'),
-  proxySetup: resolveApp('src/setupProxy.js'),
+  proxySetup: resolveApp('src/setupProxy.cjs'),
   appNodeModules: resolveApp('node_modules'),
   swSrc: resolveModule(resolveApp, 'src/service-worker'),
   publicUrlOrPath,
@@ -95,7 +95,7 @@ module.exports = {
   appJsConfig: resolveApp('jsconfig.json'),
   yarnLockFile: resolveApp('yarn.lock'),
   testsSetup: resolveModule(resolveApp, 'src/setupTests'),
-  proxySetup: resolveApp('src/setupProxy.js'),
+  proxySetup: resolveApp('src/setupProxy.cjs'),
   appNodeModules: resolveApp('node_modules'),
   swSrc: resolveModule(resolveApp, 'src/service-worker'),
   publicUrlOrPath,
@@ -131,7 +131,7 @@ if (
     appJsConfig: resolveOwn(`${templatePath}/jsconfig.json`),
     yarnLockFile: resolveOwn(`${templatePath}/yarn.lock`),
     testsSetup: resolveModule(resolveOwn, `${templatePath}/src/setupTests`),
-    proxySetup: resolveOwn(`${templatePath}/src/setupProxy.js`),
+    proxySetup: resolveOwn(`${templatePath}/src/setupProxy.cjs`),
     appNodeModules: resolveOwn('node_modules'),
     swSrc: resolveModule(resolveOwn, `${templatePath}/src/service-worker`),
     publicUrlOrPath,

This issue seems to be solved by https://github.com/facebook/react/pull/18031

Now that ES is stable in Node 14, one cannot use setupProxy and "type": "module" together without this patch. Anything I can do to help unblock this PR?

<!-- Thanks for submitting a pull request! We appreciate you spending the time to work on these changes. Please provide enough information so that others can review your pull request. The three fields below are mandatory.

Before submitting a pull request, please make sure the following is done:

1. Fork the repository and create your branch from master.
2. Run yarn in the repository root.
3. If you've fixed a bug or added code that should be tested, add tests!
4. Ensure the test suite passes (yarn test). Tip: yarn test --watch TestName is helpful in development.
5. Run yarn test --prod to test in the production environment. It supports the same options as yarn test.
6. If you need a debugger, run yarn debug-test --watch TestName, open chrome://inspect, and press "Inspect".
7. Format your code with prettier (yarn prettier).
8. Make sure your code lints (yarn lint). Tip: yarn linc to only check changed files.
9. Run the Flow type checks (yarn flow).
10. If you haven't already, complete the CLA.

Learn more about contributing: https://reactjs.org/docs/how-to-contribute.html -->

Summary

<!-- Dependabot npm and yarn fixtures dom handlebars 4.7.7 -->

<!-- Thanks for submitting a pull request! We appreciate you spending the time to work on these changes. Please provide enough information so that others can review your pull request. The three fields below are mandatory.

Before submitting a pull request, please make sure the following is done:

1. Fork the repository and create your branch from master.
2. Run yarn in the repository root.
3. If you've fixed a bug or added code that should be tested, add tests!
4. Ensure the test suite passes (yarn test). Tip: yarn test --watch TestName is helpful in development.
5. Run yarn test --prod to test in the production environment. It supports the same options as yarn test.
6. If you need a debugger, run yarn debug-test --watch TestName, open chrome://inspect, and press "Inspect".
7. Format your code with prettier (yarn prettier).
8. Make sure your code lints (yarn lint). Tip: yarn linc to only check changed files.
9. Run the Flow type checks (yarn flow).
10. If you haven't already, complete the CLA.

Learn more about contributing: https://reactjs.org/docs/how-to-contribute.html -->

Summary

<!-- it hadn't been solved-->

Having the same issue here, but with 96 vulnerabilities (85 moderate, 11 high). After running npm audit fix, this error comes up:

npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! Found: [email protected] npm ERR! node_modules/type-fest npm ERR! type-fest@"^0.21.3" from [email protected] npm ERR! node_modules/ansi-escapes npm ERR! ansi-escapes@"^4.2.1" from @jest/[email protected] npm ERR! node_modules/@jest/core npm ERR! @jest/core@"^26.6.0" from [email protected] npm ERR! node_modules/jest npm ERR! peer jest@"^26.0.0" from [email protected] npm ERR! node_modules/jest-watch-typeahead npm ERR! 1 more (react-scripts) npm ERR! 1 more (jest-cli) npm ERR! ansi-escapes@"^4.3.1" from [email protected] npm ERR! node_modules/jest-watch-typeahead npm ERR! jest-watch-typeahead@"0.6.1" from [email protected] npm ERR! node_modules/react-scripts npm ERR! react-scripts@"^4.0.3" from the root project npm ERR! 2 more (jest-watcher, terminal-link) npm ERR! npm ERR! Could not resolve dependency: npm ERR! peerOptional type-fest@"^0.13.1" from @pmmmwh/[email protected] npm ERR! node_modules/@pmmmwh/react-refresh-webpack-plugin npm ERR! @pmmmwh/react-refresh-webpack-plugin@"0.4.3" from [email protected] npm ERR! node_modules/react-scripts npm ERR! react-scripts@"^4.0.3" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

I'd ask for help on stack overflow, but people have already posted questions about it and they're getting downvoted, so I'm not sure what to do next. Any help would be great.

@mmnoo that's sort of what I was saying. Think of it is less as "rules", and think of it as "how is this going to potentially change behavior in my application?".

I can't give specifics, because I don't know your app and I don't know what side effects you're considering doing here.

If the "side effect" is logging to the console or writing to localStorage, then while it's technically "breaking the rules", it's meaningless in the grand scheme and won't cause bugs.

If it's, say, making an HTTP DELETE call at the wrong time... then that could be very bad for your app :)

So, try to think about behavior based on the stated way React is going to execute things, not "am I breaking the rules".

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

<!-- 0 failure: 0 warning:

1 markdown notices DangerID: danger-id-stable; -->

Comparing: 1a106bdc2abc7af190b791d13b2ead0c2c556f7a...4b09c091809081be04a87986c45f8164a6ec7c0c

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Significant size changes

Includes any change greater than 0.2%:

(No significant changes)

<p align="right"> Generated by :no_entry_sign: <a href="https://danger.systems/js">dangerJS</a> against 4b09c091809081be04a87986c45f8164a6ec7c0c </p>

Hi @houssemchebeb!

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at [email protected]. Thanks!

Summary

Fix typo in react-devtools-shared

Hi. I just published a library and it contains a wrapper around Portals and it dodges this event bubbling behaviour by portal-ling the portal itself. I didn't really test the implementation but feel free to check it out.

Portal Renderer code - https://github.com/nibmz7/nimz-app/blob/main/core/utils/Portal/PortalRenderer.tsx Portal code - https://github.com/nibmz7/nimz-app/blob/main/core/utils/Portal/index.tsx The library if you intend to try it out - https://www.npmjs.com/package/nimz-utils

I haven't tried the library out myself actually 😅. If it doesn't work, you may copy for portals over to your project.

Just a suggestion

In React 18 , React should accept extra params to setState function so dev can specify what changed in more general terms that he/she can use in React.memo() to determine if that changes should re-render the specific component with the new data

it should be something like this

setState(
  [...state.users, user], 
  {action:'USER_ADDED', id : 'some_id'}
);

the broadcast can be any arbitrary data

and then in the User component, we can catch that broadcast in React.memo() like this

const User= (user)=>{
   // component code   
}

export default React.memo(User, (prev, next, brodcast)=>{
  if(broadcast?.action === 'ACTION_ADDED'  &&  next.id !== broadcast.id){
   // should not re-render this component
   return true;
 }
 return false;
});

this should work with batch setState as well just instead of object, broadcast should have an array of broadcasts

this will save the devs from deep comparison of props if it holds a lot of data nodes in it.

Here's your work around, but before I get there...

Dear Maintainers: Occasionally, people need to work around things by modifying aliases. Its a tsconfig file... its my config, not yours. It's committed code. If you don't like it, throw a warning, hell, even throw an error with an override flag. This is just dumb. Really wanna get aggressive? Write out a new fixed.tsconfig.json. That would get our attention.

Now, workaround.

create a tsconfig.base.json - add your changes there. In my case it was typing overrides because yup wasn't happy with what I was using.

{
  "compilerOptions": {
    "paths": {
      "*": [
        "../node_modules/@types/*", // types at package in my mono repo. Note, I set base url to ./src, so I need to back up a directory
        "../../../node_modules/@types/*", // types at the root of my mono repo
        "./*"
      ]
    }
  }
}

On your tsconfig.json, pull it in as an import.

{
  "extends": "./tsconfig.base.json",