title: Webpacker error related to module babel-plugin-syntax-dynamic-import
body: <p>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 )</p>
  <pre><code>Module build failed (from ./node_modules/babel-loader/lib/index.js):
  Error: Cannot find module 'babel-plugin-syntax-dynamic-import' from '&lt;path_to_my_app&gt;'
  - Did you mean &quot;@babel/syntax-dynamic-import&quot;?
   at Function.resolveSync [as sync] (&lt;path_to_my_app&gt;/node_modules/resolve/lib/sync.js:89:15)
   at resolveStandardizedName (&lt;path_to_my_app&gt;/node_modules/@babel/core/lib/config/files/plugins.js:101:31)
   at resolvePlugin (&lt;path_to_my_app&gt;/node_modules/@babel/core/lib/config/files/plugins.js:54:10)
   at loadPlugin (&lt;path_to_my_app&gt;/node_modules/@babel/core/lib/config/files/plugins.js:62:20)
   at createDescriptor (&lt;path_to_my_app&gt;/node_modules/@babel/core/lib/config/config-descriptors.js:154:9)
   at &lt;path_to_my_app&gt;/node_modules/@babel/core/lib/config/config-descriptors.js:109:50
   at Array.map (&lt;anonymous&gt;)
   at createDescriptors (&lt;path_to_my_app&gt;/node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
   at createPluginDescriptors (&lt;path_to_my_app&gt;/node_modules/@babel/core/lib/config/config-descriptors.js:105:10)
   at plugins (&lt;path_to_my_app&gt;/node_modules/@babel/core/lib/config/config-descriptors.js:40:19)
   at mergeChainOpts (&lt;path_to_my_app&gt;/node_modules/@babel/core/lib/config/config-chain.js:319:26)
   at &lt;path_to_my_app&gt;/node_modules/@babel/core/lib/config/config-chain.js:283:7
   at Generator.next (&lt;anonymous&gt;)
   at buildRootChain (&lt;path_to_my_app&gt;/node_modules/@babel/core/lib/config/config-chain.js:120:29)
   at buildRootChain.next (&lt;anonymous&gt;)
   at loadPrivatePartialConfig (&lt;path_to_my_app&gt;/node_modules/@babel/core/lib/config/partial.js:95:62)
   at loadPrivatePartialConfig.next (&lt;anonymous&gt;)
   at Function.&lt;anonymous&gt; (&lt;path_to_my_app&gt;/node_modules/@babel/core/lib/config/partial.js:120:25)
   at Generator.next (&lt;anonymous&gt;)
   at evaluateSync (&lt;path_to_my_app&gt;/node_modules/gensync/index.js:244:28)
   at Function.sync (&lt;path_to_my_app&gt;/node_modules/gensync/index.js:84:14)
   at Object.&lt;anonymous&gt; (&lt;path_to_my_app&gt;/node_modules/@babel/core/lib/config/index.js:43:61)
   at Object.&lt;anonymous&gt; (&lt;path_to_my_app&gt;/node_modules/babel-loader/lib/index.js:151:26)
   at Generator.next (&lt;anonymous&gt;)
   at asyncGeneratorStep (&lt;path_to_my_app&gt;/node_modules/babel-loader/lib/index.js:3:103)
   at _next (&lt;path_to_my_app&gt;/node_modules/babel-loader/lib/index.js:5:194)
   at &lt;path_to_my_app&gt;/node_modules/babel-loader/lib/index.js:5:364
   at new Promise (&lt;anonymous&gt;)
   at Object.&lt;anonymous&gt; (&lt;path_to_my_app&gt;/node_modules/babel-loader/lib/index.js:5:97)
   at Object._loader (&lt;path_to_my_app&gt;/node_modules/babel-loader/lib/index.js:231:18)
  </code></pre>
  <p>Gemfile</p>
  <pre class="lang-rb prettyprint-override"><code>source 'https://rubygems.org'
  git_source(:github) do |repo_name|
    repo_name = &quot;#{repo_name}/#{repo_name}&quot; unless repo_name.include?(&quot;/&quot;)
    &quot;https://github.com/#{repo_name}.git&quot;
  end
  
  ruby '2.7.1'
  gem 'rails', '~&gt; 6.0.1'
  gem 'pg' , '~&gt; 0.18'
  gem 'puma'
  gem 'webpacker', '~&gt; 5.0'
  gem 'bootsnap', require: false
  gem 'jbuilder' , '~&gt; 2.9'
  gem 'bcrypt', '~&gt; 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', '~&gt; 1'
  
  group :development do
    gem 'web-console', '&gt;= 3.5.1'
    gem 'rubocop-rails'
    gem 'awesome_print' 
    gem 'super_awesome_print'
    gem &quot;rails-erd&quot; 
    gem 'heroku_db_restore'
  end # development
  
  group :development, :test do
    gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
    gem 'pry-byebug' 
    gem &quot;better_errors&quot; 
    gem 'binding_of_caller'
    gem 'dotenv-rails' # 
    gem 'capybara', '~&gt; 2.13'
    gem 'selenium-webdriver'
  end #  development, test
  
  group :test do
    gem 'minitest-reporters', '1.1.9'
    gem 'simplecov', :require =&gt; false
    gem 'database_cleaner-active_record'
  end # test
  </code></pre>
  <p><code>app/javascripts/packs/application.js</code></p>
  <pre class="lang-js prettyprint-override"><code>import 'core-js/stable'
  import 'regenerator-runtime/runtime'
  
  import 'leaflet'
  import &quot;leaflet.timeline&quot;
  import L from 'leaflet'
  import 'leaflet/dist/leaflet.css'
  
  require(&quot;@rails/ujs&quot;).start()
  require(&quot;turbolinks&quot;).start()
  require(&quot;@rails/activestorage&quot;).start()
  require(&quot;jquery&quot;)
  
  import &quot;bootstrap&quot;
  import 'bootstrap/dist/js/bootstrap'
  </code></pre>
  <p><code>config/webpack/environment.js</code></p>
  <pre><code>const webpack = require('webpack')
  
  environment.plugins.append('Provide',
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery/src/jquery', // Is the &quot;jquery/src/&quot; prefix needed ? Not the first time I've seen this
      jquery: 'jquery/src/jquery'
     }))
    
  module.exports = environment
  </code></pre>
  <p><code>babel.config.json</code></p>
  <pre><code>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 &quot;development&quot;, ' +
          '&quot;test&quot;, and &quot;production&quot;. Instead, received: ' +
          JSON.stringify(currentEnv) +
          '.'
      )
    }
  
    return {
      presets: [
        isTestEnv &amp;&amp; [
          '@babel/preset-env',
          {
            targets: {
              node: 'current'
            }
          }
        ],
        (isProductionEnv || isDevelopmentEnv) &amp;&amp; [
          '@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 &amp;&amp; '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)
    }
  }
  </code></pre>
  <p>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 <code>bootstrap</code> dependency on <code>ffi</code> 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.</p>
  <p>Innumerable gem switching on and off, <code>bundle installs</code>, removed and reinstalled <code>node-modules</code></p>
  <p><code>&lt;path_to_my_app&gt;/node_modules/@babel/plugin-syntax-dynamic-import/</code> is installed.</p>
  <p>Similar issues reported in SO, but I think I've tried them all.</p>
  <p>Thanks for any suggestions. Frustrating, because similar app works.</p>