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.
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.
Issue details
.env value not initialized in the react property
siteKey value is always blank
Property in react
const [siteKey] = useState(process.env.REACT_CAPTCHA_SITE_KEY);
Key in .env
REACT_CAPTCHA_SITE_KEY='some key'
Html
<ReCAPTCHA sitekey={siteKey}/>
Main issue is with your environment declaration, as per create-react-app:
You must create custom environment variables beginning with
REACT_APP_. Any other variables except NODE_ENV will be ignored to
avoid accidentally exposing a private key on the machine that could
have the same name. Changing any environment variables will require
you to restart the development server if it is running.
As you don't have any setter method needed for useState, you can define your variable just with const, like:
const siteKey = process.env.REACT_APP_CAPTCHA_SITE_KEY
I saw Some Issue in your code, First thing is,UseState hook initialization is wrong.
It Should be,
const [siteKey, setsiteKey] = useState(process.env.REACT_APP_CAPTCHA_SITE_KEY);
And also You don't need to use this environment variable as useState, because it is not changing so, when you need to access environment variable, use as below,
ex:const siteKey=process.env.REACT_APP_CAPTCHA_SITE_KEY;
Other Important Issues are,
Your environment variable should prefix with the REACT_APP_ in the .env file.
ex:process.env.REACT_APP_SOME_VARIABLE
And possible Issue can be, your .env file is not in your root which is that, within the same directory as the package. json file.
Key in .env should be like as shown below
REACT_APP_CAPTCHA_SITE_KEY=some_key_value
Also whenever you edit your .env file you need to restart your React app to take effect of your modified file.
I'm facing an odd issue while implementing pagination for my react-table component. The problem is what you can see in the screenshot - Property X does not exist on type 'TableInstance:
So I found a similar problem that someone had before and I have used the approved solution: react-table pagination properties doesn't exist on type 'TableInstance{}'
The example file is also here: https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-table#example-type-file
The problem is that nothing has changed, I have described the file in the root folder and it seems that APP can't see it as you can see in the picture above.
I'm new to React, can someone help me with that? I was trying to find a solution by myself but I failed :(
Just add a triple-slash directive path pointing to the react-table-config.d.ts file so the types get augmented. It's going to be something like this:
/// <reference path="./react-table-config.d.ts" />
Including it in one place is already enough. No need to add it to every file that uses react-table.
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
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.