Getting an error trying to load a page. Rails 6, Ruby 2.7.1. Webpacker for javascript and SCSS From the Terminal (similar to the Chrome Console error )
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)
Gemfile
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)
}
}
This was a Rails 5 app that was unchanged for a year or two, then I tried to go back to work on it and some bundle change prevented uploading to Heroku. Was related to a bootstrap dependency on ffi which wouldn't install. Gave up and decided to go from Rails 5 to 6 and Webpacker which I was using for a similar app since it was related to the Bootstrap gem and could switch to Webpack version.
Innumerable gem switching on and off, bundle installs, removed and reinstalled node-modules
<path_to_my_app>/node_modules/@babel/plugin-syntax-dynamic-import/ is installed.
Similar issues reported in SO, but I think I've tried them all.
Thanks for any suggestions. Frustrating, because similar app works.
Webpacker changed from using .babelrc to babel.config.js between major versions 3 and 4. (Here is a link to the changelog where that is mentioned.) If this error pops up after the upgrade, it likely means that the legacy .babelrc file is still in the root of the Rails app. The solution is to delete .babelrc.