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.