I am just trying to install this React script on a cPanel server, and it has gone over my head to say the least. Now testing on local Linux MX.
The script:
https://github.com/webdesignleader/referBeam
I followed the readme_md verbatim, to no avail. Seems like a simple issue that I can override and update, but my less than 100 hours in React leave my logician veins a little stumped.
Error Log:
[referBeam (10)] [mrt@srv referBeam]$ npm install
npm WARN schemebeam@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin"," arch":"any"} (current: {"os":"linux","arch":"x64"})
audited 763 packages in 4.247s
12 packages are looking for funding
run `npm fund` for details
found 93 vulnerabilities (9 low, 26 moderate, 49 high, 9 critical)
run `npm audit fix` to fix them, or `npm audit` for details
[referBeam (10)] [mrt@srv referBeam]$ webpack
-jailshell: webpack: command not found
[referBeam (10)] [mrt@srv referBeam]$ run webpack
-jailshell: run: command not found
[referBeam (10)] [mrt@srv referBeam]$ node webpack.config.js
[referBeam (10)] [mrt@srv referBeam]$ node app.js
express-session deprecated undefined resave option; provide resave option authentication/auth.js:10:13
express-session deprecated undefined saveUninitialized option; provide saveUninitialized option authentication/ auth.js:10:13
events.js:174
throw er; // Unhandled 'error' event
^
Error: listen EACCES: permission denied 0.0.0.0:80
at Server.setupListenHandle [as _listen2] (net.js:1263:19)
at listenInCluster (net.js:1328:12)
at Server.listen (net.js:1415:7)
at Function.listen (/home/mrt/nodevenv/referBeam/10/lib/node_modules/express/lib/application.js:635:24)
at Object.<anonymous> (/home/mrt/referBeam/app.js:36:5)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
Emitted 'error' event at:
at emitErrorNT (net.js:1307:8)
at process._tickCallback (internal/process/next_tick.js:63:19)
at Function.Module.runMain (internal/modules/cjs/loader.js:834:11)
at startup (internal/bootstrap/node.js:283:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:623:3)
[referBeam (10)] [mrt@srv referBeam]$ npm install fsevents@1.2.13
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm ERR! code EBADPLATFORM
npm ERR! notsup Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm ERR! notsup Valid OS: darwin
npm ERR! notsup Valid Arch: any
npm ERR! notsup Actual OS: linux
npm ERR! notsup Actual Arch: x64
Then there's the webpack error I noticed, but I'm not sure how to update webpack internally if that's what I need to do, and it seems to be asking for old functions that may not exist in the new webpack?
$ webpack
node:internal/modules/cjs/loader:936
throw err;
^
Error: Cannot find module 'resolve-cwd'
Require stack:
- /usr/share/nodejs/webpack/node_modules/import-local/index.js
- /usr/share/nodejs/webpack/node_modules/webpack-cli/bin/cli.js
- /usr/share/nodejs/webpack/bin/webpack.js
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
at Function.Module._load (node:internal/modules/cjs/loader:778:27)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.<anonymous> (/usr/share/nodejs/webpack/node_modules/import-local/index.js:3:20)
at Module._compile (node:internal/modules/cjs/loader:1105:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'/usr/share/nodejs/webpack/node_modules/import-local/index.js',
'/usr/share/nodejs/webpack/node_modules/webpack-cli/bin/cli.js',
'/usr/share/nodejs/webpack/bin/webpack.js'
]
}
$ sudo webpack
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.module has an unknown property 'loaders'. These properties are valid:
object { defaultRules?, exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, strictExportPresence?, strictThisContextOnImports?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp? }
-> Options affecting the normal modules (`NormalModuleFactory`).
Not sure what this means, or how to fix it. How can I resolve it?
Here's the package.json dependencies:
"dependencies": {
"axios": "^0.15.2",
"body-parser": "^1.15.2",
"cookie-parser": "^1.4.3",
"d3": "^3.5.17",
"dotenv": "^2.0.0",
"express": "^4.14.0",
"express-session": "^1.14.2",
"fs": "0.0.1-security",
"history": "^4.4.0",
"md5": "^2.2.1",
"mysql": "^2.12.0",
"passport": "^0.3.2",
"passport-local": "^1.0.0",
"rd3": "^0.7.4",
"react": "^15.3.2",
"react-dom": "^15.3.2",
"react-router": "^3.0.0",
"sendgrid": "^4.7.1"
},
"devDependencies": {
"babel-core": "^6.4.5",
"babel-loader": "^6.2.1",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"install": "^0.8.1",
"npm": "^3.10.7",
"webpack": "^1.12.12",
"webpack-node-externals": "^1.4.3"
}
How can I update webpack without breaking the system?
webpack config info:
var path = require('path');
var webpack = require('webpack');
var BUILD_DIR = path.resolve(__dirname,
'../referbeam/public/js');
var APP_DIR = path.resolve(__dirname, '../referbeam/jsx');
module.exports = {
entry: {
index: APP_DIR + '/index.jsx'
},
output: {
path: BUILD_DIR,
filename: 'bundle.js',
publicPath: '/'
},
module : {
loaders : [
{
test : /\.jsx?/,
include : APP_DIR,
loader : 'babel',
exclude: "/node_modules/",
query:
{
presets:['react', 'es2015']
}
}
]
},
externals: {
'react/addons': 'react/addons'
},
plugins: [
new webpack.optimize.CommonsChunkPlugin("vendors",
"vendors.js"),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
]
};
Updated webpack.config.js to:
var path = require('path');
var webpack = require('webpack');
var BUILD_DIR = path.resolve(__dirname, '../referbeam/public/js');
var APP_DIR = path.resolve(__dirname, '../referbeam/jsx');
const TerserPlugin = require("terser-webpack-plugin");
module.exports = {
entry: {
index: APP_DIR + '/index.jsx'
},
output: {
path: BUILD_DIR,
filename: 'bundle.js',
publicPath: '/'
},
optimization: {
minimize: true,
minimizer: [new TerserPlugin()],
},
module : {
rules : [
{
test : /\.jsx?/,
include : APP_DIR,
loader : 'babel',
exclude: "/node_modules/",
query:
{
presets:['react', 'es2015']
}
}
]
},
externals: {
'react/addons': 'react/addons'
},
plugins: [
new webpack.optimize.CommonsChunkPlugin("vendors", "vendors.js"),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),
]
};
```
*Removed old webpack and installed webpack to 5 with a few hiccups:*
```
$ npm install --save-dev webpack
npm WARN idealTree Removing dependencies.webpack in favor of devDependencies.webpack
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: referbeam@1.0.0
npm WARN Found: webpack@5.72.1
npm WARN node_modules/webpack
npm WARN peer webpack@"^5.1.0" from terser-webpack-plugin@5.3.1
npm WARN node_modules/terser-webpack-plugin
npm WARN terser-webpack-plugin@"^5.1.3" from webpack@5.72.1
npm WARN 1 more (the root project)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer webpack@"1 || 2 || ^2.1.0-beta || ^2.2.0-rc" from babel-loader@6.4.1
npm WARN node_modules/babel-loader
npm WARN dev babel-loader@"^6.2.1" from the root project
Even after updating, I am still getting the same Webpack error (and it happens globally).
$ webpack
node:internal/modules/cjs/loader:936
throw err;
^
Error: Cannot find module 'resolve-cwd'
Require stack:
- /usr/share/nodejs/webpack/node_modules/import-local/index.js
- /usr/share/nodejs/webpack/node_modules/webpack-cli/bin/cli.js
- /usr/share/nodejs/webpack/bin/webpack.js
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
at Function.Module._load (node:internal/modules/cjs/loader:778:27)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.<anonymous> (/usr/share/nodejs/webpack/node_modules/import-local/index.js:3:20)
at Module._compile (node:internal/modules/cjs/loader:1105:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'/usr/share/nodejs/webpack/node_modules/import-local/index.js',
'/usr/share/nodejs/webpack/node_modules/webpack-cli/bin/cli.js',
'/usr/share/nodejs/webpack/bin/webpack.js'
]
}
Not sure why it says the same error globally? Even if I type webpack --version it gives me the same error...
On new OS only local Webpack still error:
$ npx webpack --force
CLI for webpack must be installed.
webpack-cli (https://github.com/webpack/webpack-cli)
We will use "npm" to install the CLI via "npm install -D webpack-cli".
Do you want to install 'webpack-cli' (yes/no): y
Installing 'webpack-cli' (running 'npm install -D webpack-cli')...
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: babel-loader@6.4.1
npm ERR! Found: webpack@5.72.1
npm ERR! node_modules/webpack
npm ERR! peer webpack@"^5.1.0" from terser-webpack-plugin@5.3.1
npm ERR! node_modules/terser-webpack-plugin
npm ERR! terser-webpack-plugin@"^5.1.3" from webpack@5.72.1
npm ERR! dev webpack@"^5.72.1" from the root project
npm ERR! 1 more (webpack-cli)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@"1 || 2 || ^2.1.0-beta || ^2.2.0-rc" from babel-loader@6.4.1
npm ERR! node_modules/babel-loader
npm ERR! dev babel-loader@"^6.2.1" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: webpack@2.7.0
npm ERR! node_modules/webpack
npm ERR! peer webpack@"1 || 2 || ^2.1.0-beta || ^2.2.0-rc" from babel-loader@6.4.1
npm ERR! node_modules/babel-loader
npm ERR! dev babel-loader@"^6.2.1" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /home/oog/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/oog/.npm/_logs/2022-06-01T19_32_07_335Z-debug-0.log
undefined
A little different now. How can I get webpack to work?
Update
It looks like our friend here helped solve the MySQL database port issue.
