Hello!

Watched lessons on React: Link to lessons
Has reached component event handling

Reproduced in the lesson. Through the webpack assembled assembly. When trying to delete a div through the UnMount button, I got an error:

Uncaught ReferenceError: App is not defined

Looked at the js file compiled by webpack.

 unmountComponent: function (safely) { if (!this._renderedComponent) { return; } var inst = this._instance; if (App.componentWillUnmount && !inst._calledComponentWillUnmount) { inst._calledComponentWillUnmount = true; if (safely) { var name = this.getName() + '.componentWillUnmount()'; ReactErrorUtils.invokeGuardedCallback(name, App.componentWillUnmount.bind(inst)); } else { if (process.env.NODE_ENV !== 'production') { measureLifeCyclePerf(function () { return App.componentWillUnmount(); }, this._debugID, 'componentWillUnmount'); } else { App.componentWillUnmount(); } } }

It has the App variable, but it is not declared in the function or globally. Replaced by inst, the problem was solved.

Webpack configuration file:

 module.exports = { context: __dirname + '/frontend', entry: './main.jsx', output: { path: __dirname + "/public", filename: 'build.js' }, module: { loaders: [ { test: /.jsx?$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets: ['react',['es2015', { modules: false }]] } } ] }, };

Please suggest what could be the error. Link to the whole project: link

React code:

app.jsx

 import React from 'react'; import ReactDOM from 'react-dom'; class Main extends React.Component { constructor() { super(); this.state = { val: 0 }; this.update = this.update.bind(this); } update(){ this.setState({val: this.state.val + 1}) } render(){ console.log('render'); return <button onClick={this.update}>{this.state.val}</button>; } componentWillMount() { console.log('componentWillMount'); } componentWillUnmount() { console.log(`componentWillUnmount`); } componentDidMount() { console.log('componentDidMount'); } } class Wrapper extends React.Component { mount() { ReactDOM.render(<Main/>, document.getElementById("a")); } unmount() { ReactDOM.unmountComponentAtNode(document.getElementById("a")); } render() { return( <div> <button onClick={this.mount.bind(this)}>Mount</button> <button onClick={this.unmount.bind(this)}>UnMount</button> <div id="a"></div> </div> ); } } export default Wrapper;

main.jsx

 import React from 'react'; import ReactDOM from 'react-dom'; import Wrapper from './app.jsx'; ReactDOM.render(<Wrapper />,document.getElementById('root'));
  • Why did you decide that the error was in the webpack? Show the sources before processing them with the webpack. - Pavel Mayorov
  • Completed. The suspect is a webpack, because I connected the react library in html, everything worked correctly. I also got into the sources of the unmountComponentAtNode method, there is no App variable - kolynchick
  • You have attached the wrong file. - Pavel Mayorov
  • In my opinion, a very strange way of manipulating a component. It is easier to add a value to the state (true, false) and it is necessary to orient on it at all to render this component or not. Change state by pressing a button - Alex Slobodyansky

1 answer 1

Probably the App is a component. Then you should have to import it at the beginning of the code, for example: import App from './containers/AppContainer' Well, or whatever js you use. In the render method, you should mount it, like this:

 render( <Provider store={store}> <App/> </Provider>, document.getElementById('app') )

Then it will be possible to unmount it.