Я устраняю ошибку веб-пакета.
Команда: 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
НОТЫ
Похоже, ES2020 был отправлен в папку /dist, поэтому мой загрузчик cra babel не может его проанализировать, чтобы исправить это, мне нужно включить путь в конфигурацию моего веб-пакета.
Node v16.13.1
@rails/webpacker": "5.4.3"
), который зависит от [email protected]
.yarn install
), веб-пакет успешно компилируется.yarn install
. Я также удаляю каталог node_modules, чтобы обеспечить «свежую» загрузку правильных пакетов.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)
}
}
В конечном итоге я хочу, чтобы веб-пакет скомпилировался. Если бы у вас был совет по любому из следующих вопросов, это очень помогло бы.
@morganney Я не понимаю твоего комментария. Возможно, есть путаница в том, что я имел в виду под «переустановить node_modules». Я имел в виду, что после смены версии ноды я запустил yarn install
.
Это немного проясняет, но такие вещи, как использование файла блокировки, конфигурация Babel или удаление node_modules, до сих пор неизвестны. Semver в сообществе с открытым исходным кодом не всегда проходит гладко, потому что по большей части управление версиями по-прежнему выполняется людьми, что подвержено ошибкам. В любом случае, ваша проблема сводится к тому, что webpack 4 не поддерживает ??
, который одна из ваших зависимостей использует в опубликованном исходном коде. Вы можете добавить соответствующий плагин babel, а затем явно запустить эту зависимость через babel-loader в конфигурации вашего веб-пакета, если это необходимо.
@morganney Я обновил примечания дополнительными подробностями, которые вы запросили. You can add the appropriate babel plugin and then explicitly run that dependency through babel-loader in your webpack config if necessary
Похоже, это именно то, что мне нужно сделать. Можете ли вы указать мне правильное направление, как это сделать? (Я новичок в настройке babel/webpack) Спасибо!!
Очень похоже на этот ответ.
Я возьму удар на этом.
Я полагаю, что ваша проблема в том, что webpack 4 не поддерживает нулевой оператор объединения из-за его зависимости от acorn 6. См. эту проблему webpack и этот PR комментарий.
Вы не указали точную вспомогательную версию Node.js 14x, которая работала для вас. Я предполагаю, что это была версия, которая не полностью поддерживала нулевой оператор объединения, или, по крайней мере, версия, которую опция @babel/preset-env
target
понимала как не поддерживающую ??
, поэтому она была передана babel, и поэтому веб-пакет не жаловался. Вы можете увидеть, какие версии узла поддерживают нулевое объединение на node.green.
Я не совсем понимаю, о чем вы здесь говорите, поэтому не сосредотачивайтесь на этом в предлагаемом решении.
Я не уверен, что предлагаемый обходной путь находится в связанной проблеме, может быть, комментарий о «включить путь в мою конфигурацию веб-пакета», но да, проблема кажется актуальной, поскольку она указывает на нулевой оператор объединения в качестве источника проблема.
Вы можете попытаться решить это с помощью
добавление @babel/plugin-proposal-nullish-coalescing-operator в конфигурацию вашего Babel plugins
обновление конфигурации вашего веб-пакета для запуска от @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.
вам, вероятно, не следует удалять файл блокировки перед каждой установкой, так как это полностью сводит на нет цель файла блокировки.
Спасибо, это супер полезно!! Я собираюсь попробовать это позже сегодня, а пока вот несколько быстрых ответов на ваши вопросы...
should not be deleting the lock file before each install
Я делал это только между сменами версий Node. Я подумал, что имеет смысл позволить пряже находить обновленные пакеты, соответствующие более новой версии Node. Имеет ли это смысл? Может, это без разницы?
2. I don't fully understand the point you are making here
Трассировка стека в ошибке webpacker указывает на строку (351), которой нет в соответствующем исходном файле, если я найду ее внутри node_modules. Фактический файл содержит всего около 100 строк кода. Я нахожу это запутанным и загадочным.
exact minor version of Node.js 14x that worked
v14.17.3
Я добавил @babel/plugin-proposal-nullish-coalescing-operator
в список плагинов в babel.config.js... и это сработало! 🎉 Мне вообще не пришлось трогать конфиги вебпака. На самом деле я пытался настроить загрузчик, как вы указали, но это вызвало массу ошибок с этим шаблоном: Module parse failed: Unexpected token (13:38) File was processed with these loaders: * ./node_modules/vue-loader/lib/index.js
С оригинальными конфигурациями веб-пакета (но обновленными конфигурациями Babel) он работает точно так, как ожидалось. Я смущен, почему это сработало таким образом. Имеет ли это смысл для вас?
Это действительно трудно сказать, не имея передо мной всей вашей установки для отладки, особенно с вовлеченным веб-упаковщиком, но, как вы заметили, суть проблемы заключалась в том, что babel-loader
не транспилировался нулевой оператор объединения, которым задыхается веб-пакет 4.
Еще раз спасибо за помощь. Я думаю, что загрузчик Babel уже применялся к node_modules... но необходимый плагин не был настроен. Я думаю, это объясняет, почему обновление babel.config.js (только) решило проблему. Это звучит правдоподобно для вас? Я знаю, что трудно сказать наверняка.
Да, отсюда и мое предположение, что babel-loader уже применялся к node_modules.
When I change to Node v14x and re-install the node_modules
, так что вы не только изменили версию узла.