Tag Archives: react

[Solved] UMI Project Error: uncaught at _callee3 at _calle3

1. If it is just a react project and the DVA framework is introduced, an onerror attribute will be passed in when calling the DVA method

const app = dva({
	onError(err) {
		// error
		console.log(err);
	},
});

2. If you are using the UMI framework, you cannot find the place where the DVA is called. Create a new app.js file in the SRC directory and write the following contents

export const dva = {
  config: {
    onError(e) {
      e.preventDefault();
      console.error(e.message);
    },
  },
};

Error: A cross-origin error was thrown. React doesn’t have access to the actual error object in deve

In the react project, you sometimes see the following errors:

Error: A cross-origin error was thrown. React doesn’t have access to the actual error object in development. See https://fb.me/react-crossorigin-error for more information.

In case of such an error message, first check whether you have such a code: JSON. Parse (xxx), which is mostly caused by this problem.

The corresponding processing method can use try catch to catch exceptions

     try {
        // You can interrupt the point to see that the execution has reported an error when you get here
        let copyObj = JSON.parse(obj)
        if (copyObj === null) {
          return <span>-</span>
        } else {
          let str = ''
          Object.keys(copyObj).forEach(
            key => (str += key + ': ' + copyObj[key] + ',')
          )
          return str.slice(0, -1)
        }
      } catch (e) {
        message.error('xxxx Parsing error')
        return obj
      }

Inline JavaScript is not enabled. Is it set in your options?

React using protable prompts:

// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?
      Error in /Users/jun/object/aoi/node_modules/antd/es/style/color/bezierEasing.less (line 110, column 0)

webpack compiled with 67 errors

Solution:
webpack.mix.js configures webpackconfig and enables JavaScript enabled for less loader

mix.js('resources/js/app.js', 'public/js')
    .react()
    .webpackConfig({
        module: { rules: [{
            test: /\.less$/,
            use: [
                {
                    loader: "less-loader",
                    options: {
                        lessOptions: {
                            javascriptEnabled: true,
                        }
                    }
                }
            ]
        }]}
    })
    .sass('resources/sass/app.scss', 'public/css', [
    ]);

How to React page to achieve entry and exit animation

React animated router dependency

file: https://www.npmjs.com/package/react-animated-router
Replace the direct routing component switch with the animated router

The red mark is wrong

In the process of development (TS), we always report an error after replacement, saying that there is no necessary attribute. After looking at the source code and adding the following attributes, we report no error (enter, exit, appearance)
< AnimatedRouter enter exit appear> ... </ AnimatedRouter>

Simply record how to improve the appearance animation style

Introduce a style (‘react-animated-router/animal. CSS’) which is copied from the installation package. If you want to modify it, it is left and right animation by default

// ------Page in/out animation start-------
.animated-router-container {
  height: 100%;
}
.animated-router-in-transition {
  /* page animation in progress */
  position: relative;
  width: 100%;
  overflow: hidden;
}
.animated-router-forward-enter {
  transform: translate(-20px);
  opacity: 0;
}
.animated-router-forward-enter-active {
  transform: translate(0);
  opacity: 1;
}
.animated-router-forward-exit {
  transform: translate(0);
  opacity: 1;
}
.animated-router-forward-exit-active {
  transform: translate(100%);
  opacity: 0;
}
.animated-router-backward-enter {
  transform: translate(-20px);
  opacity: 0;
}
.animated-router-backward-enter-active {
  transform: translate(0);
  opacity: 1;
}
.animated-router-backward-exit {
  transform: translate(0);
  opacity: 1;
}
.animated-router-backward-exit-active {
  transform: translate(100%);
  opacity: 0;
}
.animated-router-forward-enter-active,
.animated-router-forward-exit-active,
.animated-router-backward-enter-active,
.animated-router-backward-exit-active {
  /* Transition time and jogging effect required for different transition phases */
  transition: all 0.4s ease-in;
}
.animated-router-forward-exit,
.animated-router-backward-exit {
  position: absolute !important;
  width: 100%;
  top: 0;
  left: 0;
}
// ------Page in/out animation end-------

When a warning appears, try to install the following two plug-ins

npm install [email protected] --save
npm install –save-dev prop-types

Another component library comes out of animation – ant motion

error This is probably not a problem with npm. There is likely additional logging output above.

Nextjs program released, reported a pile of errors

18 verbose node v14.11.0
19 verbose npm  v6.14.8
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] build: `next build`
22 error Exit status 1
23 error Failed at the [email protected] build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

Maybe due to the version update,
the solution is to install it again. It is recommended to empty all the previous ones

rm -rf node_modules
rm package-lock.json
npm cache clear --force
npm install

 

To solve the problem of NPM run eject error in react

To solve the problem of NPM run eject error in react

Recently, I began to learn react. I used create react app to initialize a react project. Then I found that I wanted to configure webpack manually, but I didn’t know where it was. I found that I was using BD to configure webpack package.json There’s a bunch of code in the

 "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

NPM run eject will copy all dependent files and corresponding dependencies ( webpack , Babel ) to your project. It's a single operation. Once eject , you can't go back. If you want to go back to the normal project, you have to Re NPM install create react app - G

It was found that the following error was reported when executing NPM run eject :

checked online, which means that the problem here is that the scaffold adds . Gitgnore files, but there is no local warehouse, which can be used normally according to the following order

git init
git add .
git commit -m 'init'

Then execute NPM run eject again, and the execution is successful.
after the execution is completed, it is found that package.json It's like this:

  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js"
  },

The last line of code was deleted by the system itself, not by me!

That's all for today

Reprint should be marked, thank you!

Higher order components in react

High-order components (Hoc) is an advanced technique used to reuse component logic in React. Hoc itself is not part of the React API, but rather a design pattern based on React’s combinatorial features.
In particular, a higher-order component is a function that takes an argument to a component and returns a value to the new component.

Components convert props to UI, and higher-order components convert components to another component. 

const EnhancedComponent = higherOrderComponent(WrappedComponent);

SCRIPT1002: syntax error File: 0. chunk.js ,SCRIPT5009: ‘Map‘ is undefined File: 0. chunk.js -Solutions

Scene description

The React project starts with NPM run start and works fine in Chrome, Firefox, and Edge, but when Internet explorer opens, the console reports an error with the title
The solution

1.SCRIPT1002: syntax error File: 0. Chunk. Js, Line: 2296, Column: 27
SRC /index.js
add the following and put it on the first line

import 'react-app-polyfill/ie9';
import 'react-app-ployfill/stable;'
import 'fast-text-encoding/text';

Json
find browserslist and add ie9 which is the above support

"browserslist" {
	"production": [
		...,
		"ie>9",
	],
	"development": [
		...
		"ie>9",
	]
},

First, ensure the above module, if not, you can execute NPM install to install
After the module is installed, Internet Explorer opens the project again and the problem is resolved. But then the following problem arises…
2.SCRIPT5022: SyntaxError File: 1. chunk.js, Line: 197681, Column: 38
The error in the Internet Explorer console, the solution:
Open the /node_modules/react - dev - utils/webpackHotDevClient js , in the following code to add slashes: true,

then,
goes into the node_moudles folder, delete all contents of the . Cache folder, and clear the cache in Internet explorer.
SCRIPT5009: 'Map' is File: Map is undefined e.chunk.js, Line: 2340,0 Column: 3
I did not solve this error by myself. Due to the company project, NPM install cannot be run on the server's Intranet. Therefore, I provide ideas and hope you can solve it perfectly.
Official advice: https://reactjs.org/docs/javascript-environment-requirements.html
calculate, this has not been solved, sorry...

React Error: Minified React error #119 

Error: Minified React error #119; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=119 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

According to the console print, we can visit
http://facebook.github.io/react/docs/error-decoder.html?The page invariant=119 gets the following message:

The full text of the error you just encountered is:
addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).

Then check to see if the component in question USES the ref attribute outside of the render method. The problem I’m reporting here is the unexpected use of the ref attribute outside of the render method in the body center component of the create dialog.
debugging is hard, I have to say.
I hope I can help you.

Error reported in react events.js:160 throw er; // Unhandled’error’ event 

events.js:160
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE :::8081
    at Object.exports._errnoException (util.js:1020:11)
    at exports._exceptionWithHostPort (util.js:1043:20)
    at Server._listen2 (net.js:1258:14)
    at listen (net.js:1294:10)
    at Server.listen (net.js:1390:5)

This problem is caused by the occupied port of 99.99%, such as the 8081 port mentioned above, so if you encounter this problem, please don’t be nervous, just find the corresponding port and close the application! How to check which application is used according to the port, this network a search a lot, here is not repeated! If you have any difficulty, please leave a message.)
Actually it’s not just react, as long as you use NPM to package, ports being occupied will report this error.