Tag Archives: react

[Solved] React Error: ReactDOM.render is no longer supported in React 18.

Error message:

ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it’s running React

 

ReactDOM.React 18 no longer supports rendering. Use createRoot instead. Before you switch to the new API, your application will behave as if it is running React 17

Reason:
React team has launched the latest version of 18.0, in which React 18 no longer supports ReactDOM.render

Console error:

Solution:
Use createRoot in the index.js file

import React from 'react'
import ReactDOM from 'react-dom'
import TopList from './TopList'

// Use createRoot
import { createRoot } from 'react-dom/client';
const container = document.getElementById('root')
const root = createRoot(container)
root.render(<TopList/>)

// report error
// ReactDOM.render( < TopList /> , document.getElementById('root'))

 

node.js yarn Error: SyntaxError: Unexpected string [How to Solve]

Error log:

exec "/home/latte-with-ice/.nvm/versions/node/v16.17.0/bin/node" "/home/latte-with-ice/.nvm/versions/node/v16.17.0/bin/yarn" "[email protected]"
     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

SyntaxError: Unexpected string
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1055:15)
    at Module._compile (node:internal/modules/cjs/loader:1090:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1180:10)
    at Module.load (node:internal/modules/cjs/loader:1004:32)
    at Function.Module._load (node:internal/modules/cjs/loader:839:12)

Error Cause.
There are two types of yarn installed by system apt install yarn and npm install yarn

Solution:

  1. Uninstall system yarn first: sudo apt-get remove yarn && sudo apt-get
  2. [can not do] uninstall yarn from node: npm uninstall -g yarn
  3. Reinstall yarn: npm install -g yarn
  4. Re-execute the program and it will work again

[Solved] umi Project Create Error: Rendered more hooks or Rendered fewer hooks

Error: Rendered more hooks or Rendered fewer hooks

Use usestate to report errors only for new UMI projects, not for code and syntax errors.

Error reporting: rendered more hooks than during the previous render Or rendered feeder hooks than expected

Solution: find umirc.tsx file, delete fastrefresh attribute

// fastRefresh: {}

[Solved] react Chrome Browser Error: Uncaught TypeError: Cannot read properties of undefined (reading ‘forEach‘)

Error: Uncaught TypeError: Cannot read properties of undefined (reading ‘forEach’)

Cause: caused by the extension of Google browser

Solution 1: close the extension program of Google browser

Solution 2: find the wrong line and comment it out

Comment out the eighth line

Just restart

[Solved] FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed – JavaScript heap out of me

Build react project prompts error message


<--- Last few GCs --->

[1118:0x104c00000]   210060 ms: Scavenge (reduce) 2020.9 (2049.8) -> 2020.1 (2051.3) MB, 3.4/0.0 ms  (average mu = 0.148, current mu = 0.006) allocation failure 
[1118:0x104c00000]   213180 ms: Mark-sweep (reduce) 2021.0 (2050.3) -> 2020.1 (2051.3) MB, 3117.6/0.0 ms  (average mu = 0.089, current mu = 0.010) allocation failure scavenge might not succeed


<--- JS stacktrace --->

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 0x101319fc5 node::Abort() (.cold.1) [/usr/local/bin/node]
 2: 0x1000b6169 node::Abort() [/usr/local/bin/node]
 3: 0x1000b62df node::OnFatalError(char const*, char const*) [/usr/local/bin/node]
 4: 0x100200ba7 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
 5: 0x100200b43 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]

Solution:

1. Install increase-memory-limit.

 npm install -g increase-memory-limit

2. Execute after successful installation

increase-memory-limit

Execute npm run build again and it will be OK!

[Solved] react Error: Can‘t perform a React state update on an unmounted component

Warning: Can’t perform a React state update on an unmounted component. This is a no-op, but it indic

In the development of react, we may often encounter this warning:

Can't perform a React state update on an unmounted component.This is a no-op, but it indicates a memory leak in your application.

We cannot set state after the component is destroyed to prevent memory leakage

As for the above errors when switching routes in react, the actual reason is that after the component is mounted, you perform asynchronous operations, such as Ajax requests or setting timers, and you perform setstate operation in callback. When you switch routes, the component has been unmounted. At this time, the callback is still executing in the asynchronous operation, so the setstate does not get a value.

There are two solutions:

1. Clear all operations when uninstalling (e.g. abort your Ajax request or clear timer)

componentDidMount = () => {
    //1.ajax request
    $.ajax('Your request',{})
        .then(res => {
            this.setState({
                aa:true
            })
        })
        .catch(err => {})
    //2.timer
    timer = setTimeout(() => {
        //dosomething
    },1000)
}
componentWillUnMount = () => {
    //1.ajax request
    $.ajax.abort()
    //2.timer
    clearTimeout(timer)
}

2. Set a flag and reset it when unmount

componentDidMount = () => {
    this._isMounted = true;
    $.ajax('Your Request',{})
        .then(res => {
            if(this._isMounted){
                this.setState({
                    aa:true
                })
            }
        })
        .catch(err => {})
}
componentWillUnMount = () => {
    this._isMounted = false;
}

3. The simplest way (oil of gold)

componentDidMount = () => {
    $.ajax('Your Request',{})
    .then(res => {
        this.setState({
            data: datas,
        });
    })
    .catch(error => {
 
     });
}
componentWillUnmount = () => {
    this.setState = (state,callback)=>{
      return;
    };
}

CRA 5.0.0 Add Proxy Project Start Error [How to Solve]

Problem Description:
https://github.com/facebook/create-react-app/issues/11762#issue-1080972271
i.e.
Set the proxy in package.json, and then start the project through npm start or yarn start, the error is as follows:

>yarn start
yarn run v1.22.10
$ react-scripts start
Attempting to bind to HOST environment variable: test.localhost
If this was unintentional, check that you haven't mistakenly set it in your shell.
Learn more here: https://cra.link/advanced-config

Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
 - options.allowedHosts[0] should be a non-empty string.
error Command failed with exit code 1.

Solution: Don’t set the proxy in package.json, but set it in src/setupProxy.js, and delete the proxy in package.json, and finally restart npm start.

[Solved] react-router-dom Error: index.js:1 Warning: Functions are not valid as a React child.

index. js:1 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of < Component /> from render. Or maybe you meant to call this function rather than return it.

reason:

1. When you return a component, you mistakenly write it as component instead of <Component/>

2. Maybe you want to call this function instead of return it.

For example:

① When calling a method, forget to add the following parentheses.

② When using react-router version 6.0.2 (released in 20211110), the writing method has been changed when registering the route.

[Solved] proxy Configure Error: Error occured while trying to proxy to:

The project uses the create react app scaffold to build
before configuring the local proxy, the following

the following projects need to proxy HTTPS, configure the proxy to report an error of 500, and respond to error occurred while trying to proxy to:
find and reconfigure, and add changeorigin: true

proxy: {
    '/cas': {
      target: 'https://**.**.**.**:30090',
      secure: false,
      changeOrigin: true,
      pathRewrite: { "": "" }
    },
  },```

[Solved] NPM run build package error: Ineffective mark-compacts near heap limit Allocation failed – JavaScript heap out of memory

1. Phenomenon

It has always been normal. Suddenly one day, an error is reported when packing. The key information is as follows:
ineffective mark compacts near heap limit allocation failed - Javascript heap out of memory
the details are as follows:

2. Solution

All kinds of data say that node memory overflow , and solutions are also given,
for example: – max_old_space_Size = 4096 and so on, but it doesn’t work for me. (if you refer to mine, it doesn’t work, you can look at the other methods mentioned above)
later, I saw a solution, which worked
1, CMD Global install increase memory limit
NPM install -g increase memory limit

2, CD enter the project directory and execute:
increase memory limit

3. Repack
NPM run build