Component not being rendered with Vite + preact-ts template #298

Activity

1. keithamus commented on Dec 24, 2022

   

   keithamus

   on Dec 24, 2022

   Contributor

   More actions

   Looks like the transpile step might be causing issues with the class name. You can add the following to see if it is a problem:

   import {controller} from '@github/catalyst';
   
   @controller
   class TestThingElement extends HTMLElement {
   
     static get name() {
       return 'TestThingElement'
     }
   
     connectedCallback() {
       this.innerHTML = 'Hello World!';
     }
   }

   The static get name is a way to ensure your class has the right name. It's not ideal but it can work around some transpiler issues. Let me know if the above code works for you. If it does it's likely an issue with the transpiler changing the name.

   I'm not super familiar with Vite so unfortunately I can't tell you if there's some configuration option to enable to get it to not change the class name. But at least if we can pin it down to that we might be able to figure out what to do next.
2. miyuushi commented on Dec 25, 2022

   

   miyuushi

   on Dec 25, 2022

   Author

   More actions

   Yeah, that definitely solves my issue. Certainly not ideal having to add that everywhere, but at least that's the problem.
3. keithamus commented on Dec 25, 2022

   

   keithamus

   on Dec 25, 2022

   Contributor

   More actions

   What does your Vite configuration look like?
4. miyuushi commented on Dec 25, 2022

   

   miyuushi

   on Dec 25, 2022

   Author

   More actions

   export default defineConfig({
     server: {
       proxy: {
         '*' : {
           target: 'http://localhost:5228',
           changeOrigin: true
         }
       }
     },
     esbuild: {
       keepNames: true,
     },
     optimizeDeps: {
       esbuildOptions: {
         keepNames: true,
       },
     },
     build: {
       target: [
         'esnext'
       ],
       manifest: true,
       rollupOptions: {
         input: {
           app: resolve(__dirname, 'src/js/app.ts'),
           playground: resolve(__dirname, 'src/js/playground.tsx')
         },
         external: ['preact'],
         output: {
           globals: {
             preact: 'Preact',
           },
         },
       },
     },
     plugins: [
       preact({
         babel: {
           babelrc: true,
           parserOpts: {
             plugins: ['decorators-legacy'],
           },
           presets: [
             '@babel/preset-typescript'
           ],
           plugins: [
             ['@babel/plugin-transform-typescript', { allowDeclareFields: true }],
             ['@babel/plugin-proposal-decorators', { version: "legacy" }],
             "@babel/plugin-proposal-private-methods",
             "@babel/plugin-proposal-private-property-in-object",
             '@babel/plugin-proposal-class-properties'
           ]
         }
       }),
       tsconfigPaths()
     ],
   })
5. miyuushi commented on Dec 25, 2022

   

   miyuushi

   on Dec 25, 2022

   Author

   More actions

   I've tried messing with the babel plugins, hasn't really helped yet.
6. keithamus commented on Dec 25, 2022

   

   keithamus

   on Dec 25, 2022

   Contributor

   More actions

   You could try removing Babel. esbuild should be able to transform any stage 4 features, as well as decorators and jsx, so Babel shouldn't be needed.
7. miyuushi commented on Dec 25, 2022

   

   miyuushi

   on Dec 25, 2022

   Author

   More actions

   Not sure how, to be honest. The preact plugin doesn't really have an option for it.