reactjs – React Help wanted on WEBPACK error {“os”:”darwin”} + {SQL DB}

Hoping you can help me figure out my noob mistakes. Just trying to install this REACT script on this CPANEL server has been over my head to say the least. Now testing on local Linux MX.

The script:
https://github.com/webdesignleader/referBeam

Followed the readme_md to a T 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. Any geniuses out there to please help me solve this basic thing?

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… lol 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 exactly how to fix it at least. Please help solve. Any suggestions to solve this are greatly appreciated!

Here’s the package.json dependencies if that helps.


  "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? OR What should I do?

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: "https://stackoverflow.com/"
      },
    
      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: "https://stackoverflow.com/"
      },
      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 STILL GETTING 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…

How can I get webpack to work?

GRATITUDE!!!

^^^UPDATE: It looks like our friend here helped solve the mysql database port issue.

Leave a Comment