Webpacker error related to module babel-plugin-syntax-dynamic-import

Question

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.

Answer 1

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.