堆棧內存溢出
  簡體   English   中英

在 WEBPACK 錯誤 {"os":"darwin"} + {SQL DB} 上需要 React 幫助

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

 原文  2022-05-29 19:18:15  1   1    reactjs/ webpack/ compiler-errors/ fsevents/ arch

問題描述

我只是想在cPanel 服務器上安裝這個React腳本，至少可以這么說。 現在在本地 Linux MX 上進行測試。

劇本：
https://github.com/webdesignleader/referBeam

我逐字閱讀了readme_md，但無濟於事。 似乎是一個我可以覆蓋和更新的簡單問題，但是我在 React 中不到 100 小時的時間讓我的邏輯學家的血管有點難過。

錯誤日志：

[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

然后是我注意到的 webpack 錯誤，但是如果這是我需要做的，我不確定如何在內部更新 webpack，並且它似乎要求新 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`).

不知道這意味着什么，或者如何解決它。 我該如何解決？

這是 package.json 依賴項：


  "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"
  }

如何在不破壞系統的情況下更新 webpack？

webpack 配置信息：


    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
                }
            })
        ]
    
    };

將 webpack.config.js 更新為：


    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

即使在更新之后，我仍然會收到相同的 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'
      ]
    }

不知道為什么它在全球范圍內都說同樣的錯誤？ 即使我輸入webpack --version它也會給我同樣的錯誤......

在新操作系統上，只有本地 Webpack 仍然錯誤：

$ 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

現在有點不同了。 我怎樣才能讓 webpack 工作？

更新

看起來我們的朋友幫助解決了 MySQL 數據庫端口問題。

1 個解決方案

解決方案1
 0  2022-05-30 13:41:27

您正在嘗試通過端口80運行您的應用程序。 小於1024的 TCP 端口是特殊端口，需要根級訪問。

你有兩個選擇

  • 使用 sudo node app.js 等 sudo 權限運行命令node app.js sudo node app.js
  • 在端口 > 1024 上運行您的應用程序。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 React，Redux webpack錯誤 反應Webpack實用程序錯誤 解決Webpack /反應錯誤 Webpack React錯誤 React Webpack渲染錯誤 具有React未捕獲參考錯誤的WebPack Webpack模塊解析錯誤與React 使用 react 和 webpack 添加圖像時出錯 在生產錯誤＃105中反應Webpack 與 webpack 反應構建中的 Hetting 錯誤
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM