与模块 babel-plugin-syntax-dynamic-import 相关的 Webpacker 错误

Question

尝试加载页面时出错。轨道 6，Ruby 2.7.1。Webpacker for javascript and SCSS 从终端(类似于Chrome控制台错误(

Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module 'babel-plugin-syntax-dynamic-import' from '<path_to_my_app>'
- Did you mean "@babel/syntax-dynamic-import"?
at Function.resolveSync [as sync] (<path_to_my_app>/node_modules/resolve/lib/sync.js:89:15)
at resolveStandardizedName (<path_to_my_app>/node_modules/@babel/core/lib/config/files/plugins.js:101:31)
at resolvePlugin (<path_to_my_app>/node_modules/@babel/core/lib/config/files/plugins.js:54:10)
at loadPlugin (<path_to_my_app>/node_modules/@babel/core/lib/config/files/plugins.js:62:20)
at createDescriptor (<path_to_my_app>/node_modules/@babel/core/lib/config/config-descriptors.js:154:9)
at <path_to_my_app>/node_modules/@babel/core/lib/config/config-descriptors.js:109:50
at Array.map (<anonymous>)
at createDescriptors (<path_to_my_app>/node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
at createPluginDescriptors (<path_to_my_app>/node_modules/@babel/core/lib/config/config-descriptors.js:105:10)
at plugins (<path_to_my_app>/node_modules/@babel/core/lib/config/config-descriptors.js:40:19)
at mergeChainOpts (<path_to_my_app>/node_modules/@babel/core/lib/config/config-chain.js:319:26)
at <path_to_my_app>/node_modules/@babel/core/lib/config/config-chain.js:283:7
at Generator.next (<anonymous>)
at buildRootChain (<path_to_my_app>/node_modules/@babel/core/lib/config/config-chain.js:120:29)
at buildRootChain.next (<anonymous>)
at loadPrivatePartialConfig (<path_to_my_app>/node_modules/@babel/core/lib/config/partial.js:95:62)
at loadPrivatePartialConfig.next (<anonymous>)
at Function.<anonymous> (<path_to_my_app>/node_modules/@babel/core/lib/config/partial.js:120:25)
at Generator.next (<anonymous>)
at evaluateSync (<path_to_my_app>/node_modules/gensync/index.js:244:28)
at Function.sync (<path_to_my_app>/node_modules/gensync/index.js:84:14)
at Object.<anonymous> (<path_to_my_app>/node_modules/@babel/core/lib/config/index.js:43:61)
at Object.<anonymous> (<path_to_my_app>/node_modules/babel-loader/lib/index.js:151:26)
at Generator.next (<anonymous>)
at asyncGeneratorStep (<path_to_my_app>/node_modules/babel-loader/lib/index.js:3:103)
at _next (<path_to_my_app>/node_modules/babel-loader/lib/index.js:5:194)
at <path_to_my_app>/node_modules/babel-loader/lib/index.js:5:364
at new Promise (<anonymous>)
at Object.<anonymous> (<path_to_my_app>/node_modules/babel-loader/lib/index.js:5:97)
at Object._loader (<path_to_my_app>/node_modules/babel-loader/lib/index.js:231:18)

宝石文件

source 'https://rubygems.org'
git_source(:github) do |repo_name|
repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/")
"https://github.com/#{repo_name}.git"
end
ruby '2.7.1'
gem 'rails', '~> 6.0.1'
gem 'pg' , '~> 0.18'
gem 'puma'
gem 'webpacker', '~> 5.0'
gem 'bootsnap', require: false
gem 'jbuilder' , '~> 2.9'
gem 'bcrypt', '~> 3.1.11'
gem 'paper_trail'
gem 'carrierwave', '1.1.0' #
gem 'activerecord-postgis-adapter', git: 'https://github.com/corneverbruggen/activerecord-postgis-adapter', branch: 'activerecord-6.0'
gem 'rgeo-geojson'
gem 'leaflet-draw-rails'
gem 'gon'
gem 'aws-sdk-s3', '~> 1'
group :development do
gem 'web-console', '>= 3.5.1'
gem 'rubocop-rails'
gem 'awesome_print' 
gem 'super_awesome_print'
gem "rails-erd" 
gem 'heroku_db_restore'
end # development
group :development, :test do
gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
gem 'pry-byebug' 
gem "better_errors" 
gem 'binding_of_caller'
gem 'dotenv-rails' # 
gem 'capybara', '~> 2.13'
gem 'selenium-webdriver'
end #  development, test
group :test do
gem 'minitest-reporters', '1.1.9'
gem 'simplecov', :require => false
gem 'database_cleaner-active_record'
end # test

app/javascripts/packs/application.js

import 'core-js/stable'
import 'regenerator-runtime/runtime'
import 'leaflet'
import "leaflet.timeline"
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("jquery")
import "bootstrap"
import 'bootstrap/dist/js/bootstrap'

config/webpack/environment.js

const webpack = require('webpack')
environment.plugins.append('Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery/src/jquery', // Is the "jquery/src/" prefix needed ? Not the first time I've seen this
jquery: 'jquery/src/jquery'
}))

module.exports = environment

babel.config.json

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']
}
]
].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)
}
}

这是一个 Rails 5 应用程序，一两年没有变化，然后我试图回去处理它，一些捆绑包更改阻止了上传到 Heroku。与bootstrap对无法安装的ffi依赖有关。放弃并决定从 Rails 5 转到 6 和 Webpacker，我将其用于类似的应用程序，因为它与 Bootstrap gem 相关并且可以切换到 Webpack 版本。

无数的宝石打开和关闭，bundle installs，移除和重新安装node-modules

已安装<path_to_my_app>/node_modules/@babel/plugin-syntax-dynamic-import/。

SO 中报告了类似的问题，但我想我已经尝试了所有问题。

感谢您的任何建议。令人沮丧，因为类似的应用程序有效。

Answer 1

Webpacker在主要版本3和4之间从使用.babelrc更改为babel.config.js。(这是提到这一点的更新日志的链接。如果升级后弹出此错误，则可能意味着旧版.babelrc文件仍在 Rails 应用程序的根目录中。解决方案是删除.babelrc。