Vite/Rollup: Uncaught TypeError: CreateListFromArrayLike called on non-object (@lwc/rollup-plugin + @lwc/compiler)

lukethacoder commented 1 year ago

Description

When attempting to spin up a Vite project using the @lwc/rollup-plugin, the CSS imports in the html template are not resolved as imports, but imported as strings (causing the @lwc/compiler to fall over).

I am aware this might not be a LWC specific issue but potentially a bigger issue with the way Vite handles HMR imports. Happy to close this if this issue is not directly caused by something the LWC compiler is doing.

Steps to Reproduce

https://stackblitz.com/edit/salesforce-lwc-vite-css-error?file=vite.config.js

// vite.config.js
import { defineConfig, normalizePath } from 'vite'
import { resolve } from 'path'
import lwc from '@lwc/rollup-plugin'

const rootDir = normalizePath(resolve('./'))
console.log('rootDir ', rootDir)

export default defineConfig({
  rootDir,
  input: './src/main.js',

  build: {
    rollupOptions: {
      rootDir: './',
      input:  'src/main.js',

      output: {
        file: 'dist/main.js',
        format: 'esm',
      },
    },
  },

  // enforce: 'pre',
  plugins: [
    lwc({
      rootDir,
      exclude: ["**/*.mjs"]
    }),
  ],
})

https://github.com/salesforce/lwc/blob/8735fb96c27890fb56c7d8d5371a24f743e37cfa/packages/%40lwc/compiler/src/transformers/template.ts#L95-L106

Minor semi-related bug is Vite complaining about default CSS imports:

! Default and named imports from CSS files are deprecated. Use the ?inline query instead. For example: import _implicitStylesheets from "./counter.css?inline

Expected Results

CSS files are imported correctly as functions so the template can render the actual CSS for the LWC.

Actual Results

-! Uncaught TypeError: CreateListFromArrayLike called on non-object

Version

lwc: 2.41.0 Node: v16.14.2

Possible Solution

May require some sort of Vite/Rollup plugin to transform the imports? Not too sure how tightly coupled the issue is to the lwc compiler.

Additional context/Screenshots

nolanlawson commented 1 year ago

It looks like Vite assumes that when you do import './foo.css' from JavaScript, you want it to create a <style> tag and hoist it into the <head>. This is not at all what LWC CSS imports do, so yeah, I'm guessing someone would need to create a custom Vite CSS plugin to handle LWC's treatment of CSS imports.

mlaso commented 1 year ago

I was interested in running Vite+LWC since I've been using Vite for Lit (it's really amazingly fast) and encountered this topic. I've run into the exact same problem (and other problems when using Typescript). You can use vite-plugin-inspector to debug how transformations are performed. I didn't delve into details (yet), but the "culprit" is that vite plugin: post-css (screenshot attached):

I cannot give you more details as I'm new in this world of Vite-plugins (I've using the official plugins only), but these days i will give it a try to see how far can i go.

My guess is that we will need some kind of plugin derived from the lwc rollup plugin (or asaddition) to play nice with the Vite stack

salesforce / lwc