I have been trying everything, but I can't succeed.
I need to use .env file during development, with react-scripts start
I have been following this: https://create-react-app.dev/docs/adding-custom-environment-variables/
and I keep getting process is not defined.
I tried countless solutions found here, but no luck.
I read that it injects the variables during build, so there is no way at all to use it during development?
Last thing I have tried is env-cmd
My script looks like this:
"start": "env-cmd -f .env.development react-scripts start",
still it says process is undefined.
Any help is appreciated
thanks
you have to create an .env file at the root of the project
don't forget to add REACT_APP at the beginning of the variable.
.env
REACT_APP_FOO=foo
App.js
export default function App() {
return (
<div className="App">
<h1>{process.env.REACT_APP_FOO}</h1>
</div>
);
}
you can see this sandbox
try this
in .env file :
REACT_APP_DEVELOP_URL=https://test.example.com
REACT_APP_PROD_URL=https://api.example.com
in package.json file
`"start-dev": "set REACT_APP_IP_MODE=development&& npm run dev",`
`"start-prod": "set REACT_APP_IP_MODE=production&& npm run dev"`
and usage in project :
let baseURL;
const env = process.env;
switch (env.REACT_APP_IP_MODE) {
case "development":
baseURL = env.REACT_APP_DEVELOP_URL;
break;
case "production":
baseURL = env.REACT_APP_PROD_URL;
break;
default:
baseURL = env.REACT_APP_DEVELOP_URL;
break;
}
I am writing an react-electron application and I noticed that when I used electron-builder to build it the binary was stuck when calling "spawn".
With "yarn start" the application can be executed without problems. Only with electron-builder it gets stuck.
Can you help ?
Thanks,
Update
It seems that the C++ binary included as part of the program can't be executed within electron. If I give the hardcoded full path to the binary it works but if I give the path from __dirname I get an error
const GetLocalPath = () => {
const path = __dirname + "/../cpp_program/"
return {
helloWorld: path+ "helloWorld",
helloWorldRepeat: path+ "helloWorldRepeat"
}
}
export function helloWorld(){
// let dir = "/Users/Rick/projects/lala/github/tutorial/electron-tutorial-app/cpp_program";
let comm = GetLocalPath().helloWorld;
The error message
internal/child_process.js:403 Uncaught (in promise) Error: spawn ENOTDIR
at ChildProcess.spawn (internal/child_process.js:403)
at Object.spawn (child_process.js:562)
at helloWorldRepeat (/Users/ricky/proje…ar/build/Lib.js:113)
at Object.<anonymous> (/Users/ricky/proje…sar/build/Lib.js:49)
at Generator.next (<anonymous>)
at /Users/ricky/proje…asar/build/Lib.js:9
at new Promise (<anonymous>)
at __awaiter (/Users/ricky/proje…asar/build/Lib.js:5)
at Object.handleInitialize (/Users/ricky/proje…sar/build/Lib.js:35)
at TestStateMachine.transition (/Users/ricky/proje…tStateMachine.js:56)
This is pretty odd because it works just fine with "yarn start", which is "tsc && electron"
package.json is shown below
"scripts": {
"start": "tsc && electron ."
},
"build": {
"appId": "com.example.myapp",
"productName": "MyApp",
"files": [
"build/**/*",
"public/**/*",
"src/images/**/*"
]
},
Update ver 2
Per Alexander's suggestion I have included
"asar": false
inside package.json
When I excute it I get a different error
Uncaught Error: spawn /Users/Rick/projects/lala/github/tutorial/electron-tutorial-app/dist/mac/MyApp.app/Contents/Resources/app/build/../cpp_program/helloWorldRepeat ENOENT
at Process.ChildProcess._handle.onexit (internal/child_process.js:269)
at onErrorNT (internal/child_process.js:465)
at processTicksAndRejections (internal/process/task_queues.js:80)
errnoException # internal/errors.js:510
ChildProcess._handle.onexit # internal/child_process.js:269
onErrorNT # internal/child_process.js:465
processTicksAndRejections # internal/process/task_queues.js:80
Now the error is that there is no "helloWorldRepeat" file inside /Users/Rick/projects/lala/github/tutorial/electron-tutorial-app/dist/mac/MyApp.app/Contents/Resources/app/build/../cpp_program/.
The binary is in fact located at
/Users/Rick/projects/lala/github/tutorial/electron-tutorial-app/build/../cpp_program/helloWorldRepeat
Do I have to manually create this folder and paste the binary files ?
By default, Electron Builder compiles your application and packs all resources into one large archive file (think of it as a ZIP file) which can be read just fine because Electron brings support for this format known as "ASAR".
When running the built program, the code will be read from the archive. This means that __dirname will point to a directory inside the archive. The operating system, however, cannot read from the archive. Since you did not actually include the piece of code calling child_process.spawn (), I can only speculate on why you get ENOTDIR, which hints that a given path is not a directory when it was expected to be one, but I assume this is because you point to a path inside the ASAR file.
When relying on external binaries, it is a good idea to keep them outside the ASAR archive and programmatically find the path to them (which is quite complex) or by preventing Electron Builder from compiling your app into an ASAR file. However, you would also have to ask Electron Builder to include the executable in the built version of your app. This can be done by modifying your package.json:
{
...
"build": {
"appId": "com.example.myapp",
"productName": "MyApp",
"files": [
"build/**/*",
"public/**/*",
"src/images/**/*"
],
"extraResources": [
"cpp_program/*"
]
"asar": false
},
}
(Replace "cpp_program/*" by whatever path pattern matches your desired directory, possibly even replacing /* with /**/* if there are subdirectories.)
This way, the directory cpp_program will be copied to your app's resources directory upon build. This path, according to Electron Builder's documentation, is Contents/Resources/ on MacOS. Thus, you will have to modify your path (__dirname + "../" will not work because it will point to Contents/Resources/app, but __dirname + "../../" should; if not, experimenting will lead to the correct path)*. Remember to run Electron Builder every time your C++ executable changes, as the files in the .app folder are not linked to their counterparts outside the built app.
* You can switch between development paths (__dirname + "../") and production paths (__dirname + "../../" or whatever) by checking if __dirname.includes (".app/")
In local enviroments I have no problem, but running a production enviroment on jenkins with this script it does:
yarn install --production
yarn build
The build takes like 5 minutes, in the end, jenkins exit with this console output error:
+ yarn install --production
yarn install v1.9.4
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents#1.2.9: The platform "linux" is incompatible with this module.
info "fsevents#1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > bootstrap#4.3.1" has unmet peer dependency "jquery#1.9.1 - 3".
warning " > bootstrap#4.3.1" has unmet peer dependency "popper.js#^1.14.7".
warning " > google-maps-react#1.1.11" has incorrect peer dependency "react#~0.14.8 || ^15.0.0".
warning " > google-maps-react#1.1.11" has incorrect peer dependency "react-dom#~0.14.8 || ^15.0.0".
warning " > react-addons-css-transition-group#15.6.2" has incorrect peer dependency "react#^15.4.2".
warning " > react-bootstrap-table-next#3.1.5" has unmet peer dependency "prop-types#^15.0.0".
warning " > react-bootstrap-table2-paginator#2.0.7" has unmet peer dependency "prop-types#^15.0.0".
warning " > react-bootstrap-table2-toolkit#1.4.2" has unmet peer dependency "prop-types#^15.0.0".
warning " > react-intl#2.9.0" has unmet peer dependency "prop-types#^15.5.4".
warning " > react-simple-collapse#0.1.2" has incorrect peer dependency "react#^0.14.3".
warning " > react-simple-collapse#0.1.2" has incorrect peer dependency "react-dom#^0.14.3".
warning " > react-widgets-globalize#5.0.20" has incorrect peer dependency "react-widgets#^4.2.2".
warning " > react-widgets-moment#4.0.27" has incorrect peer dependency "react-widgets#^4.2.2".
warning " > eslint-plugin-react-hooks#1.6.1" has unmet peer dependency "eslint#^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0".
warning "react-styleguidist > uglifyjs-webpack-plugin#1.2.7" has unmet peer dependency "webpack#^2.0.0 || ^3.0.0 || ^4.0.0".
warning "react-styleguidist > webpack-dev-server#2.11.5" has unmet peer dependency "webpack#^2.2.0 || ^3.0.0".
[4/4] Building fresh packages...
Done in 28.04s.
+ yarn build
yarn run v1.9.4
$ react-scripts build
Creating an optimized production build...
<--- Last few GCs --->
[31498:0x2ab86d0] 229792 ms: Mark-sweep 1277.3 (1459.7) -> 1277.2 (1461.7) MB, 1801.1 / 0.0 ms allocation failure GC in old space requested
[31498:0x2ab86d0] 231676 ms: Mark-sweep 1277.2 (1461.7) -> 1277.0 (1420.7) MB, 1884.4 / 0.0 ms last resort GC in old space requested
[31498:0x2ab86d0] 233210 ms: Mark-sweep 1277.0 (1420.7) -> 1277.0 (1419.2) MB, 1533.2 / 0.0 ms last resort GC in old space requested
<--- JS stacktrace --->
==== JS stack trace =========================================
Security context: 0xb1707c25879 <JSObject>
0: builtin exit frame: stringify(this=0xb1707c090a9 <Object map = 0x123a95202ba1>,0x11b5562822d1 <undefined>,0x11b5562822d1 <undefined>,0x26b024683529 <Object map = 0x2449e8a328d1>)
1: arguments adaptor frame: 1->3
2: toString [0x11b5562822d1 <undefined>:9522] [bytecode=0xf76e19f6a69 offset=28](this=0xb3c89b82b29 <Object map = 0x306621cb3d19>)
7: /* anonymous */(aka /* anonymous ...
FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
1: node::Abort() [node]
2: 0x8c21ec [node]
3: v8::Utils::ReportOOMFailure(char const*, bool) [node]
4: v8::internal::V8::FatalProcessOutOfMemory(char const*, bool) [node]
5: v8::internal::Factory::NewRawOneByteString(int, v8::internal::PretenureFlag) [node]
6: v8::internal::String::SlowFlatten(v8::internal::Handle<v8::internal::ConsString>, v8::internal::PretenureFlag) [node]
7: v8::internal::JsonStringifier::SerializeString(v8::internal::Handle<v8::internal::String>) [node]
8: v8::internal::JsonStringifier::Result v8::internal::JsonStringifier::Serialize_<true>(v8::internal::Handle<v8::internal::Object>, bool, v8::internal::Handle<v8::internal::Object>) [node]
9: v8::internal::JsonStringifier::Result v8::internal::JsonStringifier::Serialize_<false>(v8::internal::Handle<v8::internal::Object>, bool, v8::internal::Handle<v8::internal::Object>) [node]
10: v8::internal::JsonStringifier::Stringify(v8::internal::Handle<v8::internal::Object>, v8::internal::Handle<v8::internal::Object>, v8::internal::Handle<v8::internal::Object>) [node]
11: v8::internal::Builtin_JsonStringify(int, v8::internal::Object**, v8::internal::Isolate*) [node]
12: 0x14795198697d
error Command failed with exit code 1.
The only change that started to generate this error was the adition of 2 node dependencies:
"react-accessible-accordion": "^3.0.0",
"react-simple-collapse": "^0.1.2",
The full package.json is this:
{
"name": "front-master",
"version": "0.1.0",
"private": true,
"dependencies": {
"#blueprintjs/core": "^2.3.1",
"#blueprintjs/select": "^2.0.1",
"#esri/arcgis-to-geojson-utils": "^1.3.0",
"#kenshooui/react-multi-select": "^1.1.5",
"antd": "^3.12.1",
"async": "^2.6.1",
"axios": "^0.18.0",
"bootstrap": "^4.1.2",
"classnames": "^2.2.6",
"esri-loader": "^2.4.0",
"fetch-jsonp": "^1.1.3",
"globalize": "^1.4.2",
"google-maps-react": "^1.1.11",
"highcharts": "^6.1.1",
"moment": "^2.22.2",
"npm": "^6.2.0",
"react": "^16.4.1",
"react-accessible-accordion": "^3.0.0",
"react-addons-css-transition-group": "^15.6.2",
"react-autosuggest": "^9.4.3",
"react-beautiful-dnd": "^10.0.4",
"react-bootstrap-table-next": "^3.1.2",
"react-bootstrap-table2-paginator": "^2.0.6",
"react-bootstrap-table2-toolkit": "^1.4.2",
"react-color": "^2.14.1",
"react-csv": "^1.0.15-RC2",
"react-custom-scrollbars": "^4.2.1",
"react-data-export": "^0.5.0",
"react-datepicker": "^2.8.0",
"react-dom": "^16.4.1",
"react-export-excel": "^0.5.3",
"react-intl": "^2.4.0",
"react-lineto": "^3.1.2",
"react-redux": "^5.0.7",
"react-router-dom": "^4.3.1",
"react-scripts": "^1.1.4",
"react-select": "^2.0.0",
"react-simple-collapse": "^0.1.2",
"react-sortable-hoc": "^0.8.3",
"react-transition-group": "^2.4.0",
"react-widgets": "^5.0.0-7",
"react-widgets-globalize": "^5.0.20",
"react-widgets-moment": "^4.0.27",
"reactstrap": "^5.0.0",
"redux": "^3.7.2",
"redux-thunk": "^2.3.0",
"terraformer-wkt-parser": "^1.2.0",
"video-react": "^0.14.1",
"x2js": "^3.2.1",
"xlsx": "^0.14.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"devDependencies": {
"eslint-plugin-react-hooks": "^1.3.0",
"react-docgen": "^2.21.0",
"react-styleguidist": "^7.1.0"
}
}
EDIT: Also, I got this warning from github when I pushed my branch
So I checked yarn.lock and I can see that the version there is:
mem#^1.1.0:
version "1.1.0"
But how could I upgrade a dependency that is not defined on package.json ?
Finally, I use this:
https://stackoverflow.com/a/55378108/3541320
In my package.json the script for build:
"build": "react-scripts --max_old_space_size=4096 build"
If you use a server with less memory (512MB) you need set try two things:
1 - Set less memory on react-scripts
"build": "react-scripts --max_old_space_size=256 build"
2 - You can disable generation of source maps as described in https://create-react-app.dev/docs/advanced-configuration put in .env file:
GENERATE_SOURCEMAP=false
Sometimes increasing the memory allocation for node.js is not the solution you need. The most common culprit for this is caused by recursion which can arise from cyclic dependencies.
Madge is a tool that can help you detect when you have a cyclic dependency in your Nodejs/React Application
Add to your script
npm i -g madge
"madge": "madge --image ./madge-graph.svg --extensions js,jsx,ts,tsx --circular .",
Maybe the 2 dependencies you added use lot of memory, it would explain the error you get from jenkins.
Did you try to increase the memory allocated to jenkins as explained here?
Hope it will help you!
It seems that my case is ridiculous but I had to replace the 32-bit node with a 64-bit node.
Doing npm cache clean --force resolve the problem for me
In my case I do this and it works
Linux/macOS
export NODE_OPTIONS=--max-old-space-size=8192
please refer click on this URL
I faced the same issue today. My code works fine when i run in local machine. But when i deploy it to netlify it shows the error you have mentioned above.
I have tried setting "max_old_space_size" variable and some other answers on other posts.
But none of them worked for me.
In my case, my node version in local machine differs from netlify site version.
So I edited environment variable with my local machine node version and the build is succesfully completed.
I could fix it for one of my project like this :
On a newly created git branch run :
npm run eject
This will create many files and update your package json (the start/test/build commands if you haven't changed them).
Go to config/webpack.config.js and update the TerserPlugin options properties "compress" and "mangle" :
new TerserPlugin({
terserOptions: {
...
compress: false,
mangle: true,
...
This has decreased drastically build time and memory usage...
The tradeoff is a slightly bigger build file (went from 2.3Mo to 2.6Mo for my project). So you should consider if it fits for your project in case of performance constraints.
Why this change ? I tried this because of the following info in the Terser documentation :
It's not well known, but whitespace removal and symbol mangling accounts for 95% of the size reduction in minified code for most JavaScript - not elaborate code transforms.
If you want to "revert" the eject command : https://stackoverflow.com/a/54248621/4739462
I'm attempting to add sourcemaps for an AngularJS application derived from the ngBoilerplate template, which uses grunt to build and grunt-contrib-uglify to minify the JavaScript sources into one app.js file.
The problem is that grunt can't actually write the sourcemap to disk, with this cryptic error (used grunt --verbose, edited only slightly):
Running "uglify" task
Running "uglify:compile" (uglify) task
Verifying property uglify.compile exists in config...OK
Files: release/assets/MyApp-1.0.0.debug.js -> release/assets/MyApp-1.0.0.js
Options: banner="", footer="", compress={"warnings":false}, mangle={}, beautify=false, report="min", expression=false, sourceMap
Minifying with UglifyJS...Reading release/assets/MyApp-1.0.0.debug.js...OK
OK
Writing release/assets/MyApp-1.0.0.js...OK
Writing release/assets/MyApp-1.0.0.js.map...ERROR
Warning: Unable to write "release/assets/MyApp-1.0.0.map" file (Error code: undefined). Use --force to continue.
Aborted due to warnings.
The critical section being:
Warning: Unable to write "release/assets/MyApp-1.0.0.map" file (Error code: undefined). Use --force to continue.
Now you may be tempted to say this is a duplicate of the question Grunt Uglify source map “unable to write” except that case was a simple gotcha where the asker was using a new configuration style with an older version of the package, resulting in the error Unable to write "true" file. Not so in my case. It's pretty clear that the file name it is attempting to write is correct (the JS file plus the ".map" extension) but that the system can't do it and gives a colossally unhelpful "Error code: undefined" back.
Versions from the packages.json file - and I cleaned out the node_modules folder and re-ran npm install to make sure this is what was in use:
"devDependencies": {
"grunt": "0.4.5",
"grunt-recess": "0.6.1",
"grunt-contrib-jshint": "0.10.0",
"grunt-contrib-concat": "0.4.0",
"grunt-contrib-watch": "0.6.1",
"grunt-contrib-uglify": "0.5.0",
"grunt-karma": "0.6.2",
"grunt-ngmin-with-comments": "0.0.3",
"grunt-html2js": "0.2.3",
"grunt-groundskeeper": "0.1.9",
"lodash": "2.4.1",
"grunt-contrib-clean": "0.5.0",
"grunt-contrib-copy": "0.5.0",
"grunt-contrib-connect": "^0.7.1"
}
Inside node_modules, the uglify-js version is 2.4.14.
My Gruntfile config isn't exactly boilerplate ngBoilerplate - I've modified it some so that I can get a .debug.js that is unminified and a .js that is minified. Here it is:
uglify: {
compile: {
options: {
sourceMap: true
},
files: {
'<%= minJs %>': '<%= debugJs %>'
}
}
}
I have also tried:
specifying the sourceMapName property
As a string
As a function that takes the jsName and appends '.map' to it
As a function that does not try to write in the release/assets subdirectory
Not using the grunt templates and specifying the filenames for minJs and debugJs explicitly.
Nothing has worked. Any ideas?
I'm getting the same error with a different setup. Everything goes fine if I disable sourcemaps. I spent a couple hours debugging the error and gave up.
Just switch to an older version of grunt-contrib-uglify such as ~0.4 until they sort out what is wrong.