我正在對 webpack 錯誤進行故障排除。
命令：bin/webpack --colors --progress
產生此錯誤：
ERROR in ./node_modules/@flatfile/sdk/dist/index.js 351:361
Module parse failed: Unexpected token (351:361)
File was processed with these loaders:
* ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| class v extends i {
| constructor(e, t) {
> super(e), r(this, "code", "FF-UA-00"), r(this, "name", "UnauthorizedError"), r(this, "debug", "The JWT was not signed with a recognized private key or you did not provide the necessary information to identify the end user"), r(this, "userMessage", "There was an issue establishing a secure import session."), e && (this.debug = e), this.code = t ?? "FF-UA-00";
| }
| }
@ ./app/javascript/src/app/pages/content_assets/Index.vue?vue&type=script&lang=ts& (./node_modules/babel-loader/lib??ref--8-0!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/src/app/pages/content_assets/Index.vue?vue&type=script&lang=ts&) 22:0-41 125:6-14
@ ./app/javascript/src/app/pages/content_assets/Index.vue?vue&type=script&lang=ts&
@ ./app/javascript/src/app/pages/content_assets/Index.vue
@ ./app/javascript/packs/app.js
筆記
- 我發現在 Flatfile 專案中報告了一個相同的問題：https ://github.com/FlatFilers/sdk/issues/83
看起來 ES2020 已發送到 /dist 檔案夾，所以我的 cra babel 加載器無法決議它，為了修復它，我需要在我的 webpack 配置中包含路徑。
Node v16.13.1- 我們通過依賴于
@rails/webpacker": "5.4.3".[email protected] - 當我更改為 Node v14x 并重建 node_modules (
yarn install) 時，webpack 編譯成功。 - 當我去檢查 node_modules/ 中的檔案時，錯誤中參考的行 (351:361)不存在
- 我們有一個 yarn.lock 檔案，我在運行之前洗掉并重新創建了它
yarn install。我還洗掉了 node_modules 目錄以確保“新”下載正確的包。 - 我們有一個 babel.config.js 檔案...
module.exports = function(api) {
var validEnv = ['development', 'test', 'production']
var currentEnv = api.env()
var isDevelopmentEnv = api.env('development')
var isProductionEnv = api.env('production')
var isTestEnv = api.env('test')
if (!validEnv.includes(currentEnv)) {
throw new Error(
'Please specify a valid `NODE_ENV` or '
'`BABEL_ENV` environment variables. Valid values are "development", '
'"test", and "production". Instead, received: '
JSON.stringify(currentEnv)
'.'
)
}
return {
presets: [
isTestEnv && [
'@babel/preset-env',
{
targets: {
node: 'current'
}
}
],
(isProductionEnv || isDevelopmentEnv) && [
'@babel/preset-env',
{
forceAllTransforms: true,
useBuiltIns: 'entry',
corejs: 3,
modules: false,
exclude: ['transform-typeof-symbol']
}
],
["babel-preset-typescript-vue", { "allExtensions": true, "isTSX": true }]
].filter(Boolean),
plugins: [
'babel-plugin-macros',
'@babel/plugin-syntax-dynamic-import',
isTestEnv && 'babel-plugin-dynamic-import-node',
'@babel/plugin-transform-destructuring',
[
'@babel/plugin-proposal-class-properties',
{
loose: true
}
],
[
'@babel/plugin-proposal-object-rest-spread',
{
useBuiltIns: true
}
],
[
'@babel/plugin-transform-runtime',
{
helpers: false,
regenerator: true,
corejs: false
}
],
[
'@babel/plugin-transform-regenerator',
{
async: false
}
]
].filter(Boolean)
}
}最終我想讓 webpack 編譯。如果您對以下任何問題有任何建議，那將有很大幫助。
- 為什么更改 Node 版本（僅）會導致不同的 webpack 行為？我們不會更改導致錯誤的 webpack 版本或 @flatfile 包的版本。
- 為什么錯誤指向包中不存在的行？這是某種快取問題的證據嗎？
- 鏈接的 GitHub 問題中提到的解決方法是否能說明我的問題？
uj5u.com熱心網友回復：
我會試一試。
我相信您的問題是 webpack 4 不支持 nullish coalescing 運算子，因為它依賴于 acorn 6。請參閱此 webpack問題和此 PR評論。
您尚未指定適合您的 Node.js 14x 的確切次要版本。
@babel/preset-env我會假設它是一個不完全支持 nullish coalescing 運算子的版本，或者至少是一個target選項被理解為不支持的版本??，所以它被 babel 轉譯，因此 webpack 沒有抱怨。您可以在node.green上查看哪些版本的節點支持無效合并。我不完全理解您在這里提出的觀點，因此在建議的解決方案中不關注這一點。
我不確定鏈接問題中建議的解決方法是什么，也許是關于“在我的 webpack 配置中包含路徑”的評論，但是是的，這個問題似乎確實相關，因為它指出無效的合并運算子是源問題。
您可以嘗試通過以下方式解決此問題
添加
@babel/plugin-proposal-nullish-coalescing-operator到您的 babel 配置中plugins更新您的 webpack 配置以運行
@flatfile/sdk以babel-loader轉換無效的合并運算子：{ test: /\.jsx?$/, exclude: filename => { return /node_modules/.test(filename) && !/@flatfile\/sdk\/dist/.test(filename) }, use: ['babel-loader'] }
另一種可能性是升級webpacker到依賴于 webpack v5 的版本。
最后一句話，當你說
我們有一個 yarn.lock 檔案，我在運行 yarn install 之前洗掉并重新創建了它。
您可能不應該在每次安裝之前洗掉鎖定檔案，因為它完全否定了鎖定檔案的目的。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/532736.html