Cannot read properties of null (reading '__isOptionsFunction')

[jcbbb]

What version of Tailwind CSS are you using?

v3.4.3

What build tool (or framework if it abstracts the build tool) are you using?

Nuxt 3.11.2, @nuxtjs/tailwindcss 6.12.0, @shuriken-ui/next 3.1.5, @shuriken-ui/tailwind

What version of Node.js are you using?

v20.12.2

What browser are you using?

Chromium, Firefox

What operating system are you using?

Ubuntu, MacOS

Reproduction URL

https://github.com/jcbbb/tw-repro

Describe your issue

For some reason, resolveConfig.js is throwing Cannot read properties of null (reading '__isOptionsFunction') error, and I am not really sure if it's tailwindcss error or the libraries that I added. The screenshot below shows where the error is coming from. For some reason, plugins array contains null values. I tried to patch it myself by filtering out null values, but then classes are not being generated :(

Let me know if I should provide more info

[wongjn]

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/@nuxtjs+tailwindcss@6.12.0_rollup@4.16.4/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().

[jcbbb]

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.