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

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.

Recommended topics

Hot tags