I recently ran into a memory issue so I had to resize my droplet. Since then I just get a blank page at my url and the Chrome dev console tells me process is undefined.
I ran npm run build on my create-react-app react app and it is now live on my digital ocean droplet, but I keep getting an error in the console
index.js:6 Uncaught ReferenceError: process is not defined
at Object.<anonymous> (index.js:6)
The line of code it refers to is:
const {env} = process;
which looks like it was automatically generated in the build.
I’ve been building the app fine for months and nothing like this has ever happened!
My package.json is as follows:
{
"name": "myapp",
"version": "0.1.0",
"private": true,
"dependencies": {
"@babel/core": "7.7.4",
"@date-io/date-fns": "^2.6.1",
"@date-io/moment": "^1.3.13",
"@firebase/storage": "^0.3.32",
"@fortawesome/fontawesome-svg-core": "^1.2.28",
"@fortawesome/free-solid-svg-icons": "^5.13.0",
"@fortawesome/react-fontawesome": "^0.1.9",
"@google-cloud/storage": "^5.1.1",
"@material-ui/core": "^4.9.11",
"@material-ui/icons": "^4.9.1",
"@material-ui/pickers": "^3.2.10",
"@svgr/webpack": "4.3.3",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.1.2",
"@typescript-eslint/eslint-plugin": "^2.29.0",
"@typescript-eslint/parser": "^2.29.0",
"algoliasearch": "^4.3.0",
"ammonite-jspdf": "git+https://github.com/DavTho1983/jsPDF.git",
"animate.css": "^3.7.2",
"animate.css-react": "^1.0.0",
"aws-sdk": "^2.663.0",
"axios": "^0.19.2",
"babel-jest": "^24.9.0",
"babel-loader": "8.0.6",
"babel-plugin-named-asset-import": "^0.3.6",
"babel-preset-react-app": "^9.1.2",
"blob-stream": "^0.1.3",
"camelcase": "^5.3.1",
"canvas2pdf": "^1.0.7",
"case-sensitive-paths-webpack-plugin": "2.2.0",
"chart.js": "^2.9.3",
"chartjs-plugin-dragdata": "^1.1.3",
"css-loader": "3.2.0",
"date-fns": "^2.12.0",
"dom-to-image-more": "^2.8.0",
"dotenv": "8.2.0",
"dotenv-expand": "5.1.0",
"downloadjs": "^1.4.7",
"emailjs-com": "^2.4.1",
"eslint": "^6.8.0",
"eslint-config-react-app": "^5.2.1",
"eslint-loader": "3.0.2",
"eslint-plugin-flowtype": "3.13.0",
"eslint-plugin-import": "2.18.2",
"eslint-plugin-jsx-a11y": "6.2.3",
"eslint-plugin-react": "7.16.0",
"eslint-plugin-react-hooks": "^1.6.1",
"firebase": "^7.14.2",
"firebase-admin": "^8.12.1",
"firebase-functions": "^3.7.0",
"fs-extra": "^8.1.0",
"generate-password": "^1.5.1",
"gsap": "file:gsap-bonus.tgz",
"html-to-image": "^0.1.1",
"html-webpack-plugin": "4.0.0-beta.5",
"html2canvas": "^1.0.0-rc.5",
"http2": "^3.3.7",
"identity-obj-proxy": "3.0.0",
"images-to-pdf": "^1.0.3",
"jest": "24.9.0",
"jest-environment-jsdom-fourteen": "0.1.0",
"jest-resolve": "24.9.0",
"jest-watch-typeahead": "0.4.2",
"jspdf": "^1.5.3",
"jszip": "^3.4.0",
"layer": "^0.1.0",
"material-ui": "^0.20.2",
"mini-css-extract-plugin": "0.8.0",
"moment": "^2.24.0",
"node-fetch": "^2.6.0",
"optimize-css-assets-webpack-plugin": "5.0.3",
"pdfcrowd": "^4.12.0",
"pnp-webpack-plugin": "1.5.0",
"postcss-flexbugs-fixes": "4.1.0",
"postcss-loader": "3.0.0",
"postcss-normalize": "8.0.1",
"postcss-preset-env": "6.7.0",
"postcss-safe-parser": "4.0.1",
"react": "^16.13.1",
"react-app-polyfill": "^1.0.6",
"react-chartjs-2": "^2.9.0",
"react-dev-utils": "10.0.0",
"react-device-detect": "^1.12.1",
"react-dom": "^16.13.1",
"react-recipes": "^1.0.0",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"react-scripts": "^3.4.0",
"react-spinners": "^0.8.3",
"react-swipeable": "^5.5.1",
"react-uuid": "^1.0.2",
"resolve": "1.12.2",
"resolve-url-loader": "3.1.1",
"sass-loader": "8.0.0",
"semver": "6.3.0",
"shortid": "^2.2.15",
"style-loader": "1.0.0",
"terser-webpack-plugin": "2.2.1",
"ts-pnp": "1.1.5",
"url-loader": "2.3.0",
"webpack": "4.41.2",
"webpack-dev-server": "^3.11.0",
"webpack-manifest-plugin": "2.2.0",
"workbox-webpack-plugin": "4.3.1"
},
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"jest": {
"roots": [
"<rootDir>/src"
],
"collectCoverageFrom": [
"src/**/*.{js,jsx,ts,tsx}",
"!src/**/*.d.ts"
],
"setupFiles": [
"react-app-polyfill/jsdom"
],
"setupFilesAfterEnv": [
"<rootDir>/src/setupTests.js"
],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
"<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
],
"testEnvironment": "jest-environment-jsdom-fourteen",
"transform": {
"^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
"^.+\\.module\\.(css|sass|scss)$"
],
"modulePaths": [],
"moduleNameMapper": {
"^react-native$": "react-native-web",
"^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
},
"moduleFileExtensions": [
"web.js",
"js",
"web.ts",
"ts",
"web.tsx",
"tsx",
"json",
"web.jsx",
"jsx",
"node"
],
"watchPlugins": [
"jest-watch-typeahead/filename",
"jest-watch-typeahead/testname"
]
},
"babel": {
"presets": [
"react-app"
]
},
"devDependencies": {
"@fortawesome/fontawesome-free": "^5.13.0",
"babel-eslint": "^10.0.3"
}
}
My OS is Ubuntu 18.04.3 LTS. I have tried setting the node env with export NODE_ENV=production and when I run node and type process.env.NODE_ENV it says ‘production’.
I am using pm2 with the command pm2 serve build to serve the app, and nginx.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Hi there,
I could suggest trying the following:
node_modules directory and the package-lock.json file:rm -rf node_modules
rm -f package-lock.json
rm -f yarn.lock
npm cache clean --force
npm install
And then start your app as usual.
Best,
Bobby
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
Full documentation for every DigitalOcean product.
The Wave has everything you need to know about building a business, from raising funding to marketing your product.
Stay up to date by signing up for DigitalOcean’s Infrastructure as a Newsletter.
New accounts only. By submitting your email you agree to our Privacy Policy
Scale up as you grow — whether you're running one virtual machine or ten thousand.
Sign up and get $200 in credit for your first 60 days with DigitalOcean.*
*This promotional offer applies to new accounts only.