DEVHIDE
Login Or Sign up

React Help wanted on WEBPACK error {"os":"darwin"} + {SQL DB}

349 Views Asked by At

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 [email protected] No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: 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 [email protected]
npm WARN deprecated [email protected]: 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 [email protected]: 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: [email protected]
    npm WARN Found: [email protected]
    npm WARN node_modules/webpack
    npm WARN   peer webpack@"^5.1.0" from [email protected]
    npm WARN   node_modules/terser-webpack-plugin
    npm WARN     terser-webpack-plugin@"^5.1.3" from [email protected]
    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 [email protected]
    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: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/webpack
npm ERR!   peer webpack@"^5.1.0" from [email protected]
npm ERR!   node_modules/terser-webpack-plugin
npm ERR!     terser-webpack-plugin@"^5.1.3" from [email protected]
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 [email protected]
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: [email protected]
npm ERR! node_modules/webpack
npm ERR!   peer webpack@"1 || 2 || ^2.1.0-beta || ^2.2.0-rc" from [email protected]
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.

reactjs webpack compiler-errors fsevents
Original Q&A
1

There are 1 best solutions below

12
Harshal Patil On

You are trying to run your application over port 80. TCP ports less than 1024 are special ports and need root level access.

You have two options

  • Run your command node app.js with sudo privileges like sudo node app.js
  • Run your application on port > 1024.

Related Questions in REACTJS

Related Questions in WEBPACK

Related Questions in COMPILER-ERRORS

Related Questions in FSEVENTS

Trending Questions

Popular # Hahtags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs

Popular Questions

.

Copyright © 2021 Jogjafile Inc.