Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

new react apps state is undefined on class based component without a constructor #10598

Open
jlbaker99 opened this issue Feb 23, 2021 · 16 comments

Comments

@jlbaker99
Copy link

Describe the bug

Using state on a class based component without a constructor and creating methods will not compile because they are undefined. Using the EXACT same code in a react app I created over the weekend, it compiles and runs fine. Trying to create a new react app via 'npx create-react-app ' will not compile.

Did you try recovering your dependencies?

Yes I tried removing node_modules and creating new react apps via 'npx create-react-app test' numerous times

Which terms did you search for in User Guide?

State undefined class based component

Environment

It was not copies to my clipboard directly so heres my copy paste:
Environment Info:

current version of create-react-app: 4.0.3
running from /Users/joseph/.npm/_npx/c67e74de0542c87c/node_modules/create-react-app

System:
OS: macOS 11.1
CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
Binaries:
Node: 14.15.4 - ~/.nvm/versions/node/v14.15.4/bin/node
Yarn: Not Found
npm: 7.5.6 - ~/.nvm/versions/node/v14.15.4/bin/npm
Browsers:
Chrome: 88.0.4324.192
Edge: Not Found
Firefox: 85.0.2
Safari: 14.0.2
npmPackages:
react: ^17.0.1 => 17.0.1
react-dom: ^17.0.1 => 17.0.1
react-scripts: 4.0.3 => 4.0.3
npmGlobalPackages:
create-react-app: Not Found

Steps to reproduce

(Write your steps here:)

  1. npx create-react-app test
  2. create a class based component
  3. initialize state without the use of a constructor or write an arrow function.

Expected behavior

State would be initialized and my app would compile

Actual behavior

state is undefined. method is undefined.
screenshot

Reproducible demo

I do not have the time at the moment to upload a link to a project. I will try to get a repo up soon if you need

@brightsider
Copy link

Same issue

@ewein
Copy link

ewein commented Feb 23, 2021

Yup same here

@dave-jobalign
Copy link

same here.

this changed from last Friday build for us. using all exact match versions, the total packages increased by 5, trying to track down

@brightsider
Copy link

broken in last 24 h

@dave-jobalign
Copy link

check out @svgr/webpack > @babel/preset-env and @babel/preset-react

@dreammyboy
Copy link

Is this issue related to babel? Babel just updated from 7.12.x to 7.13.x. I got an issue that arrow function not working in react class. Fixed it with downgrading babel back to 7.12.x

@m3yevn
Copy link

m3yevn commented Feb 23, 2021

same issue. how do we fix? any workaround?

@Thirunavukkarasu
Copy link

We are having the same issue not only for class component without constructor it is happening even with constructor as well. Please kindly notify if there are any workaround.

@Thirunavukkarasu
Copy link

Issue got fixed now automatically without any code change. While doing yarn build and yarn start it is working fine now. Thanks!

@median-man
Copy link

Issue got fixed now automatically without any code change. While doing yarn build and yarn start it is working fine now. Thanks!

Same

@cartermr
Copy link

Creating a react app through create-react-app causing something to break, breaks the binding to "this". arrow functions in classes are undefined. npm installing react, react-dom, and react-scripts without create-react-app, and arrow functions work fine in classes.

@ravi123shanker
Copy link

Creating a react app through create-react-app causing something to break, breaks the binding to "this". arrow functions in classes are undefined. npm installing react, react-dom, and react-scripts without create-react-app, and arrow functions work fine in classes.

Still got the same issue after reinstalling.

@ravi123shanker
Copy link

arrow function compilation failed: 'myFun' is not defined no-undef

@cartermr
Copy link

Ran this again this morning, the issue has been fixed. Thank you.

@struginskij
Copy link

I still have the same issue, has anyone any resolution?

@BraianS
Copy link

BraianS commented Feb 13, 2024

Please close this, there has been no activity since March 1, 2021 and @cartermr said it was fixed on February 23, 2021. If anyone has more details can they reopen again.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests