I'm trying to run my project, but eslint is generating some errors, errors that didn't happen some time ago, and if I try to correct them manually, others appear. Some of the messages are:
ERROR
[eslint]
src\components\Funcoes\GestaoUsuario\GestaoUsuario.js
Line 1:34: Replace `'react'` with `"react"`
prettier/prettier
Line 10:1: `#mui/material/Button` import should occur before import of `../../MDBox`
import/order
Line 10:20: Replace `'#mui/material/Button'` with `"#mui/material/Button"`
prettier/prettier
Line 48:1: Replace `············</DashboardLayout>),·idU:·0` with `········</DashboardLayout>␍⏎······),␍⏎······idU:·0,`
Among other errors, even with these errors the project is running perfectly, how can I make these errors stop appearing or resolve them?
Yo need to format your code with eslint, there is a shortcut to do it on VSCode i think it's Ctrl Shift P. If you're using another editor just look for how to format code with eslint. Personally, I had these errors while pushing my app to github because of some failing workflows in the repository.
Related
[enter image description here](https://i.stack.imgur.com/lON9e.png)
I'm writing code for a task in a react course and after the file is saved it simply changes what I wrote and a bunch of errors appear and o I don't know why. The first pic is what I wrote, and the second one what happened after I saved the file. Can someone tell me why this is happening?
This never happened to any other code I wrote before.
Your VS Code settings are probably set to run a linter (ESLint maybe?) when you save your file. You can check your settings in the VS Code workspace settings: https://code.visualstudio.com/docs/getstarted/settings. If you hover over the red squiggly lines it will hint at the errors in your code.
It's been awhile since I've worked in React, but I think you might need to wrap your return in a string literal (backticks: ``). You also might want to use Typescript or JSX with React.
You can also post a sample on Stackblitz https://stackblitz.com/ if you want more help.
I am using react-native-calendar-picker from github to use a calendar in my app. The problem it's that everytime I run it, I get some warnings like:
As seen there, there's something about node_modules\react-native-calendar-picker\CalendarPicker\DaysGridView.js , and there are 4 warning, with rows 254,255,256 and 248. Going to that file, I found that those lines are:
So, the problems seems to be somewhere at selectedRangeStartStyle, selectedDayStyle and selectetRangeStyle which I have setted in my componenet with #XXXXXX, as hex color codes. Any help would be appreciated, thanks!
I am also getting the same warning because of those lines. It was a change introduced by this commit https://github.com/stephy/CalendarPicker/commit/081a07f6c95fc178d17295ef0cd3f68f2b7d117f to fix this issue https://github.com/stephy/CalendarPicker/issues/246
Reverting the changes locally on the file stopped the error from popping up in my console, but that is just a quick workaround i found for now only.
Attached is an image of what I am receiving when I try to bundle my project for production. I am receiving a Unexpected token name <<Object>>, expected punc <<,>> message as shown in the image.
Terminal output of error
Not sure what the issue is but I have tried to use uglify-es and uglify-js and get the same error. I even attempted to make a simple app using es6+ code to see if uglify-js worked and it did. So some of the older threads on the internet mentioning that uglify-js won't handle es6+ code might be irrelevant now. I also read somewhere that the newest version (3.x) does support it but haven't been able to confirm that.
I would love to show some code but not sure what relevant piece of code I need to show. As per the image it also mentions the line, col, pos etc... but the code on that line does not start at the col number mentioned.
I will definitely update this post as I investigate but any tips or ideas would be great!
So the issue is now resolved after some thorough research. It looks like the line 1665 I was looking at in my non-optimised bundle app.js was not what I needed to look at (obvious since the column index was way off).
So instead I decided to output the bundle generated code that FuseBox was working on and it was in-fact different. This is the line I added in node_modules/fuse-box/quantum/plugin/BundleWriter.js inside the uglifyBundle function to output the content so I could read it clearly.
fs.writeFile('bundle.txt', bundle.generatedCode);
The output in bundle.txt that was the issue and my actual TypeScript code is shown here:
// bundle.txt line 1665
this.wholesalerSettings = [object Object]
// actual project code
constructor() {
this.wholesalerSettings = process.env.WHOLESALERSETTINGS;
this.API = this.setHostUrl();
}
So I took a look in my fuse.ts file and noticed I was not parsing the json object correctly.
public get wholesalerSettings()
{
const wholesaler = require(`./src/~/wholesalers/${this.wholesaler}/config.json`);
return JSON.stringify(wholesaler);
}
// then down in the environment plugin
EnvPlugin({
WHOLESALERSETTINGS: this.wholesalerSettings,
IMAGE_PATH: this.imagePath
}),
Once I parsed the object correctly with JSON.stringify it worked perfectly as process.env.WHOLESALERSETTINGS was now a JSON string instead of an Object.
First time I really dealt with devops stuff but was fun and at the same time highly stressful. I guess the main thing I learned is when you are dealing with tooling and third party tools (FuseBox uses uglify-js) then you need to take a closer look at the input that is being given to that tool rather than the output like I was at first.
UglifyJS says it sees Object where it's expecting a ,, so we can infer:
The code you wrote (or generated by some other tool right before uglifyJS processes it, e.g. babel? Though you probably don't use babel since your uglifyJS deals with es6 directly) is "Object" where the error occurs.
It's expecting a ,, so the error is occuring at some place like multiple variable declaration, let foo, bar, or object/array definition, [1, 2] {foo: 1, bar: 2}
I'm getting this error in an almost empty react component:
"[ts] Unterminated regular expression literal."
import * as React from 'react';
export default class EmptyComponent extends React.Component {
render() {
return (
<p>Hello</p>
);
}
}
I don't know what I'm doing wrong!
It turns out I was using the .ts file extension instead of .tsx
Make sure your component file extension is .tsx (if you're using Typescript) or .jsx (if you're using Javascript).
So my case was a bit unique. I had the same error message. but everything got fix after I restarted the build process (e.g. in this case I was working with storybook, so npm run storybook). The symptom was that, even I changed my file name to be .tsx the error still reporting the same file as .ts. That reminded me that I changed the file name when the build is already watching and running. That's when I decided restart the build command and wolaa! everything fixed itself.
Sometime its just that --- "Have you turn it off and on again?"
Just in case someone else runs across this and has named their file appropriately, re-inspect your regex to make sure you haven't accidentally created an invalid regex. For example, mine looked like:
/^https?:\/\/
and it should have been:
/^https?:\/\//
^ left this lil' guy off
You can also use an online regex tool to make sure you've created a valid regex.
I'm using WebStorm. The file is a .tsx file and turned out that after I close the file and re-open the file again, the issue is gone itself.
I'm getting an error with an SDK2.0 app using a rally custom grid:
It only errors with IE (current), and it does not error if I run it locally, only when I install it in Rally and run it.
I don't know if its a Rally issue, or a EXTJS issue.
SCRIPT5007: Unable to get value of the property 'modelField': object is null or undefined
sdk.js, line 4 character 1276692
The code that failed:
if(e.modelField&&e.modelField.hidden)
Context around that error:
{xtype:"rallytextfield",allowBlank:false,removeNameAttribute:true}}},PortfolioItem:function(){return{hidden:true}},AttributeType:function(b){return a.apply(Rally.ui.grid.FieldColumnFactory.defaultRenderer(b),{sortable:false})}})})();(function(){var a=window.Ext4||window.Ext;var b=function(g,e){var d=g.text;var c=e.text;if(d>c){return 1}if(d<c){return -1}return 0};a.define("Rally.ui.grid.ColumnBuilder",{requires:["Ext.Array","Ext.util.Format","Rally.ui.grid.FieldColumnFactory"],constructor:function(){this.defaultColumns=[];this.autoAddAllModelFieldsAsColumns=true},withDefaultColumns:function(c){if(a.isArray(c)){this.defaultColumns=this.defaultColumns.concat(c)}return this},withSortableColumns:function(c){this.sortable=c;return this},shouldAutoAddAllModelFieldsAsColumns:function(c){this.autoAddAllModelFieldsAsColumns=c;return this},build:function(d){var e=a.Array.map(this.defaultColumns,function(g){if(a.isString(g)){return Rally.ui.grid.FieldColumnFactory.getColumnConfigFromField(d.getField(g),this.sortable)}return g},this);if(this.autoAddAllModelFieldsAsColumns){var c=this._buildModelColumns(d,this.defaultColumns,e);e=e.concat(c)}this._removeHiddenColumns(e);return this._stripTagsFromColumnText(e)},_removeHiddenColumns:function(d){for(var c=d.length-1;c>0;c--){var e=d[c];if(e.modelField&&e.modelField.hidden){a.Array.erase(d,c,1)}}}
Not sure what other guidance I can provide to help locate this issue.
The code was a bit large, so I started to do some divide and conquer before I posted it and I found the cause in my code, though probably not the root cause:
In my columnCfgs when adding the rallygrid, I had a trailing ',' on the last entry.
The really annoying thing is this works in all browsers locally, but only fails in IE on Rally with a super obscure error, so its really hard to chase down...even my JavaScript syntax highlighter did not warn me...
I suspect this is actually a problem in either Rally or EXT-JS code where IE is just really finicky...