เกิดข้อผิดพลาดขณะเรียกใช้ npm run dev ใน Vagrant และ VirtualBox: ไม่พบโมดูล 'webpack'

เพื่อให้บริบทเล็กน้อยเกี่ยวกับปัญหาของฉัน นี่คือการตั้งค่าในเครื่องของฉัน:

คนจรจัด 2.2.16 VirtualBox 6.1.26 อูบุนตู 20.04 LTS npm v7.20.6 โหนด v16.6.6

ในตอนแรก ฉันมีช่วงเวลาที่ยากลำบากมากในการติดตั้ง webpack-cli ซึ่งทำให้ฉันมีข้อผิดพลาดนี้:

ข้อผิดพลาด NPM! รหัส EPROTO
ข้อผิดพลาด NPM! syscall ซิมลิงค์
ข้อผิดพลาด NPM! เส้นทาง ../acorn/bin/acorn
ข้อผิดพลาด NPM! ปลายทาง /vagrant/my_project/frontend/node_modules/.bin/acorn     
ข้อผิดพลาด NPM! เออร์โน-71
ข้อผิดพลาด NPM! EPROTO: ข้อผิดพลาดของโปรโตคอล, symlink '../acorn/bin/acorn' -> '/vagrant/my_project/frontend/node_modules/.bin/acorn'
ข้อผิดพลาด NPM! สามารถดูบันทึกทั้งหมดของการวิ่งครั้งนี้ได้ใน:
ข้อผิดพลาด NPM! /root/.npm/_logs/2021-08-16T05_40_20_295Z-debug.log

จนกว่าฉันจะติดตั้งสำเร็จด้วยคำสั่งต่อไปนี้:

sudo npm ติดตั้ง -g save-dev webpack-cli

วิ่ง sudo webpack-cli ยังให้ฉันนี้:

เนื้อหาตามสถานะ 0 ไบต์ [แคช] 1 เนื้อหา

คำเตือนในการกำหนดค่า
ยังไม่ได้ตั้งค่าตัวเลือก 'โหมด' webpack จะถอยกลับเป็น 'การผลิต' สำหรับค่านี้
ตั้งค่าตัวเลือก 'โหมด' เป็น 'การพัฒนา' หรือ 'การผลิต' เพื่อเปิดใช้งานค่าเริ่มต้นสำหรับแต่ละรายการ
สิ่งแวดล้อม.
คุณยังสามารถตั้งค่าเป็น 'ไม่มี' เพื่อปิดการทำงานเริ่มต้นใดๆ เรียนรู้เพิ่มเติม: hts://webpack.js.org/configuration/mode/

ข้อผิดพลาดในหลัก
ไม่พบโมดูล: ข้อผิดพลาด: ไม่สามารถแก้ไข './src' ใน '/vagrant/my_project/frontend'
แก้ไข './src' ใน '/vagrant/my_project/frontend' 
  ใช้ไฟล์คำอธิบาย: /vagrant/my_project/frontend/package.json (เส้นทางสัมพัทธ์: .)
    ช่อง 'เบราว์เซอร์' ไม่มีการกำหนดค่านามแฝงที่ถูกต้อง 
    ใช้ไฟล์คำอธิบาย: /vagrant/my_project/frontend/package.json (เส้นทางสัมพัทธ์: ./src) 
      ไม่มีส่วนขยาย
        ช่อง 'เบราว์เซอร์' ไม่มีการกำหนดค่านามแฝงที่ถูกต้อง
    /vagrant/my_project/frontend/src ไม่ใช่ไฟล์
      .js
        ช่อง 'เบราว์เซอร์' ไม่มีการกำหนดค่านามแฝงที่ถูกต้อง
    /vagrant/my_project/frontend/src.js ไม่มีอยู่ 
      .json
        ช่อง 'เบราว์เซอร์' ไม่มีการกำหนดค่านามแฝงที่ถูกต้อง
    /vagrant/my_project/frontend/src.json ไม่มีอยู่
      .wasm
        ช่อง 'เบราว์เซอร์' ไม่มีการกำหนดค่านามแฝงที่ถูกต้อง
    /vagrant/my_project/frontend/src.wasm ไม่มีอยู่
      เป็นไดเรกทอรี
        ไดเร็กทอรีที่มีอยู่ /vagrant/my_project/frontend/src
          ใช้ไฟล์คำอธิบาย: /vagrant/my_project/frontend/package.on (เส้นทางสัมพัทธ์: ./src)
            ใช้เส้นทาง: /vagrant/my_project/frontend/src/index
              ใช้ไฟล์คำอธิบาย: /vagrant/my_project/frontend/packe.json (เส้นทางสัมพัทธ์: ./src/index)
                ไม่มีส่วนขยาย
                  ช่อง 'เบราว์เซอร์' ไม่มีการกำหนดค่านามแฝงที่ถูกต้อง
          /vagrant/my_project/frontend/src/index ไม่มีอยู่ 
        .js
                  ช่อง 'เบราว์เซอร์' ไม่มีการกำหนดค่านามแฝงที่ถูกต้อง
          /vagrant/my_project/frontend/src/index.js ไม่มีอยู่ 
        .json
                  ช่อง 'เบราว์เซอร์' ไม่มีการกำหนดค่านามแฝงที่ถูกต้อง
          /vagrant/my_project/frontend/src/index.json ไม่มีอยู่
                .wasm
                  ช่อง 'เบราว์เซอร์' ไม่มีการกำหนดค่านามแฝงที่ถูกต้อง
          /vagrant/my_project/frontend/src/index.wasm ไม่มีอยู่

webpack 5.50.0 คอมไพล์โดยมี 1 ข้อผิดพลาดและ 1 คำเตือนใน 150 มิลลิวินาที

แต่ฉันไม่สนใจและติดตั้งแพ็คเกจอื่น ๆ เช่น Babel และตอบโต้โดยใช้ npm ติดตั้ง -g.

หลังจากตั้งค่าโครงการของฉันและรันคำสั่งนี้แล้ว:

sudo npm เรียกใช้ dev

ฉันได้รับข้อผิดพลาดต่อไปนี้:

> [email protected] ผู้พัฒนา
> webpack -- การพัฒนาโหมด -- ดู

[webpack-cli] ไม่สามารถโหลดการกำหนดค่า '/vagrant/my_project/frontend/webpack.config.js'
[webpack-cli] ข้อผิดพลาด: ไม่พบโมดูล 'webpack'
ต้องการกอง:
- /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
    ที่ Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    ที่ Function.Module._load (node:internal/modules/cjs/loader:778:27)
    ที่ Module.require (node:internal/modules/cjs/loader:1005:19)
    ที่ต้องการ (/usr/lib/node_modules/webpack-cli/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    ที่ Object.<anonymous> (/vagrant/my_project/frontend/webpack.config.js:2:17)
    ที่ Module._compile (/usr/lib/node_modules/webpack-cli/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    ที่ Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    ที่ Module.load (node:internal/modules/cjs/loader:981:32)
    ที่ Function.Module._load (node:internal/modules/cjs/loader:822:12)
    ที่ Module.require (node:internal/modules/cjs/loader:1005:19) {
  รหัส: 'MODULE_NOT_FOUND'
  ต้องใช้กอง: [
    '/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 = ต้องการ ("เส้นทาง");
const webpack = ต้องการ ("webpack");

โมดูลส่งออก = {
  รายการ: "./src/index.js",
  เอาต์พุต: {
    เส้นทาง: path.resolve (__dirname, "./static/frontend"),
    ชื่อไฟล์: "[ชื่อ].js",
  },
  โมดูล: {
    กฎ: [
      {
        ทดสอบ: /\.js$/,
        ยกเว้น: /node_modules/,
        ใช้: {
          ตัวโหลด: "babel-loader",
        },
      },
    ]
  },
  การเพิ่มประสิทธิภาพ: {
    ย่อ: จริง,
  },
  ปลั๊กอิน: [
    ใหม่ webpack.DefinePlugin({
      "กระบวนการ.env": {
        NODE_ENV: JSON.stringify("การผลิต"),
      },
    }),
  ]
};

ฉันคิดว่าสิ่งนี้เกี่ยวข้องกับลิงก์สัญลักษณ์ แต่ฉันไม่ต้องการใช้เวลาหลายชั่วโมงเพื่อพยายามแก้ไขข้อบกพร่องในสิ่งที่ฉันไม่เข้าใจ ฉันแค่หวังว่าจะมีคนสามารถค้นหาและตอบคำถามนี้ได้