☰

在 Vagrant 和 VirtualBox 中运行 npm run dev 时出错：找不到模块“webpack”

tag-icon • tag-icon 20.04 virtualbox nodejs npm vagrant
在 Vagrant 和 VirtualBox 中运行 npm run dev 时出错：找不到模块“webpack”

为了说明我的问题，以下是我的本地设置：

Vagrant 2.2.16 VirtualBox 6.1.26 Ubuntu 20.04 LTS npm v7.20.6 node v16.6.6

最初，我在安装 webpack-cli 时遇到了很大困难，出现了以下错误：

npm ERR! code EPROTO
npm ERR! syscall symlink
npm ERR! path ../acorn/bin/acorn
npm ERR! dest /vagrant/my_project/frontend/node_modules/.bin/acorn     
npm ERR! errno -71
npm ERR! EPROTO: protocol error, symlink '../acorn/bin/acorn' -> '/vagrant/my_project/frontend/node_modules/.bin/acorn'
npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2021-08-16T05_40_20_295Z-debug.log

直到我使用以下命令成功安装了它：

sudo npm install -g save-dev webpack-cli

跑步sudo webpack-cli也给了我这些：

assets by status 0 bytes [cached] 1 asset

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each
environment.
You can also set it to 'none' to disable any default behavior. Learn more: hts://webpack.js.org/configuration/mode/

ERROR in main
Module not found: Error: Can't resolve './src' in '/vagrant/my_project/frontend'
resolve './src' in '/vagrant/my_project/frontend' 
  using description file: /vagrant/my_project/frontend/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration 
    using description file: /vagrant/my_project/frontend/package.json (relative path: ./src) 
      no extension
        Field 'browser' doesn't contain a valid alias configuration
    /vagrant/my_project/frontend/src is not a file
      .js
        Field 'browser' doesn't contain a valid alias configuration
    /vagrant/my_project/frontend/src.js doesn't exist 
      .json
        Field 'browser' doesn't contain a valid alias configuration
    /vagrant/my_project/frontend/src.json doesn't exist
      .wasm
        Field 'browser' doesn't contain a valid alias configuration
    /vagrant/my_project/frontend/src.wasm doesn't exist
      as directory
        existing directory /vagrant/my_project/frontend/src
          using description file: /vagrant/my_project/frontend/package.on (relative path: ./src)
            using path: /vagrant/my_project/frontend/src/index
              using description file: /vagrant/my_project/frontend/packe.json (relative path: ./src/index)
                no extension
                  Field 'browser' doesn't contain a valid alias configuration
          /vagrant/my_project/frontend/src/index doesn't exist 
        .js
                  Field 'browser' doesn't contain a valid alias configuration
          /vagrant/my_project/frontend/src/index.js doesn't exist 
        .json
                  Field 'browser' doesn't contain a valid alias configuration
          /vagrant/my_project/frontend/src/index.json doesn't exist
                .wasm
                  Field 'browser' doesn't contain a valid alias configuration
          /vagrant/my_project/frontend/src/index.wasm doesn't exist

webpack 5.50.0 compiled with 1 error and 1 warning in 150 ms

但是我忽略了它并继续使用安装其他包，例如 babel 和 react npm install -g。

现在设置我的项目并运行此命令后：

sudo npm run dev

我收到以下错误：

> [email protected] dev
> webpack --mode development --watch

[webpack-cli] Failed to load '/vagrant/my_project/frontend/webpack.config.js' config
[webpack-cli] Error: Cannot find module 'webpack'
Require stack:
- /vagrant/my_project/frontend/webpack.config.js
- /usr/lib/node_modules/webpack-cli/lib/webpack-cli.js
- /usr/lib/node_modules/webpack-cli/lib/bootstrap.js
- /usr/lib/node_modules/webpack-cli/bin/cli.js
- /usr/lib/node_modules/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 (/usr/lib/node_modules/webpack-cli/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at Object.<anonymous> (/vagrant/my_project/frontend/webpack.config.js:2:17)
    at Module._compile (/usr/lib/node_modules/webpack-cli/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153: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: [
    '/vagrant/my_project/frontend/webpack.config.js',
    '/usr/lib/node_modules/webpack-cli/lib/webpack-cli.js',
    '/usr/lib/node_modules/webpack-cli/lib/bootstrap.js',
    '/usr/lib/node_modules/webpack-cli/bin/cli.js',
    '/usr/lib/node_modules/webpack/bin/webpack.js'
  ]
}

webpack.config.js顺便说一下，这是我的文件的内容：

const path = require("path");
const webpack = require("webpack");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "./static/frontend"),
    filename: "[name].js",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },
  optimization: {
    minimize: true,
  },
  plugins: [
    new webpack.DefinePlugin({
      "process.env": {
        NODE_ENV: JSON.stringify("production"),
      },
    }),
  ],
};

我认为这与符号链接有关，但我不想花几个小时调试我不理解的东西。我只是希望有人能找到并回答这个问题。

答案1

符号链接可能是您的问题。我在 VirtualBox 6.1.32 中运行 Ubuntu 20.04 LTS Linux 客户机，在使用主机共享（共享文件夹）时，我有时会忘记需要跳过的环节，以确保符号链接在主机共享中正常工作。Node.js 软件包非常依赖这一点……这些就是您将看到的错误类型。

错误EPROTO对我来说就是线索。我思考如果虚拟机已SharedFoldersEnableSymlinksCreate为相应的共享启用了该标志，但 VirtualBox 不允许在主机上实际创建符号链接，则会发生这种情况。我使用 Windows 10 Home 主机，要使其工作，您需要对 VirtualBox 执行“以管理员身份运行”。要验证并获取更多信息，请参阅：https://askubuntu.com/a/973863/1583901

对于 Windows 10 主机，它不应该没有必要担心这一点，但有关更多信息，请参阅此 VirtualBox 票证 #18680：https://www.virtualbox.org/ticket/18680

相关内容