unknown word (csssyntaxerror)stylelint(csssyntaxerror) in .env file - reactjs

how can I fix this error(unknown word (csssyntaxerror)stylelint(csssyntaxerror) ) in my .env file in react app. ,I did not change anything in it but when i started my app this error appeared

problem has appeared when the vs code added the ("") mark to the value of REACT_APP_........variable
..that made a problem in (process.env) and axios
when I removed the ("")
the app ran again

Related

Eslint errors with Replace, Delete, singlequote and quote

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.

Environment variables show undefined in React App

I have seen all posts on StackOverflow related to my problem statement. But none of them worked for me.
The following is my folder structure:
I have a variable named REACT_APP_API_URL=some value in the config.env file. In the App.js file I am trying to print out the variable console.log(process.env.REACT_APP_API_URL). But it continues to show undefined.

Cannot find file: 'index.js' does not match the corresponding name on disk: '.\node_modules\React\react' error with React import correct

I am getting the below error on a page that is stopping it being rendered and after checking other similar errors I have double checked the import is correct and the node_modules react index file is installed.
What else could be causing this? I have had linting issues yesterday out of nowhere that I thought had fixed themselves.
The file this refers to should be node_modules/React/react.indexjs but on my system is node_modules/react.index.js. I haven't changed this myself so i'm not sure where it has come from. I have also removed any code that was added to this file which could of been causing it.
Cannot find file: 'index.js' does not match the corresponding name on disk: '.\node_modules\React\react'
This happens when you import react like this
import React from "React"
notice the capital R
instead, you should do :
import React from "react"
( with a small r )
This happens due to case sensitivity. Check if the file name is exactly the same in the same case.
Eg:
Cannot find file: 'CheckBox.js'
Check if the filename is exactly CheckBox.js not Checkbox.js
try creating the index.js in the src folder, i'm sure you created it outside the src folder.

React native Calendar Picker invalid argument supplied to oneOfType

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.

"[ts] Unterminated regular expression literal."

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.

Resources