Giter Club home page Giter Club logo

Comments (2)

wongjn avatar wongjn commented on June 11, 2024 1

Could be something to do with @shuriken-ui/next – removing it removes the error. It could also be @nuxt/tailwindcss, as the null comes from a cached .nuxt/tailwindcss.config.js it reads, which has (notice the null in the plugins):

module.exports = (() => {const cfg=config;cfg["presets"] = [];cfg["presets"]["0"] = {"darkMode":"class","content":[],"plugins":[null,

As of note, the official Tailwind documentation does not mention using @nuxt/tailwindcss to integrate Tailwind into Nuxt.js.

I decided to delve a little deeper. It seems to be an incompatibility with plugin.withOptions() usage when extending a Tailwind configuration using the tailwindcss:config hook provided by @nuxtjs/tailwindcss. When configuration is modified in this hook, the configuration is serialized in .nuxt/tailwind.config.cjs using JSON.stringify(). However, when a plugin uses plugin.withOptions(), this returns a function. When one does JSON.stringify() on the function in this context, it resolves to null. This is the null we end up seeing in the .nuxt/tailwind.config.cjs that gets used later, that causes the error. One can reproduce the error with the following minimal configuration:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  hooks: {
    'tailwindcss:config'(config) {
      config.plugins = [
        require('tailwindcss/plugin').withOptions(() => ({}))
      ]
    },
  },
  modules: ["@nuxtjs/tailwindcss"]
})

Which gives:

// generated by the @nuxtjs/tailwindcss <https://github.com/nuxt-modules/tailwindcss> module at 4/28/2024, 8:10:01 PM
const configMerger = require("/home/user/projects/test/node_modules/.pnpm/@[email protected][email protected]/node_modules/@nuxtjs/tailwindcss/dist/runtime/merger.mjs");

const inlineConfig = {"content":[],"theme":{"extend":{}},"plugins":[]};

const config = [
require("./../tailwind.config.js")
].reduce((prev, curr) => configMerger(curr, prev), configMerger(inlineConfig, { content: ["/home/user/projects/test/components/**/*.{vue,js,jsx,mjs,ts,tsx}","/home/user/projects/test/components/global/**/*.{vue,js,jsx,mjs,ts,tsx}","/home/user/projects/test/components/**/*.{vue,js,jsx,mjs,ts,tsx}","/home/user/projects/test/layouts/**/*.{vue,js,jsx,mjs,ts,tsx}","/home/user/projects/test/pages/**/*.{vue,js,jsx,mjs,ts,tsx}","/home/user/projects/test/plugins/**/*.{js,ts,mjs}","/home/user/projects/test/composables/**/*.{js,ts,mjs}","/home/user/projects/test/utils/**/*.{js,ts,mjs}","/home/user/projects/test/{A,a}pp.{vue,js,jsx,mjs,ts,tsx}","/home/user/projects/test/{E,e}rror.{vue,js,jsx,mjs,ts,tsx}","/home/user/projects/test/app.config.{js,ts,mjs}"] }));

module.exports = (() => {const cfg=config;cfg["plugins"] = [null];;return cfg;})()

This relates to @shuriken-ui/nuxt since it uses @shuriken-ui/tailwind. This package uses a preset that includes @tailwindcss/typography, which uses plugin.withOptions().

from tailwindcss.

jcbbb avatar jcbbb commented on June 11, 2024

I found a fix after reading this https://github.com/nuxt-modules/tailwindcss/releases/tag/v6.12.0. If anyone comes across this issue, you should include your presets/plugins in tailwind.config.js file. I was including them in tailwindcss:config hook and getting that error.

from tailwindcss.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.