Unable to start a nodejs app on ubuntu 20.0.4 - javascript

I just moved to ubuntu recently and I tried running a node app with the usual way git clone > npm i but I am having this error back when I try to run it.
It is a create-react-app app
Also it was running smoothly in wsl2
error:
Failed to compile.
./src/pages/Main/main.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneOf-5-3!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-5-4!./src/pages/Main/main.scss)
Error: /snap/core/current/lib/x86_64-linux-gnu/libm.so.6: version `GLIBC_2.29' not found (required by /home/bihire/development/react/ikaze_web_app/node_modules/node-sass/vendor/linux-x64-84/binding.node)
package.json
{
"name": "ikaze_web",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.9.14",
"#material-ui/icons": "^4.9.1",
"#material-ui/lab": "^4.0.0-alpha.54",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"draft-js": "^0.11.6",
"history": "^4.10.1",
"leaflet": "^1.6.0",
"material-ui-chip-input": "^2.0.0-beta.2",
"modernizr": "^3.11.2",
"node-sass": "^*",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-measure": "^2.3.0",
"react-parallax": "^3.0.3",
"react-redux": "^7.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.1",
"react-sizeme": "^2.6.12",
"react-text-mask": "^5.4.3",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"redux-state-sync": "^3.1.1",
"redux-thunk": "^2.3.0",
"text-mask-addons": "^3.8.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"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"
]
},
"devDependencies": {
"#iconify/icons-mdi": "^1.0.105",
"#iconify/react": "^1.1.3"
}
}
from my eyes it seems to be problem with node-sass but I am not sure
Is there some thing I should do to fix that?

This problem can occur with native (i.e. compiled, non-Javascript) npm modules when you install Node using the Ubuntu software manager.
For example, Ubuntu 20.04 comes with a system version of glibc 2.31.
However when you install the current latest version of Node via the Ubuntu software manager, it comes as a Snap package which also installs dependency package core containing glibc 2.23, and it is this one that your system version of Node will use (hence the path beginning /snap/core/current/lib/ in the error message, instead of just /lib/). Unfortunately, when you install native modules and the bindings are either downloaded or compiled locally for your system, the versions of the dependencies that the Snap package version of Node will be using are not taken into account, hence the error.
You should find that if you download the same version of Node from nodejs.org and run that binary instead of the system version from the Snap package then you won't get the error.
The solution is therefore not to install Node from the Ubuntu software manager. Use nvm or manual install instead.

Related

Creating an optimized build freezes and never completes

I am trying to build my react app. But when I run "npm run build", The terminal freezes on "Creating and optimized production build..." and never finish.
This is my JSON file. I tried on 16 GB ram also.
I have deleted package lock file and also rebuild the dependencies. But it remains same.
There is no specific solution anywhere, if anyone has solution please let me know.
{
"name": "demoapp",
"version": "0.1.0",
"private": true,
"dependencies": {
"#emotion/react": "^11.4.1",
"#emotion/styled": "^11.3.0",
"#material-ui/core": "^4.12.2",
"#material-ui/data-grid": "^4.0.0-alpha.33",
"#material-ui/lab": "^4.0.0-alpha.60",
"#mui/material": "^5.0.3",
"#progress/kendo-drawing": "^1.16.0",
"#progress/kendo-licensing": "^1.2.1",
"#progress/kendo-react-pdf": "^4.12.0",
"#progress/kendo-theme-material": "^4.43.0",
"#progress/kendo-ui": "^2021.3.1109",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"axios": "^0.21.1",
"bootstrap": "^5.0.2",
"chart.js": "^3.5.0",
"dom-to-pdf": "^0.2.2",
"draft-js": "^0.11.7",
"draftjs-to-html": "^0.9.1",
"html-to-draftjs": "^1.5.0",
"pdf-viewer-reactjs": "^2.2.3",
"react": "^17.0.2",
"react-app-polyfill": "^2.0.0",
"react-chartjs-2": "^3.0.4",
"react-csv": "^2.0.3",
"react-dom": "^17.0.2",
"react-draft-wysiwyg": "^1.14.7",
"react-hook-form": "^7.10.1",
"react-icons": "^4.2.0",
"react-loader": "^2.4.7",
"react-loader-spinner": "^4.0.0",
"react-modal-video": "^1.2.8",
"react-redux": "^7.2.4",
"react-responsive-carousel": "^3.2.21",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.3",
"react-table": "^7.7.0",
"reactstrap": "^8.9.0",
"redux": "^4.1.0",
"redux-thunk": "^2.3.0",
"sweetalert2": "^11.0.18",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"ie 11",
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Check to see if you have a local server running in another terminal (eg. localhost:3000 ).
If you do, end that server instance by terminating the batch job (with Ctrl+C) and try running npm run build again.
I recently had this issue. Check your package.json for react-scripts, if the version is <5.0.0 upgrade it to at least "react-scripts": "5.0.0".
Do a yarn install or npm install again, then yarn build or npm run build as the case may be.
Let me know if this works for you! Cheers!
If the process is stuck, it could be due to a lack in computing resources.
I would recommend investigating the currently running processes.
Try running sudo htop on a different terminal window and then run sudo npm run build.
You might find another process is taking too much memory, causing the build process to hang.
You may need to kill or restart such processes to complete the build.
It would be a good idea to check why those processes take so much memory, but that's besides the topic.

Using any-text with Node: error: require function can't be statically extracted

I'm trying to implement text extraction for various filetypes in a Node/React project. I stumbled across the any-text library that's built in to Node.
To simplify the test process I got it to run from the command line with js. Now that I have this set of functions working I want to import the functions into another file. When I try to run the project with npm start I get:
Compiled with warnings.
./node_modules/pdf-parse/lib/pdf.js/v1.9.426/build/pdf.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
./node_modules/pdf-parse/lib/pdf.js/v1.10.100/build/pdf.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
./node_modules/pdf-parse/lib/pdf.js/v1.10.100/build/pdf.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
./node_modules/pdf-parse/lib/pdf.js/v1.10.100/build/pdf.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
./node_modules/pdf-parse/lib/pdf.js/v1.10.88/build/pdf.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
...(additional similar warnings)
I'm not sure how to address this, tweaking the version of things or throwing an ignore warnings in there or some other thing.
Here's the package.json in case that it has some useful information:
{
"name": "topic_analysis",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"antd": "^4.16.10",
"any-text": "^1.2.0",
"axios": "^0.21.1",
"fs": "0.0.1-security",
"lda": "^0.2.0",
"mammoth": "^1.4.17",
"node-fetch": "^2.6.1",
"pizzip": "^3.1.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-file-picker": "0.0.6",
"react-native-fs": "^2.18.0",
"react-pdf": "5.0.0-beta.4",
"react-scripts": "4.0.3",
"read-text-file": "^1.1.0",
"use-file-picker": "^1.3.0",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
at the look of your package.json there is no module named
pdf-parse
maybe try to install it by
npm install pdf-parse

How to fix issue where I'm getting thousands of errors from prettier in my React App?

I am encountering this issue where prettier is giving me in excess of 1000 errors. I'm not sure what is causing it however here is how I got to this issue. I followed TraversyMedias guide on youtube to install eslint and prettier with the airbnb template. It was working great. I programmed for close to a day with it. Then after I started switching a component I had from React hooks state to Redux state I got an error saying that a file couldn't be found. After I fixed the issue it still was coming up with this error. I restarted my dev server and got a different error entirely it was an issue with the version of eslint i had. I can't remember the specific error but it was something along these lines "The react-scripts package provided by Create React App requires a dependency: "eslint": "^7.11.0". " After I got that error I followed these steps
To fix the dependency tree, try following the steps below in the exact order:
Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
Delete node_modules in your project folder.
Remove "eslint" from dependencies and/or devDependencies in the package.json file in your project folder.
Run npm install or yarn, depending on the package manager you use.
after I did that I encountered the error I am asking the question about.
some useful information My project structure is a top level project folder. it contains both my server and client folder and all three have their own package.json.
I look on this forum for someone with an error similar to mine and couldn't find any.
I googled many different worded questions about this issue and can't find anything on it.
I uninstalled prettier to see if it would go away. it didn't
here is what my package.json looks like in this order root folder client folder and server folder
{
"name": "sac-website",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "concurrently \"cd server && npm run dev\" \"cd client && npm start\" "
},
"author": "",
"license": "ISC",
"devDependencies": {
"concurrently": "^6.2.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "^1.7.0"
},
"dependencies": {
"eslint": "^7.28.0",
"eslint-config-node": "^4.1.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-prettier": "^3.4.0"
}
}
{
"name": "sac-web",
"version": "0.1.0",
"private": true,
"dependencies": {
"#date-io/date-fns": "^1.3.13",
"#material-ui/core": "^4.11.4",
"#material-ui/icons": "^4.11.2",
"#material-ui/lab": "^4.0.0-alpha.58",
"#material-ui/pickers": "^3.3.10",
"#material-ui/styles": "^4.11.4",
"#reduxjs/toolkit": "^1.6.0",
"#testing-library/jest-dom": "^5.12.0",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"axios": "^0.21.1",
"date-fns": "^2.22.1",
"eslint": "^7.28.0",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.4",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"react-toastify": "^7.0.4",
"redux": "^4.1.0",
"redux-thunk": "^2.3.0",
"web-vitals": "^0.2.4",
"workbox-background-sync": "^5.1.4",
"workbox-broadcast-update": "^5.1.4",
"workbox-cacheable-response": "^5.1.4",
"workbox-core": "^5.1.4",
"workbox-expiration": "^5.1.4",
"workbox-google-analytics": "^5.1.4",
"workbox-navigation-preload": "^5.1.4",
"workbox-precaching": "^5.1.4",
"workbox-range-requests": "^5.1.4",
"workbox-routing": "^5.1.4",
"workbox-strategies": "^5.1.4",
"workbox-streams": "^5.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"eslint-plugin-react": "^7.24.0"
}
}
{
"name": "server",
"version": "1.0.0",
"description": "The server for the sac website",
"main": "index.js",
"scripts": {
"start": "node app.js",
"dev": "nodemon app.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"bcrypt": "^5.0.1",
"cors": "^2.8.5",
"dotenv": "^10.0.0",
"express": "^4.17.1",
"jsonwebtoken": "^8.5.1",
"mongoose": "^5.12.11"
},
"devDependencies": {
"nodemon": "^2.0.7"
}
}
Any help you guys could give me would be fantastic. And please pardon me if I asked this question wrong. It is my first time asking any question on a programming forum.
The error I was getting had something to do with how eslint was set up or how prettier was set up. I deleted everything that was related to that and now the project is working.
In a React 17 project I wanted to run, there were 2 .ignore files: .prettierignore and .eslintignore.
I added the src folder to these files and with that the errors disappeared.
This way you don't have to remove everything, and you can leave it to address it at a later time if you want.

Npm start on offline win10

I have React project, created on MacOs and i want to run it on win10, but win10 computer in corp's LAN, so i cannot use "npm install" to download all dependencies. Hence i got all of them and builded project via Git, so for now on win10 i have all files are needed to "npm start".
But here are several errors, when i tried to run dev server or builded project:
npm start (== "react-scripts start")
'react-scripts' is not recognized as an internal or external command
npm start (== "node node_modules/.bin/react-scripts start")
Unexpected token '.'
Non of additional slashes before .bin to screening not helped.
npx serve -s build
network to registry.npmjs.org/serve failed.
Unclear why it needs internet at all, i just want to run builded project.
All of advices are to run "npm install" before "npm start", but i cannot connect to central artifactory from our LAN and i already have all of dependencies.
Hence, there are way to just start dev server or pack all project's files in some analogue of .jar totally without internet?
package.json
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"#date-io/date-fns": "^1.1.0",
"#material-ui/core": "^4.11.0",
"arui-feather": "^18.4.0",
"axios": "^0.21.0",
"core-js": "^3.7.0",
"date-fns": "^2.0.0-beta.5",
"material-table": "^1.69.2",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"react-router": "latest",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.0",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

After deploying on GH pages the app doesn't work

I have such problem, after deploying my React app on GitHub it works only in my PC. When I open link where is my App have to be deployed using my PC or LapTop link - it works, but when I tried to open it with phone or send this link to my friend - there is empty page (with my background). So how to solve this problem?
There is my repository link
Code of my package.json
{
"name": "worktests",
"version": "0.1.0",
"private": true,
"homepage": "https://dmitriykulikovskiy.github.io/MyWeatherForecast",
"dependencies": {
"#fortawesome/fontawesome-free": "^5.13.0",
"#fortawesome/free-solid-svg-icons": "^5.13.0",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"axios": "^0.19.2",
"bootstrap": "^4.5.0",
"font-awesome": "^4.7.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-redux": "^7.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.1",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"shortid": "^2.2.15"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
"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"
]
},
"devDependencies": {
"gh-pages": "^2.2.0",
"node-sass": "^4.14.1",
"sass-loader": "^8.0.2"
}
}
The problem is this line:
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ in store.jsx
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ is only available if you have Redux Web Tools installed on your browser. Your app didn't run for me locally either. However, once I installed the extension, it ran correctly both locally as well as on your deployed site.
This thread might help find the right way to use composeEnhancers in production. Ideally, in production, you shouldn't be depending on properties populated by the dev tool plugin for debugging but you should be using compose directly from redux.

Categories