Updating NODE and NPM in NETLIFY

Hi guys

Again - I’m newbie at Netlify, Web development, etc. Sorry about that.
I have a project that locally is running fine. A ReactJS project.

When I deploy here in Netlify, the page is blank. There are some errors though. When I asked some people, one of them said that I should update NPM and NODE.

I researched here and found out that I had to go to my website settings, under Build&Deploy, Environment and create a variable there saying which NODE and NPM version I want to run the build.

I created a NODE_VERSION variable but I don’t know in which format that I should use to state this here. And about the NPM variable, what’s its name?

The error that I’m getting when I try to acess my page is

Uncaught TypeError: Super expression must either be null or a function
at particles.js:668
at particles.js:667
at Object.e.exports (particles.js:653)
at n (particles.js:14)
at Object.e.exports (particles.js:577)
at n (particles.js:14)
at e.exports (particles.js:50)
at Object. (particles.js:4)
at f ((index):1)
at Module.163 (CreativeLanding.jsx:63)

Please, I’m really sorry If I’m too newbie at this.
The website is kajix.com.br

Hey @KajiyamaVK,
That error is an error in your code, which we won’t be able to troubleshoot :frowning: But it’s very common for people to successfully build with create-react-app, so I would go back to what you originally had and “reset” your settings:

  1. Remove the NODE environment variable here: https://app.netlify.com/sites/focused-clarke-af6ea4/settings/deploys#environment-variables
  2. Set build command here to CI= npm run build: https://app.netlify.com/sites/focused-clarke-af6ea4/settings/deploys#build-settings
  3. Then, go back to this deploy and “Retry deploy” > “Clear cache and deploy site”
    https://app.netlify.com/sites/focused-clarke-af6ea4/deploys/5eea4f914c55d27d28ab7aae

Let us know how that goes.

1 Like

Hi, Jen.
I’m really greatful that you replied.

Didn’t work. But I tried At Heroku and everything went ok. From the the same github repository.

But I’m really looking forward to make it work here though.

hi there, i am unable to load kajix.com.br did you change something with your DNS settings?

Actualy yes. Sorry. I had to disable it since it wasn’t working here.

The Netlify url is https://focused-clarke-af6ea4.netlify.app/

Would you mind sharing your package.json with us? I’m wondering if the problem is related to this:

12:07:13 PM: The project was built assuming it is hosted at http://trydo.rainbowit.net.
12:07:13 PM: You can control this with the homepage field in your package.json.

Of course!
And I really do have this information here in my json file. If you’d like me to change its value, just let me know. And any files that you want me to show you, it’ll be my pleasure.

{
“name”: “Kajix”,
“version”: “0.1.0”,
“private”: true,
“homepage”: “http://trydo.rainbowit.net”,
“basename”: “/”,
“dependencies”: {
@babel/core”: “7.4.3”,
@svgr/webpack”: “4.1.0”,
@typescript-eslint/eslint-plugin”: “1.6.0”,
@typescript-eslint/parser”: “1.6.0”,
“babel-eslint”: “10.0.1”,
“babel-jest”: “^24.9.0”,
“babel-loader”: “8.0.5”,
“babel-plugin-named-asset-import”: “^0.3.5”,
“babel-preset-react-app”: “^9.1.0”,
“bootstrap”: “^4.4.1”,
“camelcase”: “^5.2.0”,
“case-sensitive-paths-webpack-plugin”: “2.2.0”,
“css-loader”: “2.1.1”,
“dotenv”: “6.2.0”,
“dotenv-expand”: “4.2.0”,
“eslint”: “^5.16.0”,
“eslint-config-react-app”: “^4.0.1”,
“eslint-loader”: “2.1.2”,
“eslint-plugin-flowtype”: “2.50.1”,
“eslint-plugin-import”: “2.16.0”,
“eslint-plugin-jsx-a11y”: “6.2.1”,
“eslint-plugin-react”: “7.12.4”,
“eslint-plugin-react-hooks”: “^1.7.0”,
“file-loader”: “3.0.1”,
“fs-extra”: “7.0.1”,
“google-map-react”: “^1.1.5”,
“html-webpack-plugin”: “4.0.0-beta.5”,
“identity-obj-proxy”: “3.0.0”,
“is-wsl”: “^1.1.0”,
“jest”: “24.7.1”,
“jest-environment-jsdom-fourteen”: “0.1.0”,
“jest-resolve”: “24.7.1”,
“jest-watch-typeahead”: “0.3.0”,
“mini-css-extract-plugin”: “0.5.0”,
“node-sass”: “^4.13.0”,
“optimize-css-assets-webpack-plugin”: “5.0.1”,
“pnp-webpack-plugin”: “1.2.1”,
“postcss-flexbugs-fixes”: “4.1.0”,
“postcss-loader”: “3.0.0”,
“postcss-normalize”: “7.0.1”,
“postcss-preset-env”: “6.6.0”,
“postcss-safe-parser”: “4.0.1”,
“react”: “^16.12.0”,
“react-accessible-accordion”: “^3.0.1”,
“react-animate-on-scroll”: “^2.1.5”,
“react-app-polyfill”: “^1.0.5”,
“react-bootstrap”: “^1.0.0-beta.16”,
“react-countup”: “^4.3.2”,
“react-dev-utils”: “^9.1.0”,
“react-dom”: “^16.12.0”,
“react-helmet”: “^5.2.1”,
“react-icons”: “^3.8.0”,
“react-image-lightbox”: “^5.1.1”,
“react-modal-video”: “^1.2.3”,
“react-parallax”: “^3.0.3”,
“react-particles-js”: “^2.7.0”,
“react-reveal”: “^1.2.2”,
“react-router-dom”: “^5.1.2”,
“react-scroll-up”: “^1.3.3”,
“react-scrollspy”: “^3.4.2”,
“react-slick”: “^0.24.0”,
“react-tabs”: “^3.1.0”,
“react-text-loop”: “^2.3.0”,
“react-tilt”: “^0.1.4”,
“react-video-tag”: “0.0.10”,
“react-visibility-sensor”: “^5.1.1”,
“resolve”: “1.10.0”,
“sass-loader”: “^7.3.1”,
“semver”: “6.0.0”,
“slick-carousel”: “^1.8.1”,
“style-loader”: “0.23.1”,
“terser-webpack-plugin”: “1.2.3”,
“ts-pnp”: “1.1.2”,
“url-loader”: “1.1.2”,
“webpack”: “4.29.6”,
“webpack-dev-server”: “3.2.1”,
“webpack-manifest-plugin”: “2.0.4”,
“workbox-webpack-plugin”: “4.2.0”
},
“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”: {
“collectCoverageFrom”: [
“src//*.{js,jsx,ts,tsx}",
"!src/
/.d.ts"
],
“setupFiles”: [
“react-app-polyfill/jsdom”
],
“setupFilesAfterEnv”: [],
“testMatch”: [
"/src//tests//
.{js,jsx,ts,tsx}”,
“/src/**/.{spec,test}.{js,jsx,ts,tsx}"
],
“testEnvironment”: “jest-environment-jsdom-fourteen”,
“transform”: {
“^.+\.(js|jsx|ts|tsx)": "<rootDir>/node_modules/babel-jest", "^.+\\.css”: “/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”
]
}
}

Just as an update:

I changed the Homepage value in my package.json file.

“homepage”: “.”
or
“homepage”: “https://focused-clarke-af6ea4.netlify.app/
or
“homepage”: “https://focused-clarke-af6ea4.netlify.app

Sadly no changes.

What about /? :slight_smile:

If that doesn’t work, I think we’d have to ask you to share the repo to give us more visibility, but we also understand if you don’t want to do that since it’s currently private. Let us know.

Hi Jen,

I just tried the /, but didn’t work. It is public now. Thank you so much.

Have you seen this checklist?

1 Like