#Getting `require is not defined` from astro frontmatter code

13 messages · Page 1 of 1 (latest)

wispy vine
#

I think astro is trying to create an SSR page when I call a function using CJS imports in the .astro frontmatter (it's locating this error in a chunks/dep-*.js file). Specifically I'm trying to resolve a tailwind config. Basic page that throws this error:

---
import type { Config } from 'tailwindcss'
import resolveConfig from 'tailwindcss/resolveConfig'
import tailwindConfig from '~/tailwind.config.cjs'

const { theme } = resolveConfig<Config>(tailwindConfig)
---

<div>Test</div>

Is this a bug or is there any way I need to prevent Astro from trying to parse this as SSR? I have output: 'static' in my config. Building works fine fwiw, this only happens when running dev.

obtuse badgeBOT
#
Quiet in here?

It looks like no-one has responded to your question yet. People might not be available right now or don’t know how to answer your question. Want an answer while you wait? Try asking our experimental bot in #1095492539085230272.

serene radish
#

I have some doubts about the mixture commonjs as of .cjs vs esm modules, is there not an .mjs ?
what is your config ? are you running server or hybrid ?

wispy vine
#

unfortunately the tailwind config gets imported by another (sass) plugin that only accepts common js, so it's not something I can change easily. Definitely part of the problem but I'm able to import and resolve the config from another typescript file in the same project, it only throws this error in a .astro file frontmatter.

my astro config looks like this, trying to run static generation only:

import { defineConfig } from 'astro/config'

import * as sass from 'sass'
import mkTwFunctions from 'sass-tailwind-functions/legacy'
import react from '@astrojs/react'
import tina from 'astro-tina'

const { pathname: twConfig } = new URL('./tailwind.config.cjs', import.meta.url)

// https://astro.build/config
export default defineConfig({
  output: 'static',
  integrations: [react(), tina()],
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          includePaths: ['node_modules', 'src/styles'],
          quietDeps: true,
          functions: {
            ...mkTwFunctions(sass, twConfig),
          },
        },
      },
    },
  },
})
serene radish
#

<@&1129102257422610512> this seems to me as a harder use case than I can think of, if any of you can spot something here or met similar issue.

plain nimbus
#

what is the sass plugin you are using? sass-tailwind-functions?

#

did you try this?

image.png
remote light
#

I'll experiment in a stackblitz

remote light
wispy vine
# plain nimbus did you try this?

ha yes that part is my contribution. 🙂 Vite is stuck on the legacy Sass APIs so it needs to use those. But both paths use require to import the tailwind config, hence enforcing CJS.

#

I think the problem is not necessarily the Typescript/CJS interop (works fine when building) but that during dev that page is getting treated as an SSR module for some reason. The error in the stackblitz mentions SSR:

6:31:58 PM [vite] Error when evaluating SSR module /tailwind.config.cjs:
|- anonymous@/home/projects/github-ogddud-wy7mux/tailwind.config.cjs:4:1
instantiateModule@file:///home/projects/github-ogddud-wy7mux/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:56104:15


6:31:58 PM [vite] Error when evaluating SSR module /home/projects/github-ogddud-wy7mux/src/pages/index.astro: failed to import "/tailwind.config.cjs"
|- anonymous@/home/projects/github-ogddud-wy7mux/tailwind.config.cjs:4:1
instantiateModule@file:///home/projects/github-ogddud-wy7mux/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:56104:15


 error   module is not defined
  File:
    /home/projects/github-ogddud-wy7mux/instantiateModule@file:/home/projects/github-ogddud-wy7mux/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:56104:15
  Stacktrace:
anonymous@/home/projects/github-ogddud-wy7mux/tailwind.config.cjs:4:1
instantiateModule@file:///home/projects/github-ogddud-wy7mux/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:56104:15
plain nimbus
#

maybe its time to move from sass