Error in vite packaged web site

Help Requests
1

I have been migrating a Web site from Aurelia 1 to Aurelia 2. I used this template as a base. After migrating 20 or30 pages I tested the producuction deployment and it seemed OK. Now after adding quite a few more pages I have found that the production deployment doesn’t work, but in dev it works fine. First I had this issue with vite/rollup and had to add esbuild: { target: es2022’ }. That got me one step further in the production deployment, which is just using vite build.

Now I am getting an error in the runtime-html when it tries to add an event listener. The issue seems to be that app isn’t seen as a custom-element. The metadata is missing the au:resource:custom-element (and au:resource) and only has au:annotation:di:parameters and au:resource:route-configuration, so when it checks to see if app is a custom element it isn’t one and doesn’t set the host.

I should have made more snapshots as I went, because then I could more easily narrow down what caused this to break. Before spending too much time trying to figure out what might be causing this, I thought it would be a good idea to ask for help narrowing down the problem. Any suggestions on how I can figure out what is causing this? Maybe look for the code that builds the metadata?

1 Like
2

It seems like something in my setup is making vite not recognize Aurelia conventions. I can add the customElement decorator and it gets one step further. Then I had to directly import the app.html, which got another step further, then the style sheet, etc. However, it broke down because vite didn’t like the import of the .html file so I added vite configuration to let Aurelia handle that, but that didn’t work with vite in a dev environment. I have a feeling something is off in my configuration. Here is what I have and have tried:

import { defineConfig } from 'vite';
import { readFileSync } from 'fs';
import { certFilePath, keyFilePath } from './aspnetcore-https';
import { nodePolyfills } from 'vite-plugin-node-polyfills';
import aurelia from '@aurelia/vite-plugin';
export default defineConfig({
    server: {
        https: {
            key: readFileSync(keyFilePath),
            cert: readFileSync(certFilePath)
        },
        port: 5002,
        strictPort: true,
        proxy: {
            '/api': {
                target: 'https://localhost:5001/',
                changeOrigin: true,
                secure: false
            }
        },
        fs: {
            allow: ['..']
        }
    },
    // Remove deprecation warnings related to Bootstrap sass saying that the @import
    // rule in Sass that is deprecated and will be removed in Dart Sass 3.0.0
    css: {
        preprocessorOptions: {
            scss: {
                quietDeps: true
            }
        }
    },
    plugins: [
        aurelia({
            useDev: true,
//            include: '**/*.html' // <-- this causes problems in dev mode
        }),
        nodePolyfills()
    ],
    build: {
        outDir: 'dist',
        emptyOutDir: true,
        sourcemap: true,
        minify: false,
        rollupOptions: {
            input: 'src/main.ts', 
            output: {
                entryFileNames: 'dist/[name].js',
                chunkFileNames: 'dist/[name].js',
                assetFileNames: 'dist/[name].[ext]'
            }
        }
    },
    publicDir: 'public'
});

and my tsconfig.json:

{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "node",
    "skipLibCheck": true,
    "target": "ES2020",
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "importHelpers": true,
    "sourceMap": true,
    "noEmit": true
  },
  "include": [
    "src",
    "node_modules/@types"
  ],
  "files": [
    "src/resource.d.ts"
  ]
}

This is getting more complicated, but still simpler than Webpack so I would like to stick with Vite if possible.

3

It seems like the problem is when the vite config contained the rollupOptions for input and output. I removed that and let vite find the index.html and now it seems to work fine. When I look at what is built, they look pretty much the same except that rollup now finds and updates the script tag and picks the output name.