kidonng / unocss-preset-daisy

UnoCSS preset for daisyUI
https://unocss-preset-daisy.vercel.app
MIT License
220 stars 19 forks source link

Failed to load from vite.config.ts #3

Closed Heromyth closed 1 year ago

Heromyth commented 1 year ago

The Vit config

import {defineConfig} from 'vite'
import unocss from 'unocss/vite'
import {presetUno, transformerDirectives} from 'unocss'
import presetDaisy from 'unocss-preset-daisy'

export default defineConfig({
    plugins: [
        unocss({
            transformers: [transformerDirectives()],
            presets: [presetUno(), presetDaisy()],
        }),
    ],
})

The error message:

failed to load config from /home/vue/vue-admin-lite/vite.config.ts
error when starting dev server:
Error [ERR_REQUIRE_ESM]: require() of ES Module /home/vue/vue-admin-lite/node_modules/.pnpm/unocss-preset-daisy@1.2.0_syipy6kktksjeaafi66o3bl7vu/node_modules/unocss-preset-daisy/index.js from /home/vue/vue-admin-lite/vite.config.ts not supported.
Instead change the require of index.js in /home/vue/vue-admin-lite/vite.config.ts to a dynamic import() which is available in all CommonJS modules.

The version of Node is v16.17.0

kidonng commented 1 year ago

You need to configure your project to be ESM like this:

https://github.com/kidonng/unocss-preset-daisy/blob/493fc27ac6fdf10d692b944b694718f4a7c3671d/package.json#L14

Heromyth commented 1 year ago

It seems to lead to more errors:

Failed to load PostCSS config (searchPath: /home/vue/vue-admin-lite): [ReferenceError] module is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and '/home/vue/vue-admin-lite/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
ReferenceError: module is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and '/home/vue/vue-admin-lite/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
    at file:///home/vue/vue-admin-lite/postcss.config.js:1:1
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:533:24)

......

You need to configure your project to be ESM like this:

https://github.com/kidonng/unocss-preset-daisy/blob/493fc27ac6fdf10d692b944b694718f4a7c3671d/package.json#L14

kidonng commented 1 year ago

Either rename your postcss.config.js to postcss.config.cjs as said in the error, or change module.exports = {your: config} to export default {your: config}.

FYI: if you are not familiar with ESM, here's a good read. Official Vite templates use ESM by default, so you need to learn it eventually.

Heromyth commented 1 year ago

Thanks. It works now. I have uninstalled the postcss.