CODEWITHSUNDEEP
reactjswebpacknext.jstailwind-cssvercel
JAKK
JAKK

Reputation: 63

TypeError: Cannot read property 'theme' of undefined at runMicrotasks

I'm currently facing an issue that i don't know anything about.

I'm building an app using Next.JS, TailwinCSS, Npm and vercel to deploy.

In fact, when i start the server, i'm having this issue (also when deploying on Vercel):

    ./node_modules/next/dist/compiled/css-loader/cjs.js??ruleSet[1].rules[2].oneOf[5].use[1]!./node_modules/next/dist/compiled/postcss-loader/cjs.js??ruleSet[1].rules[2].oneOf[5].use[2]!./node_modules/react-loader-spinner/dist/loader/css/react-spinner-loader.css
TypeError: Cannot read property 'theme' of undefined
    at runMicrotasks (<anonymous>)

I had some issues at a time, with TailwindCSS because of certain properties not running, i don't know if the reinstallation had an impact or not...?

If someone have any idea, Thank you for your time !

Upvotes: 2

Views: 4177

Answers (2)

Hillkim Henry
Hillkim Henry

Reputation: 2929

Replace

'@tailwindcss/jit': {}

  • with

tailwindcss: {}

in your postcss.config.js like

   // https://tailwindcss.com/docs/using-with-preprocessors
    module.exports = {
      plugins: {
        tailwindcss: {}, // remove '@tailwindcss/jit': {},
        autoprefixer: {},
      },
    }

Then update tailwind.config.js and add

mode:'jit'

module.exports = {
  mode:'jit', // <= add here 
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*. {js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Also check this pr and issue

Upvotes: 2

ysuzuki19
ysuzuki19

Reputation: 121

I was facing an similar issue.

My error log is following. It was occured after updating packages.

> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
error - ./node_modules/next/dist/compiled/css-loader/cjs.js??ruleSet[1].rules[2].oneOf[6].use[1]!./node_modules/next/dist/compiled/postcss-loader/cjs.js??ruleSet[1].rules[2].oneOf[6].use[2]!./styles/globals.css
TypeError: Cannot read property 'theme' of undefined

I could not understand what happen.

So I do

rm -r node_modules
rm package-lock.json
rm -r .next
git reset --hard <commit id>
npm install
npm start

If that doesn't work, git clone again may work.

How about this?

Thanks!

Upvotes: 1

Related Questions