refactor(front-end): add vue webpack alias in the frontend/vue recipe

CHANGELOG.md

@@ -8,6 +8,7 @@ Features:
 Fixes:
   - Explicitly install project specified node version in CircleCI build [#352](https://github.com/platanus/potassium/pull/352)
   - Update marcel gem (shrine's mime type analyzer) to avoid mimemagic dependency [#357](https://github.com/platanus/potassium/pull/357)
+  - Add Vue alias in the Webpacker config to avoid strange behaviors of external packages [#358](https://github.com/platanus/potassium/pull/358)
 
 ## 6.2.0
 

lib/potassium/recipes/front_end.rb

@@ -26,6 +26,7 @@ def create
       if value == :vue
         recipe.setup_vue_with_compiler_build
         recipe.setup_jest
+        recipe.setup_vue_aliases
         if get(:api) == :graphql
           recipe.setup_apollo
         end
@@ -107,6 +108,15 @@ def setup_apollo
     )
   end
 
+  def setup_vue_aliases
+    webpack_env_file = 'config/webpack/environment.js'
+    insert_into_file(
+      webpack_env_file,
+      webpack_vue_aliases,
+      before: "module.exports = environment"
+    )
+  end
+
   private
 
   def frameworks(framework)
@@ -199,6 +209,18 @@ def application_js_content
     JS
   end
 
+  def webpack_vue_aliases
+    <<~JS
+      environment.config.merge({
+        resolve: {
+          alias: {
+            'vue$': 'vue/dist/vue.esm.js',
+          },
+        },
+      });
+    JS
+  end
+
   def tailwind_client_css
     <<~CSS
       @import 'tailwindcss/base';

spec/features/front_end_spec.rb

@@ -14,6 +14,7 @@
   let(:application_css_file) { IO.read(application_css_path) }
   let(:tailwind_config_file) { IO.read("#{project_path}/tailwind.config.js") }
   let(:rails_css_file) { IO.read("#{project_path}/app/assets/stylesheets/application.css") }
+  let(:environment_file) { IO.read("#{project_path}/config/webpack/environment.js") }
 
   it "creates a project without a front end framework" do
     remove_project_directory
@@ -46,6 +47,11 @@
       expect(rails_css_file).not_to include('*= require_tree', '*= require_self')
     end
 
+    it "creates project with a vue module alias included" do
+      expect(environment_file).to include("environment.config.merge({")
+      expect(environment_file).to include("'vue$': 'vue/dist/vue.esm.js',")
+    end
+
     it "creates a vue project with tailwindcss" do
       expect(node_modules_file).to include("\"tailwindcss\"")
       expect(application_css_file).to include(