1

I've been playing with Vitejs, Lit-element & TailwindCSS to upgrade my skills. Tried to deploy a website based on components. Everything is good with the npm run dev, my website works in the preview.

The real problem is with the npm run build. Even if the files are there

the preview in a browser is empty, components are not being inserted but css and js are applied(?).

My vite.config.ts

import { resolve } from 'path';
import { defineConfig } from 'vite';

// once root been changed, the outDir changes too
const outDir = resolve(__dirname, 'dist');

// https://vitejs.dev/config/
export default defineConfig({
  build: {
    outDir,
    emptyOutDir: true,
    cssCodeSplit: true,
    minify: false,
    lib: {
      entry: './src/index.ts',
      formats: ['es'],
      fileName: (format) => `index.${format}.js`
    },
    manifest: true,
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
      },
      external: /^lit/
    }
  }
})

After loading index.html in a browser i see errors in developer tools

I'm learning and really don't know what I'm doing and cannot find proper docs on my own, so I'm asking here.

Thank you for any help.

devillived
  • 11
  • 2
  • Hi! For a more specific answer please provide a minimal reproduction link (maybe with Stackblitz). It looks like the custom elements are not upgrading in the html. That suggests their Javascript is not being executed. In your built `.cjs` file, are the Lit elements declared or imported via a side effect import - and is any JS executing? I noticed your script tag has type="module". That attribute causes the script to be handled as an ES module - should be `.mjs`. Vite has a LitTS scaffold which may help: https://github.com/vitejs/vite/tree/main/packages/create-vite/template-lit-ts – YouCodeThings Oct 24 '22 at 18:38
  • Hello, thank you for a response. Here is the code: https://stackblitz.com/edit/js-8ma7h4?file=index.html It's a really simple website with json as a template source. – devillived Oct 24 '22 at 21:36
  • Thank you! It looks like it may work after removing the `cjs` option from the vite config: `formats: ['es', 'cjs'],` -> `formats: ['es'],`. Basically, your authored `index.html` needs to remove `type="module"` for the `cjs` format build and include it for the `es` format build. – YouCodeThings Oct 24 '22 at 23:26
  • Thanks a million but it didn't make any positive outcome. I edited the OP with the new config. Also, added a screen of error in a browser. Maybe this will help. – devillived Oct 25 '22 at 23:25
  • Ah that image is super helpful thank you! Origin is null because it's your local file system. It looks like you're serving the build output from Vite directly from your filesystem. This won't work for browser security reasons. See https://vitejs.dev/guide/#command-line-interface I think what you're after is `vite preview` which will build your code for production and then run a local webserver. Then navigate to the url emitted from running that command to view your production site. Other references: https://stackoverflow.com/a/66035942/6421793 – YouCodeThings Oct 26 '22 at 17:15
  • 1
    So, the conclusion is that everything is well prepared and the only thing i have to do is to upload /dist/ to the server and get access to it with the domain? I will try it and get back with feedback. BTW, I just realised who you are and your bio sounded so familiar. Thank you and all your team for your work and especially those cool video tutorials on Lit! – devillived Oct 26 '22 at 19:53
  • If `vite preview` is working or some other local testing server is working on the build output, then yes, it should all be well prepared. However if it isn't let me know and we can continue debugging. You're most welcome! – YouCodeThings Oct 26 '22 at 20:15

0 Answers0