Tailwindcss-module: TypeError: Cannot read property 'split' of undefined

Created on 18 Mar 2021 · 3Comments · Source: nuxt-community/tailwindcss-module

Version

@nuxtjs/tailwindcss: v4.0.1
tailwindcss: v2.0.4
nuxt: v2.15.3

Steps to reproduce

Fresh install of all dependencies. Enable jit: true in nuxt.config.js and run npm run dev

My full Tailwind-specific config is as follows:

tailwindcss: {
  cssPath: '~/assets/css/app.css',
  configPath: 'tailwind.config.js',
  exposeConfig: false,
  config: {},
  jit: true,
}

What is Expected?

Should run without error once jit option is set to true. If I disable jit, it builds and runs fine.

What is actually happening?

When running npm run dev with jit set to true I get the following error:

Error in ./assets/css/app.css
Module build failed (from ./node_modules/extract-css-chunks-webpack-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: Cannot read property 'split' of undefined
    at replaceSelector (/Users/michaelpumo/Documents/websites/work-less-ordinary/node_modules/@tailwindcss/jit/src/lib/expandApplyAtRules.js:83:12)
    at /Users/michaelpumo/Documents/websites/work-less-ordinary/node_modules/@tailwindcss/jit/src/lib/expandApplyAtRules.js:115:31
    at /Users/michaelpumo/Documents/websites/work-less-ordinary/node_modules/postcss/lib/container.js:115:18
    at /Users/michaelpumo/Documents/websites/work-less-ordinary/node_modules/postcss/lib/container.js:74:18
    at Root.each (/Users/michaelpumo/Documents/websites/work-less-ordinary/node_modules/postcss/lib/container.js:60:16)
    at Root.walk (/Users/michaelpumo/Documents/websites/work-less-ordinary/node_modules/postcss/lib/container.js:71:17)
    at Root.walkRules (/Users/michaelpumo/Documents/websites/work-less-ordinary/node_modules/postcss/lib/container.js:113:19)
    at /Users/michaelpumo/Documents/websites/work-less-ordinary/node_modules/@tailwindcss/jit/src/lib/expandApplyAtRules.js:114:18
    at LazyResult.runOnRoot (/Users/michaelpumo/Documents/websites/work-less-ordinary/node_modules/postcss/lib/lazy-result.js:303:16)
    at LazyResult.runAsync (/Users/michaelpumo/Documents/websites/work-less-ordinary/node_modules/postcss/lib/lazy-result.js:355:26)
    at LazyResult.async (/Users/michaelpumo/Documents/websites/work-less-ordinary/node_modules/postcss/lib/lazy-result.js:205:30)
    at LazyResult.then (/Users/michaelpumo/Documents/websites/work-less-ordinary/node_modules/postcss/lib/lazy-result.js:190:17)
    at /Users/michaelpumo/Documents/websites/work-less-ordinary/node_modules/webpack/lib/NormalModule.js:316:20
    at /Users/michaelpumo/Documents/websites/work-less-ordinary/node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users/michaelpumo/Documents/websites/work-less-ordinary/node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/Users/michaelpumo/Documents/websites/work-less-ordinary/node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Object.loader (/Users/michaelpumo/Documents/websites/work-less-ordinary/node_modules/postcss-loader/dist/index.js:104:7)

bug

Source

michaelpumo

Most helpful comment

I have the same problem.
It can work for me.

Before

.test {
  @apply text-sm;

  @screen lg {
    @apply text-xl
  }
}

After

.test {
  @apply text-sm;
} 

@screen lg {
  .test {
    @apply text-xl
  }
}

FYI: https://github.com/tailwindlabs/tailwindcss-jit/issues/76

one-liang on 19 Mar 2021

👍2

All 3 comments

I have the same problem.
It can work for me.

Before

.test {
  @apply text-sm;

  @screen lg {
    @apply text-xl
  }
}

After

.test {
  @apply text-sm;
} 

@screen lg {
  .test {
    @apply text-xl
  }
}

FYI: https://github.com/tailwindlabs/tailwindcss-jit/issues/76

one-liang on 19 Mar 2021

👍2

I have the same problem.
It can work for me.

Before

.test {
  @apply text-sm;

  @screen lg {
    @apply text-xl
  }
}

After

.test {
  @apply text-sm;
} 

@screen lg {
  .test {
    @apply text-xl
  }
}

FYI: tailwindlabs/tailwindcss-jit#76

Oh thanks for the heads-up.

That's lame though. I have the postcss-nested plugin enabled in nuxt.config.js so it's sad I can't use nesting.

I would have to refactor a whole load of components just to use jit.

michaelpumo on 19 Mar 2021

Thank you for the link to the tailwindcss issue @one-liang - makes the error more understandable for me. In my case not that big deal, because I just started a project. 🙈