เมื่อเร็ว ๆ นี้เมื่อฉันรวบรวมไฟล์ scss ของฉันฉันได้รับข้อผิดพลาด ข้อความแสดงข้อผิดพลาดระบุว่า:

รายการเบราว์เซอร์: caniuse-lite ล้าสมัย โปรดเรียกใช้คำสั่งถัดไปnpm update caniuse-lite browserslist

อย่างแรกตามที่ข้อความระบุฉันใช้งานแล้วnpm update caniuse-lite browserslistแต่ไม่สามารถแก้ไขปัญหาได้ ฉันลบไดเร็กทอรี nod-module ทั้งหมดและติดตั้งอีกครั้งนอกจากนี้ฉันยังอัปเดตทั้งโฟลเดอร์โดยnpm updateแต่ไม่มีใครแก้ไขปัญหาได้ ฉันยังติดตั้ง autoprefixer และรายการเบราว์เซอร์อีกครั้ง แต่ไม่มีสิ่งใดที่ช่วยแก้ปัญหาได้

ถ้าฉันลบ

"options": {
      "autoPrefix": "> 1%"
    }

จากของฉันcompilerconfig.jsonทุกอย่างทำงานได้ดีซึ่งหมายความว่าอาจเกี่ยวข้องกับ autoprefixer นอกจากนี้ฉันเปลี่ยนเวอร์ชันแพ็คเกจด้วยตนเองเป็นเวอร์ชันล่าสุดpackage.jsonและติดตั้งใหม่ แต่โชคไม่ดี

ดูเหมือนว่าคุณกำลังใช้ส่วนขยาย Web Compiler ของ Visual Studio มีปัญหาที่เปิดอยู่สำหรับสิ่งนี้พบที่นี่: https://github.com/madskristensen/WebCompiler/issues/413

มีวิธีแก้ปัญหาที่โพสต์ไว้ในปัญหานั้น:

1. ปิด Visual Studio
2. มุ่งหน้าไปที่C:\Users\USERNAME\AppData\Local\Temp\WebCompilerX.X.X(X คือเวอร์ชันของ WebCompiler)
3. ลบโฟลเดอร์ต่อไปนี้ออกจากnode_modulesโฟลเดอร์: caniuse-liteและbrowserslist เปิด CMD (ด้านในC:\Users\USERNAME\AppData\Local\Temp\WebCompilerX.X.X) แล้วเรียกใช้:npm i caniuse-lite browserslist

ลองใช้วิธีนี้เพื่อแก้ปัญหาของฉัน npx browserslist@latest --update-db

สำหรับ Angular Developers

แม้ว่าฉันจะตอบช้ามาก ฉันมีนิสัยที่ไม่ดีในการตรวจสอบบันทึกการเปลี่ยนแปลงของทุกไลบรารีที่ฉันใช้ while และในขณะที่ตรวจสอบบันทึกประจำรุ่นของ Angular CLI ฉันพบว่าพวกเขาออกแพตช์ใหม่เมื่อวานนี้ (9 ม.ค. 2020) ซึ่งแก้ไขปัญหานี้ได้

https://github.com/angular/angular-cli/releases/tag/v8.3.22

ดังนั้นเมื่อคุณจะเรียกใช้ng updateคุณควรได้รับการอัปเดตสำหรับ@angular/cli:

และการรันng update @angular/cliจะแก้ไขคำเตือนนี้

ไชโย!

ฉันพบว่าทางลัดแทนที่จะผ่านไปvs code appData/webCompilerฉันเพิ่มมันเป็นการพึ่งพาโครงการของฉันด้วย cmd npm i caniuse-lite browserslistนี้ แต่คุณอาจติดตั้งทั่วโลกเพื่อหลีกเลี่ยงการเพิ่มลงในแต่ละโครงการ

หลังจากการติดตั้งคุณสามารถลบออกจากโครงการของคุณและทำpackage.jsonnpm i

อัปเดต:

ในกรณีที่วิธีแก้ปัญหาข้างต้นไม่สามารถแก้ไขได้ คุณสามารถเรียกใช้npm updateเนื่องจากจะอัปเกรดแพ็คเกจที่เลิกใช้งาน / ล้าสมัย

บันทึก:

หลังจากที่คุณเรียกใช้การอัปเดต npm อาจขาดการอ้างอิง ติดตามข้อผิดพลาดและติดตั้งการอ้างอิงที่ขาดหายไป ฉันเป็นโนเดมอนซึ่งฉันแก้ไขโดยnpm i nodemon -g

ความต่อเนื่องของคำตอบดังกล่าวข้างต้น

มี "ข้อผิดพลาดของปลั๊กอิน" เดียวกันกับ @MehrdadBabaki ฉันถอนการติดตั้งเว็บคอมไพเลอร์ลบโฟลเดอร์ AppData WebCompiler ที่กล่าวถึงข้างต้นจากนั้นเปิด VS2019 อีกครั้งและติดตั้งเว็บคอมไพเลอร์ใหม่

จากนั้นฉันไปที่โฟลเดอร์ WebCompiler อีกครั้งและทำnpm i autoprefixer@latest npm i caniuse-lite@latestและnpm i caniuse-lite browserslist@latest

npm --depth 9999 updateแก้ไขปัญหาให้ฉัน - เห็นได้ชัดว่าpackage-lock.jsonเป็นเพราะยืนยันในเวอร์ชันที่ล้าสมัย

ในกรณีของฉันฉันลบออกcaniuse-lite, โฟลเดอร์จากbrowserslistnode_modules

จากนั้นฉันพิมพ์คำสั่งต่อไปนี้เพื่อติดตั้งแพ็คเกจ

npm i -g browserslist caniuse-lite --save

ทำงานได้ดี

การลบnode_modulesและpackage-lock.jsonและnpm iแก้ปัญหาสำหรับผม

ดังที่กล่าวไว้ในคำตอบของ Scott Kuhl ปัญหานี้กล่าวถึงใน https://github.com/madskristensen/WebCompiler/issues/413

สำหรับฉันการรันคำสั่งnpm i caniuse-lite- browserslistใช้งานได้ประมาณ 1/2 วันก่อนที่จะเกิดปัญหาอีกครั้ง

วิธีแก้ปัญหาต่อไปนี้ที่กล่าวถึงในโพสต์ทำงานได้ดีขึ้นมาก สิ่งนี้จะอัปเดตไฟล์ node.js เพื่อให้ใช้console.logแทนconsole.warnเมื่อส่งคืนข้อผิดพลาดเหล่านี้

คุณสามารถอัปเดตไฟล์นี้ด้วยตนเองซึ่งอยู่ที่ C: \ Users \ [ชื่อผู้ใช้] \ AppData \ Local \ Temp \ WebCompiler [VersionNumber] \ node_modules \ browserlist

หรือเพื่อให้เสร็จสิ้นโดยอัตโนมัติให้เพิ่มสิ่งต่อไปนี้ในไฟล์. csproj ของคุณโดย:

1. คลิกขวาที่ไฟล์โครงการและเลือก "Unload Project"
2. แก้ไขไฟล์. csproj
3. วางสิ่งต่อไปนี้ลงในไฟล์โครงการ ฉันวางไว้ที่ส่วนท้ายของไฟล์ก่อน</Project>end tag และก่อนที่จะนำเข้าแพ็คเกจ build web compiler

    <ItemGroup>
        <PackageReference Include="MSBuildTasks" Version="1.5.0.235">
            <PrivateAssets>all</PrivateAssets>
            <IncludeAssets>runtime; build; native; contentfiles; analyzers</IncludeAssets>
        </PackageReference>
    </ItemGroup>
    <PropertyGroup>
        <TempFolder>$([System.IO.Path]::GetTempPath())</TempFolder>
    </PropertyGroup>
    <ItemGroup>
        <BrowsersListNodeJsFiles Include="$(TempFolder)\WebCompiler*\node_modules\browserslist\node.js" />
    </ItemGroup>
    <Target Name="BrowsersListWarningsAsInfo" BeforeTargets="WebCompile">
        <FileUpdate Files="@(BrowsersListNodeJsFiles)"
                    Regex="console.warn"
                    ReplacementText="console.log" />
    </Target>

4. โหลดโปรเจ็กต์ซ้ำกลับเข้าไปในโซลูชัน

ฉันได้แก้ไขปัญหานี้แล้วโดยทำทีละขั้นตอน:

1. ลบ node_modules
2. ลบpackage-lock.json,
3. วิ่ง npm --depth 9999 update
4. วิ่ง npm install

ฉันมีปัญหาเดียวกันเช่นกันคำสั่งนี้ใช้ได้กับฉัน

npm i autoprefixer@latest

เพิ่มโดยอัตโนมัติต้องการการพึ่งพาpackage.jsonและpackage-lock.jsonไฟล์ด้านล่าง:

package.json

"autoprefixer": "^9.6.5",

package-lock.json

"@angular-devkit/build-angular": {

...

"dependencies": {
    "autoprefixer": {
      "version": "9.4.6",
      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.4.6.tgz",
      "integrity": "sha512-Yp51mevbOEdxDUy5WjiKtpQaecqYq9OqZSL04rSoCiry7Tc5I9FEyo3bfxiTJc1DfHeKwSFCUYbBAiOQ2VGfiw==",
      "dev": true,
      "requires": {
        "browserslist": "^4.4.1",
        "caniuse-lite": "^1.0.30000929",
        "normalize-range": "^0.1.2",
        "num2fraction": "^1.2.2",
        "postcss": "^7.0.13",
        "postcss-value-parser": "^3.3.1"
      }
    },

...

  }

...

"autoprefixer": {
    "version": "9.6.5",
    "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.6.5.tgz",
    "integrity": "sha512-rGd50YV8LgwFQ2WQp4XzOTG69u1qQsXn0amww7tjqV5jJuNazgFKYEVItEBngyyvVITKOg20zr2V+9VsrXJQ2g==",
    "requires": {
      "browserslist": "^4.7.0",
      "caniuse-lite": "^1.0.30000999",
      "chalk": "^2.4.2",
      "normalize-range": "^0.1.2",
      "num2fraction": "^1.2.2",
      "postcss": "^7.0.18",
      "postcss-value-parser": "^4.0.2"
    },

...

}

ฉันไม่แน่ใจว่าปัญหาของฉันอยู่ที่ไหน แต่ฉันเชื่อว่าเป็นเพราะฉันใช้แพ็คเกจทั่วโลกเดียวกันจากทั้ง npm และ Yarn

ฉันถอนการติดตั้งแพ็คเกจส่วนกลาง npm ทั้งหมดจากนั้นเมื่อใช้คำสั่ง yarn อีกครั้งปัญหาก็หายไป

หากต้องการดูแพ็คเกจส่วนกลางที่ติดตั้ง ...

สำหรับ npm:

npm ls -g --depth=0

สำหรับเส้นด้าย:

yarn global list

จากนั้นฉันถอนการติดตั้งแต่ละแพ็คเกจที่ฉันเห็นในรายการ npm โดยใช้:

npm uninstall -g <package-name>

คำตอบจาก @Alexandr Nil ปลอดภัยและได้ผลสำหรับฉัน

ฉันเขียนเป็นคำตอบแบบเต็มเพราะพลาดความคิดเห็นของเขาได้ง่าย

npm --depth 20 update caniuse-lite browserslist 

สิ่งนี้ดีเพราะ:

1. ไม่มีการลบpackage-lock.jsonไฟล์. การลบจะทำให้คุณเสี่ยงต่อการที่แพ็คเกจจำนวนมากได้รับการอัปเกรดพร้อมกับการเปลี่ยนแปลงที่ไม่สมบูรณ์

2. เป็นเรื่องที่ชัดเจนและมีข้อ จำกัด อย่างมากในการอัปเดตสิ่งต่างๆ

3. หลีกเลี่ยงความลึกที่มากถึง 99 หรือ 9999 ซึ่งจะใช้ได้กับบางโปรเจ็กต์และระบบ แต่ไม่ใช่กับโปรเจ็กต์อื่น ๆ หากคุณจำกัดความลึกให้มีจำนวนน้อยเกินไปก็จะไม่ทำลายอะไร คุณสามารถเพิ่มความลึกและลองอีกครั้งจนกว่าโครงการจะคอมไพล์สำเร็จ

หลายคนแนะนำให้คุณลบpackage-lock.jsonหรือyarn.lock. นี่เป็นความคิดที่ไม่ดีอย่างชัดเจน!

ฉันใช้ Yarn และฉันสามารถแก้ไขปัญหานี้ได้โดยการลบเฉพาะรายการcaniuse-dbและcaniuse-liteรายการในyarn.lockไฟล์yarn.

ไม่จำเป็นต้องทำลายฟังก์ชันหลักของไฟล์ล็อกโดยการลบ

ฉันได้ดาวน์เกรดเวอร์ชันโหนดจาก 12 เป็น 10

แก้ไข

ข้อผิดพลาดนี้เกิดขึ้นกับฉันเนื่องจากฉันใช้โหนดเวอร์ชัน 12 เมื่อฉันดาวน์เกรดเป็นเวอร์ชัน 10.16.5 ข้อผิดพลาดนี้หยุดลง ข้อผิดพลาดนี้เกิดขึ้นใน env ในเครื่องของฉัน แต่ใน prod และ staging จะไม่เกิดขึ้น ในเวอร์ชัน prod และ staging node คือ 10.x ดังนั้นฉันจึงทำสิ่งนี้และฉันไม่จำเป็นต้องอัปเดตแพ็คเกจใด ๆ ใน package.json ของฉัน

ในการแก้ไขปัญหาคุณสามารถพิมพ์คำสั่งด้านล่าง:

"อัปเดต npm -g"

หากคุณใช้เส้นด้าย:

yarn upgrade

ช่วยสำหรับฉัน

โซลูชันขั้นต่ำที่เหมาะกับฉันสำหรับโครงการปัจจุบัน

• โครงการสร้างปฏิกิริยาแอป
• Ubuntu / * nix
• 2020
• โหนด 14.7

ลบnode_modules/browserslistไดเร็กทอรีในโปรเจ็กต์

ตอนนี้

npm run build

ไม่สร้างข้อความนั้นอีกต่อไป

ในกรณีของฉันมันใช้งานได้ดี ...

sudo npm i -g browserslist caniuse-lite