Lỗi khi chạy npm run dev trong Vagrant và VirtualBox: Không thể tìm thấy mô-đun 'webpack'

Để đưa ra một chút bối cảnh về vấn đề của tôi, đây là thiết lập cục bộ của tôi:

Người lang thang 2.2.16 Hộp ảo 6.1.26 Ubuntu 20.04 LTS npm v7.20.6 nút v16.6.6

Lúc đầu, tôi gặp rất nhiều khó khăn khi cài đặt webpack-cli và nó đã gây ra lỗi này:

npm LỖI! mã EPROTO
npm LỖI! liên kết tượng trưng tòa nhà
npm LỖI! đường dẫn ../acorn/bin/acorn
npm LỖI! đích /vagrant/my_project/frontend/node_modules/.bin/acorn     
npm LỖI! lỗi -71
npm LỖI! EPROTO: lỗi giao thức, liên kết tượng trưng '../acorn/bin/acorn' -> '/vagrant/my_project/frontend/node_modules/.bin/acorn'
npm LỖI! Bạn có thể tìm thấy nhật ký đầy đủ của lần chạy này tại:
npm LỖI! /root/.npm/_logs/2021-08-16T05_40_20_295Z-debug.log

Cho đến khi tôi cài đặt thành công nó bằng các lệnh sau:

cài đặt sudo npm -g save-dev webpack-cli

Đang chạy sudo webpack-cli cũng đã cho tôi điều này:

nội dung theo trạng thái 0 byte [được lưu trong bộ nhớ cache] 1 nội dung

CẢNH BÁO trong cấu hình
Tùy chọn 'chế độ' chưa được đặt, webpack sẽ chuyển sang 'sản xuất' cho giá trị này.
Đặt tùy chọn 'chế độ' thành 'phát triển' hoặc 'sản xuất' để bật các giá trị mặc định cho từng
môi trường.
Bạn cũng có thể đặt thành 'không' để tắt bất kỳ hành vi mặc định nào. Tìm hiểu thêm: hts://webpack.js.org/configuration/mode/

LỖI trong chính
Không tìm thấy mô-đun: Lỗi: Không thể giải quyết './src' trong '/vagrant/my_project/frontend'
giải quyết './src' trong '/vagrant/my_project/frontend' 
  sử dụng tệp mô tả: /vagrant/my_project/frontend/package.json (đường dẫn tương đối: .)
    Trường 'trình duyệt' không chứa cấu hình bí danh hợp lệ 
    sử dụng tệp mô tả: /vagrant/my_project/frontend/package.json (đường dẫn tương đối: ./src) 
      Không gia hạn
        Trường 'trình duyệt' không chứa cấu hình bí danh hợp lệ
    /vagrant/my_project/frontend/src không phải là tệp
      .js
        Trường 'trình duyệt' không chứa cấu hình bí danh hợp lệ
    /vagrant/my_project/frontend/src.js không tồn tại 
      .json
        Trường 'trình duyệt' không chứa cấu hình bí danh hợp lệ
    /vagrant/my_project/frontend/src.json không tồn tại
      .đã m
        Trường 'trình duyệt' không chứa cấu hình bí danh hợp lệ
    /vagrant/my_project/frontend/src.wasm không tồn tại
      như thư mục
        thư mục hiện có /vagrant/my_project/frontend/src
          sử dụng tệp mô tả: /vagrant/my_project/frontend/package.on (đường dẫn tương đối: ./src)
            sử dụng đường dẫn: /vagrant/my_project/frontend/src/index
              sử dụng tệp mô tả: /vagrant/my_project/frontend/packe.json (đường dẫn tương đối: ./src/index)
                Không gia hạn
                  Trường 'trình duyệt' không chứa cấu hình bí danh hợp lệ
          /vagrant/my_project/frontend/src/index không tồn tại 
        .js
                  Trường 'trình duyệt' không chứa cấu hình bí danh hợp lệ
          /vagrant/my_project/frontend/src/index.js không tồn tại 
        .json
                  Trường 'trình duyệt' không chứa cấu hình bí danh hợp lệ
          /vagrant/my_project/frontend/src/index.json không tồn tại
                .đã m
                  Trường 'trình duyệt' không chứa cấu hình bí danh hợp lệ
          /vagrant/my_project/frontend/src/index.wasm không tồn tại

webpack 5.50.0 được biên dịch với 1 lỗi và 1 cảnh báo trong 150 mili giây

Nhưng tôi bỏ qua nó và tiếp tục cài đặt các gói khác như babel và phản ứng bằng cách sử dụng cài đặt npm -g.

Bây giờ sau khi thiết lập dự án của tôi và chạy lệnh này:

sudo npm chạy dev

Tôi gặp lỗi sau:

> [email protected] nhà phát triển
> webpack --mode phát triển --watch

[webpack-cli] Không tải được cấu hình '/vagrant/my_project/frontend/webpack.config.js'
[webpack-cli] Lỗi: Không thể tìm thấy mô-đun 'webpack'
Yêu cầu ngăn xếp:
- /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
    tại Function.Module._resolveFilename (nút:internal/modules/cjs/loader:933:15)
    tại Function.Module._load (nút:internal/modules/cjs/loader:778:27)
    tại Module.require (nút:internal/modules/cjs/loader:1005:19)
    theo yêu cầu (/usr/lib/node_modules/webpack-cli/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    tại Object.<anonymous> (/vagrant/my_project/frontend/webpack.config.js:2:17)
    tại Module._compile (/usr/lib/node_modules/webpack-cli/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    tại Object.Module._extensions..js (nút:internal/modules/cjs/loader:1153:10)
    tại Module.load (nút:internal/modules/cjs/loader:981:32)
    tại Function.Module._load (nút:internal/modules/cjs/loader:822:12)
    tại Module.require (nút:internal/modules/cjs/loader:1005:19) {
  mã: 'MODULE_NOT_FOUND',
  yêu cầuStack: [
    '/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'
  ]
}

Nhân tiện, đây là nội dung của tôi webpack.config.js tập tin:

const đường dẫn = yêu cầu ("đường dẫn");
const webpack = require("webpack");

module.exports = {
  mục nhập: "./src/index.js",
  đầu ra: {
    đường dẫn: path.resolve(__dirname, "./static/frontend"),
    tên tệp: "[name].js",
  },
  mô-đun: {
    quy tắc: [
      {
        kiểm tra: /\.js$/,
        loại trừ: /node_modules/,
        sử dụng: {
          trình tải: "trình tải babel",
        },
      },
    ],
  },
  tối ưu hóa: {
    giảm thiểu: đúng,
  },
  bổ sung: [
    gói web mới.DefinePlugin({
      "tiến trình.env": {
        NODE_ENV: JSON.stringify("sản xuất"),
      },
    }),
  ],
};

Tôi nghĩ rằng điều này có liên quan đến các liên kết tượng trưng nhưng tôi không muốn mất hàng giờ để gỡ lỗi điều gì đó mà tôi không hiểu. Tôi chỉ hy vọng ai đó có thể tìm thấy và trả lời điều này.