error after ejecting from "Create React App"

[jhub95]

!!! IF YOU DO NOT USE THIS ISSUES TEAMPLATE, YOUR ISSUE IS LIABLE TO BEING IGNORED BY US

Prerequisites

Please answer the following questions for yourself before submitting an issue.

• [x ] I am running version 1.4.0 downloaded Oct 5, 2018
• [ x] I checked the documentation and found no answer
• [x ] I checked to make sure that this issue has not already been filed
• [x ] I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

The app should run after being ejected just as it did before it was ejected

Current Behavior

The windows loads but then quickly disappears to be loaded with an error

Failure Information (for bugs)

Failed to compile
./src/views/Forms/WizardSteps/Step1.jsx
Line 104: 'classes' is missing in props validation react/prop-types
Line 109: HTML entities must be escaped react/no-unescaped-entities

Search for the keywords to learn more about each error.

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

1. install material dashboard pro react
2. run 'npm run eject'
3. above error on screen, plus more printed to console

Context

Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.

• Device: computer
• Operating System: ubuntu
• Browser and Version: Chrome Version 70.0.3538.77 (Official Build) (64-bit)

Failure Logs

./src/views/Forms/WizardSteps/Step1.jsx
Line 104: 'classes' is missing in props validation react/prop-types
Line 109: HTML entities must be escaped react/no-unescaped-entities

./src/variables/general.jsx
Line 104: HTML entities must be escaped react/no-unescaped-entities
Line 144: HTML entities must be escaped react/no-unescaped-entities
Line 184: HTML entities must be escaped react/no-unescaped-entities
Line 223: HTML entities must be escaped react/no-unescaped-entities
Line 255: HTML entities must be escaped react/no-unescaped-entities
Line 255: HTML entities must be escaped react/no-unescaped-entities

And it goes on and on with similar error warnings.

[einazare]

Hello there @jhub95 ,

Thank you for your interest in working with our products.
It seems pretty obvious what the issue is.
You need to add wherever we use withStyles function, a new prop for that component:

import PropTypes from "prop-types";
...
ComponentName.propTypes = {
      ...
      classes: PropTypes.object
      ...
}

export default withStyles(styleName)(ComponentName);

Hope this information helps you.

Best,
Manu

[jhub95]

Hi @einazare,

Thanks for the reply. I think by the Create React App standards an app should work after being ejected just as it did before being ejected. Seeing how that's not the case with this App, it's not obvious to me what has changed to make it not work.

Just to clarify, for this issue I'm referring to a brand new install with no code changes. I have not added anything.

Your product already uses propTypes in its components, so your advice is not quite what I need. I have a feeling the problem is related to some ESLint configuration that has not been transferred properly out of Create React App into manual mode. But I need you, the creators, to help me(us) figure out exactly what that is. Otherwise I have to leave my App in Create React App (un-ejected), which is not so helpful to me at this time.

[einazare]

Hello again, @jhub95 ,

Sorry for this late response.
I am away from the office for a few days with some personal matters.
Right now I do not have access to a PC and can't test this.
If I'll have some time and access to a PC, I'll make some tests and see what I can figure out, if not, then next week when I'll be back at the office for sure I'll be able to sort things out.
Meanwhile, I believe we have added lint commands to our product https://demos.creative-tim.com/material-dashboard-pro-react/#/documentation/lint
As I can see in your logs, the errors seem to be from lint.
If you run the above commands, are the errors still persisting?
Also, I've found this links as well:

• https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-unescaped-entities.md
• missing in props validation react/prop-types jsx-eslint/eslint-plugin-react#1492
• [prop-types] Throw is missing in props validation when reassign this.props to props jsx-eslint/eslint-plugin-react#1257

I believe those links could solve the issues.
I'll come back in a few days with another comment.

Best,
Manu

[einazare]

Hello again @jhub95 ,

Is this still an issue?
If not, I would like to close this issue.

Best,
Manu

[jhub95]

Hi @einazare ,

Yes it's open. I didn't want to crowd this ticket with my findings, so I didn't respond. I'm interested in what you see when you do a fresh install of this theme and then do an eject. You're experiencing it will be much enlightening than my talking about it.

Justin

[einazare]

Hello again, @jhub95 ,

Upon ejecting the product, indeed the errors occur.
The fix for it is as I've said in one of my previous comments. Take the errors and solve them one by one.
For example, one error is 'classes' is missing in props validation, this means that where you have this error, in that component you would need to add:

import PropTypes from "prop-types";
....
YourComponent.propTypes = {
...
classes: PropTypes.object
...
}
...

And so on. After dealing with all the errors, my project works just fine.
If you have any other ideas on how to solve this, let me know.
The above method works.
We did not know that people would be stuck on this issue.
I don't think I can add these fixes in my next update since the time is really tight, but I hope in the second next update I'll add the type checks and so on so you can easily use our product after it has been ejected.

All those errors seem to be eslint issues. I do not understand why the npm run lint"fox work.
I will take a look again in a few days, meanwhile, I think I have given you a fix for the moment.
Once again, I am open to suggestions.

Best,
Manu

[jhub95]

Thanks, @einazare ,

We did not know that people would be stuck on this issue.

Yeah, this is my first React app. You have to admit it's kinda freaky when something that should work suddenly spits a bunch of errors at you, and you're like "I payed a good bit of money for this". It would be interesting to see what percentage of your customers eject from Create React App. Do even the pros see all those errors and say, "yea, no problem, I'll go through and fix all those lines myself"?

As to whether you should close the issue or not is up to you.