ruby on rails - Failed to fetch dynamically imported module: http:localhost:3000viteassetsIndex-CVwj85P1.js - Stack Overflow

admin管理员组

文章数量:1395436

On using const Login = () => import('./login/Index.vue'); in my vue+rails project im getting this error: Failed to fetch dynamically imported module: http://localhost:3000/vite/assets/Index-CgjIgn68.js

On checking public/vite/.vite/manifest.json I was able to spot the file and on running the url http://localhost:3000/vite/assets/Index-CgjIgn68.js in the web I was getting a js file.

below is my vite.config.js file

import path from 'node:path';
import { defineConfig } from 'vite';
import vue2 from '@vitejs/plugin-vue2';
import ruby from 'vite-plugin-ruby';
import { createFilter } from 'vite';
import { transformWithEsbuild } from 'vite';
import fs from 'fs';

const filter = createFilter(['**/*.vue'], ['node_modules/**']);

const customTransform = {
  name: 'vue2-jsx-transform',
  async transform(code, id) {
    if (!filter(id)) return;
    console.log(`Processing: ${id}`);
    const scriptRegex = /<script\s+([^>]*)>([\s\S]*?)<\/script>/;
    const scriptMatch = scriptRegex.exec(code);
    if (scriptMatch) {
      console.log(`Transforming script block in: ${id}`);
      const attrs = scriptMatch[1];
      let loader = 'js';
      let options = {};

      if (attrs.includes('lang="jsx"')) {
        loader = 'jsx';
        options = {
          jsx: 'preserve',
          jsxFactory: 'h',
          jsxFragment: 'Fragment'
        };
      } else if (attrs.includes('lang="ts"')) {
        loader = 'ts';
      } else if (attrs.includes('lang="tsx"')) {
        loader = 'tsx';
        options = {
          jsx: 'preserve',
          jsxFactory: 'h',
          jsxFragment: 'Fragment'
        };
      }

      const { code: transformedScript } = await transformWithEsbuild(
        scriptMatch[2],
        id,
        {
          loader,
          ...options,
        }
      );
      code = code.replace(
        scriptMatch[0],
        `<script ${attrs}>${transformedScript}</script>`
      );
    }
    return code;
  },
};

// Find the correct path to variables.scss
const dashboardScssPath = path.resolve(__dirname, 'app/javascript/dashboard/assets/scss');
const variablesScssPath = fs.existsSync(path.join(dashboardScssPath, 'variables.scss')) 
  ? dashboardScssPath 
  : path.resolve(__dirname, 'app/javascript/dashboard/assets/scss/variables');

export default defineConfig({
  base: '/',
  define: {
    'global': 'globalThis',
    'process.env': '{}',
    'window.global': 'globalThis',
  },
  assetsInclude: ['**/*.svg', '**/*.png', '**/*.jpg', '**/*.jpeg', '**/*.gif'],
  plugins: [
    // customTransform,
    vue2({
      jsx:{
        compositionAPI: false,
        injectH: true,
        vModel: true,
        vOn: true
      },
      template: {
        compilerOptions: {
          whitespace: 'preserve'
        }
      }
    }),
    ruby({
      serverMiddleware: true,
    }),
  ],
  root: '.',
  build: {
    outDir: 'public/vite',
    emptyOutDir: true,
    manifest: true,
    assetsDir: 'assets',
    rollupOptions: {
      external: [
        // Add the pattern for all asset images that should be treated as external
        /^\/assets\//
      ],
      input: {
        application: path.resolve(__dirname, 'app/javascript/entrypoints/application.js'),
        portal: path.resolve(__dirname, 'app/javascript/entrypoints/portal.js'),
        sdk: path.resolve(__dirname, 'app/javascript/entrypoints/sdk.js'),
        superadmin: path.resolve(__dirname, 'app/javascript/entrypoints/superadmin.js'),
        superadmin_pages: path.resolve(__dirname, 'app/javascript/entrypoints/superadmin_pages.js'),
        survey: path.resolve(__dirname, 'app/javascript/entrypoints/survey.js'),
        v3app: path.resolve(__dirname, 'app/javascript/entrypoints/v3app.js'),
        widget: path.resolve(__dirname, 'app/javascript/entrypoints/widget.js'),
      },
      output: {
        entryFileNames: 'assets/[name]-[hash].js',
        chunkFileNames: 'assets/[name]-[hash].js',
        assetFileNames: 'assets/[name]-[hash].[ext]',
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return 'vendor';
          }
        }
      }
      // output: {
      //   assetFileNames: 'assets/[name].[hash].[ext]',
      //   entryFileNames: 'assets/[name].[hash].js',
      //   chunkFileNames: 'assets/[name].[hash].js',

      //   manualChunks: {
      //     vendor: ['vue', '@june-so/analytics-next']
      //   }
      // }
    },
    commonjsOptions: {
      include: [/node_modules/],
      exclude: [/node_modules\/@june-so\/analytics-next/],
      transformMixedEsModules: true,
    },
  },
  optimizeDeps: {
    include: [
      '@june-so/analytics-next',
      'vue',
      'vue-router',
      'vuex'
    ],
    exclude: [],
    esbuildOptions: {
      define: {
        global: 'globalThis'
      },
      plugins: []
    }
  },

  server: {
    // origin: 'http://127.0.0.1:3000',
    host: 'localhost',
    port: 3035,
    strictPort: true,
    hmr: {
      protocol: 'ws',
      host: 'localhost',
      port: 3035,
      // clientPort: 3035,
      overlay: true,
    },
    fs: {
      strict: false,
      allow: ['..']
    },
    // proxy: {
    //   '/vite-dev': 'http://localhost:3035'
    // },
    watch: {
      usePolling: false,
      // interval: 100
    },
    cors: {
      origin: 'http://localhost:3000/',
    },
    publicDir: 'public'
  },
  
  css: {
    preprocessorOptions: {
      scss: {
        // Don't use additionalData to import variables, instead use the alias below
        loadPaths: [
          path.resolve(__dirname, 'node_modules/@chatwoot/prosemirror-schema/src'),
          path.resolve(__dirname, 'node_modules/@chatwoot/prosemirror-schema'),
          path.resolve(__dirname, 'app/javascript/dashboard/assets/scss'),
        ],
      }
    },
    modules: {
      localsConvention: 'camelCase'
    }
  },

  resolve: {
    extensions: ['.js', '.jsx', '.vue', '.json', '.ts', '.tsx', '.scss'],
    alias: {
      '@chatwoot/prosemirror-schema': path.resolve(__dirname, 'node_modules/@chatwoot/prosemirror-schema'),
      '@chatwoot/prosemirror-schema/src': path.resolve(__dirname, 'node_modules/@chatwoot/prosemirror-schema/src'),
      'dashboard': path.resolve(__dirname, './app/javascript/dashboard'),
      'shared': path.resolve(__dirname, './app/javascript/shared'),
      'widget': path.resolve(__dirname, './app/javascript/widget'),
      'survey': path.resolve(__dirname, './app/javascript/survey'),
      '@': path.resolve(__dirname, './app/javascript'),
      v3: path.resolve(__dirname, './app/javascript/v3'),
      // // Update these paths based on where your variables.scss actually exists
      // '@/styles': path.resolve(__dirname, 'app/javascript/dashboard/assets/scss'),
      // 'styles': path.resolve(__dirname, 'app/javascript/dashboard/assets/scss'),
      // 'helpers': path.resolve(__dirname, 'app/javascript/helpers'),
      'process': 'process/browser',
      '@june-so/analytics-next': path.resolve(__dirname, 'node_modules/@june-so/analytics-next'),
      'vue': 'vue/dist/vue.esm.js',
      '~': path.resolve(__dirname, './app/javascript'),
      find: /@mui\/material/,
      replacement: path.resolve(__dirname, 'node_modules', '@mui', 'material'),
    }
  }
});

can anyone tell me how to handle this

本文标签：