Environment variable evaluation not working in index.html
See original GitHub issueIs this a bug report?
yes
Did you try recovering your dependencies?
yes
Environment
System: OS: macOS High Sierra 10.13.6 CPU: x64 Intel® Core™ i5-7360U CPU @ 2.30GHz Binaries: Node: 10.9.0 - /usr/local/bin/node npm: 6.2.0 - /usr/local/bin/npm Browsers: Chrome: 70.0.3538.67 Safari: 12.0 npmPackages: react: ^16.5.2 => 16.5.2 react-dom: ^16.5.2 => 16.5.2 react-scripts: ^2.0.3 => 2.0.5 npmGlobalPackages: create-react-app: Not Found
Steps to Reproduce
- Add a condition script in your
public/index.html
file based on an env variable:
<script>
'%REACT_APP_ENV%' === 'production' ? console.log('production') : console.log('not production')
</script>
- Set a value for that env variable at build time:
REACT_APP_ENV=production react-scripts build
- Inspect
build/index.html
Expected Behavior
You should see
<script>console.log('production')</script>
Actual Behavior
you see:
<script>console.log('not production')</script>
Issue Analytics
- State:
- Created 5 years ago
- Reactions:3
- Comments:6
Top Results From Across the Web
Unable to get env variables in public/index.html for react app
Updated my codes but now it has issues with Uncaught SyntaxError: Unexpected token '< Was trying to reference from this as well stackoverflow....
Read more >Using environment variables in a React application
In this article we'll see how to use environment variables in a React application. Specifically, we'll look at two kinds of environments variables:...
Read more >Variables reference - Visual Studio Code
Variables Reference. Visual Studio Code supports variable substitution in Debugging and Task configuration files as well as some select settings.
Read more >GitLab CI/CD variables
GitLab documentation home Docs. Search K. What's new? 15.8. 15.8 (not yet released) · 15.7 (recently released).
Read more >Command-line API | Node.js v19.3.0 Documentation
The program entry point is a specifier-like string. If the string is not an absolute path, it's resolved as a relative path from...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I can’t give a satisfying reason as to why this is happening, but I can give a fix.
I’m not sure why we would have to add
toString()
because if you check the types on both'%REACT_APP_ENV%'
and'production'
they’re both strings. And the values are both'production'
. But as soon as I added thetoString()
it worked as expected.console.log('%REACT_APP_LOAD_STUFF%' === 'true')
still returns false.