Unknown Extension Type: .css

[vaynevayne]

start on current file

[smcenlly]

It looks like your code is relying on some custom transformations and/or bundling configuration that doesn't exist or isn't configured when Quokka is running your code.

Quokka runs your code in node.js, which is probably different from how your code is expecting to be run (i.e. after transformations / bundling in the browser). You can read about how Quokka works here.

I expect you will have the same problem if you try and run your code outside of quokka (e.g. from the CLI with npx ts-node ./index.tsx)

Are you able to share your react-template project with us (e.g. as a GitHub repo)? We are happy to take a look to see if we can provide you with a Quokka Configuration that will allow you to run your tsx code with the .css import.

[marcos-roberto]

I also have the same problem, but when using Vite with Vuetify

[smcenlly]

With vite + vuetify, Quokka doesn't run without tweaking your vite.config.ts because of a limitation in vite-node, which Quokka uses to execute your code.

The error that you're seeing is coming from vite-node. You'll see the same thing if you attempt to run vite-node on your source file from the command-line. Unfortunately, this is not a limitation we can do anything about.

Quokka should work on some of your components (depending on whether they use vuetify) if you update your vite.config.ts to not include the vuetify plugin when Quokka is running. For example:

export default defineConfig({
  plugins: [
    Vue({
      template: { transformAssetUrls },
    }),
    ...(process.env.quokka ? [] : [Vuetify()]),
  ]
})

[smcenlly]

We've continued our investigation into this issue and have a solution for using Quokka with vuetify.

The problem stems from untransformed / unpackaged code in vuetify packaged node_modules. By default, vite-node will try and run code from node modules untransformed by vite. We can only assume this is to optimise performance. Unfortunately, this breaks when node.js tries to import these files with the error that you're seeing.

You can see this reported in various vitest issues (note: the vitest team created vite-node):

• https://github.com/vitest-dev/vitest/discussions/2677
• https://github.com/vitest-dev/vitest/issues/5283

To fix the problem, you will need to set vitest server configuration in your vite configuration file to tell vite-node to transform your dependencies. For vuetify this test.server configuration should fix the problem for you:

/// <reference types="vitest" />

import { defineConfig } from 'vite'

export default defineConfig({
  test: {
    server: {
      deps: {
        inline: ['vuetify'],
      },
    },
  },
})