Tailwind CSS: Unhandled exception: require() of ES Module
How to fix this error I keep getting in WebStorm's notification sidebar when I am running
here is my package.json:
bun run dev:
Tailwind CSS: Unhandled exception: require() of ES Module D:\WebDev\nuxtApp\node_modules\@nuxtjs\tailwindcss\dist\runtime\merger.mjs not supported. Instead change the require of D:\WebDev\nuxtApp\node_modules\@nuxtjs\tailwindcss\dist\runtime\merger.mjs to a dynamic import() which is available in all CommonJS modules. Error [ERR_REQUIRE_ESM]: require() of ES Module D:\WebDev\nuxtApp\node_modules\@nuxtjs\tailwindcss\dist\runtime\merger.mjs not supported. Instead change the require of D:\WebDev\nuxtApp\node_modules\@nuxtjs\tailwindcss\dist\runtime\merger.mjs to a dynamic import() which is available in all CommonJS modules. at Object. (d:\WebDev\nuxtApp\.nuxt\tailwind.config.cjs:2:22)
Tailwind CSS: Unhandled exception: require() of ES Module D:\WebDev\nuxtApp\node_modules\@nuxtjs\tailwindcss\dist\runtime\merger.mjs not supported. Instead change the require of D:\WebDev\nuxtApp\node_modules\@nuxtjs\tailwindcss\dist\runtime\merger.mjs to a dynamic import() which is available in all CommonJS modules. Error [ERR_REQUIRE_ESM]: require() of ES Module D:\WebDev\nuxtApp\node_modules\@nuxtjs\tailwindcss\dist\runtime\merger.mjs not supported. Instead change the require of D:\WebDev\nuxtApp\node_modules\@nuxtjs\tailwindcss\dist\runtime\merger.mjs to a dynamic import() which is available in all CommonJS modules. at Object. (d:\WebDev\nuxtApp\.nuxt\tailwind.config.cjs:2:22)
{
"name": "nuxt-app",
"private": true,
"type": "module",
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
},
"dependencies": {
"@getbrevo/brevo": "^2.1.1",
"@vercel/speed-insights": "^1.0.11",
"nuxt": "^3.11.2",
"vue": "^3.4.27",
"vue-router": "^4.3.2"
},
"devDependencies": {
"@nuxt/image": "^1.7.0",
"@nuxtjs/device": "^3.1.1",
"@nuxtjs/tailwindcss": "^6.12.0",
"@storyblok/nuxt": "^6.0.10",
"@tailwindcss/forms": "^0.5.7",
"daisyui": "^4.11.1",
"nuxt-icon": "^0.6.10",
"nuxt-twemoji": "^3.5.0",
"nuxt-viewport": "^2.1.5"
}
}
{
"name": "nuxt-app",
"private": true,
"type": "module",
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
},
"dependencies": {
"@getbrevo/brevo": "^2.1.1",
"@vercel/speed-insights": "^1.0.11",
"nuxt": "^3.11.2",
"vue": "^3.4.27",
"vue-router": "^4.3.2"
},
"devDependencies": {
"@nuxt/image": "^1.7.0",
"@nuxtjs/device": "^3.1.1",
"@nuxtjs/tailwindcss": "^6.12.0",
"@storyblok/nuxt": "^6.0.10",
"@tailwindcss/forms": "^0.5.7",
"daisyui": "^4.11.1",
"nuxt-icon": "^0.6.10",
"nuxt-twemoji": "^3.5.0",
"nuxt-viewport": "^2.1.5"
}
}
1 Reply
here is my
PLEASE PING ME IF YOU REPLY
anyone?
nuxt.config.ts:
// https://nuxt.com/docs/api/configuration/nuxt-config
import fs from "node:fs";
import path from "node:path";
export default defineNuxtConfig({
devtools: { enabled: true },
devServer: {
https: {
key: fs.readFileSync(path.resolve(__dirname, './certs/localhost+2-key.pem')).toString(),
cert: fs.readFileSync(path.resolve(__dirname, './certs/localhost+2.pem')).toString(),
},
port: 3000 // Ensure the server runs on port 3000
},
modules: [
"@nuxtjs/tailwindcss",
"@nuxtjs/device",
"nuxt-viewport",
"nuxt-icon",
"@storyblok/nuxt",
"@nuxt/image",
"nuxt-twemoji",
],
vue: {
compilerOptions: {
isCustomElement: (tag) => tag === 'formester-popup'
},
},
storyblok: {
accessToken: process.env.NUXT_STORYBLOK_API_KEY
},
runtimeConfig: {
StoryblokApiKey: process.env.NUXT_STORYBLOK_API_KEY,
public: {
NodeEnv: process.env.NUXT_NODE_ENV,
}
},
router: {
options: {
scrollBehaviorType: "smooth",
},
},
app: {
pageTransition: {
name: "page",
mode: "out-in",
},
},
viewport: {
breakpoints: {
desktop: 1024,
desktopMedium: 1280,
desktopBetween: 1296,
desktopWide: 1600,
mobile: 320,
mobileMedium: 375,
mobileWide: 425,
mobileWideButSmaller: 480,
mobileOther: 532,
tabletLandscape: 1035,
tablet: 768,
},
},
})
// https://nuxt.com/docs/api/configuration/nuxt-config
import fs from "node:fs";
import path from "node:path";
export default defineNuxtConfig({
devtools: { enabled: true },
devServer: {
https: {
key: fs.readFileSync(path.resolve(__dirname, './certs/localhost+2-key.pem')).toString(),
cert: fs.readFileSync(path.resolve(__dirname, './certs/localhost+2.pem')).toString(),
},
port: 3000 // Ensure the server runs on port 3000
},
modules: [
"@nuxtjs/tailwindcss",
"@nuxtjs/device",
"nuxt-viewport",
"nuxt-icon",
"@storyblok/nuxt",
"@nuxt/image",
"nuxt-twemoji",
],
vue: {
compilerOptions: {
isCustomElement: (tag) => tag === 'formester-popup'
},
},
storyblok: {
accessToken: process.env.NUXT_STORYBLOK_API_KEY
},
runtimeConfig: {
StoryblokApiKey: process.env.NUXT_STORYBLOK_API_KEY,
public: {
NodeEnv: process.env.NUXT_NODE_ENV,
}
},
router: {
options: {
scrollBehaviorType: "smooth",
},
},
app: {
pageTransition: {
name: "page",
mode: "out-in",
},
},
viewport: {
breakpoints: {
desktop: 1024,
desktopMedium: 1280,
desktopBetween: 1296,
desktopWide: 1600,
mobile: 320,
mobileMedium: 375,
mobileWide: 425,
mobileWideButSmaller: 480,
mobileOther: 532,
tabletLandscape: 1035,
tablet: 768,
},
},
})