tailwind css plugin error with nuxt 2.15.3

[jb-thery]

Versions

{
  "name": "shirime",
  "author": {
    "name": "Thery Jean-Baptiste",
    "email": "jb.thery@flameapp.fr",
    "url": "https://www.linkedin.com/in/jean-baptiste-thery/"
  },
  "description": "www.shirime.one digital ouija, make your friends believe that you speak with an all-knowing mind! Progressive Web App available for installation on Ios, Android, Windows, Mac Os and Linux.",
  "version": "1.0.3",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt generate",
    "start": "nuxt start",
    "lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore .",
    "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "lint:style": "stylelint **/*.{vue,css} --ignore-path .gitignore",
    "lint": "npm run lint:js && npm run lint:style",
    "test": "jest"
  },
  "lint-staged": {
    "*.{js,vue}": "eslint",
    "*.{css,vue}": "stylelint"
  },
  "husky": {
    "hooks": {
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
      "pre-commit": "lint-staged"
    }
  },
  "dependencies": {
    "@nuxtjs/pwa": "^3.3.5",
    "@nuxtjs/sitemap": "^2.4.0",
    "cookie-universal-nuxt": "^2.1.4",
    "core-js": "^3.9.1",
    "nuxt": "^2.15.3",
    "nuxt-i18n": "^6.21.0",
    "nuxt-lazy-load": "^1.2.5",
    "vue-social-sharing": "^3.0.5"
  },
  "devDependencies": {
    "@commitlint/cli": "^12.0.1",
    "@commitlint/config-conventional": "^12.0.1",
    "@nuxtjs/eslint-config": "^6.0.0",
    "@nuxtjs/eslint-module": "^3.0.2",
    "@nuxtjs/stylelint-module": "^4.0.0",
    "@nuxtjs/tailwindcss": "^3.4.2",
    "@tailwindcss/postcss7-compat": "^2.0.3",
    "autoprefixer": "^10.2.5",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^26.6.3",
    "eslint": "^7.21.0",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-nuxt": "^2.0.0",
    "eslint-plugin-prettier": "^3.3.1",
    "fibers": "^5.0.0",
    "husky": "^4.3.8",
    "lint-staged": "^10.5.4",
    "postcss": "^7.0.35",
    "prettier": "^2.2.1",
    "stylelint": "^13.12.0",
    "stylelint-config-prettier": "^8.0.2",
    "stylelint-config-standard": "^21.0.0",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.3"
  }
}

Reproduction

Run nuxt dev with this deps versions

What is actually happening?

When I upgrade my package.json with npm-check-update and when Itry to run nuxt dev, I've got this error :

 FATAL  Cannot use import statement outside a module                                                                                                                 14:07:41

  (function (exports, require, module, __filename, __dirname) { import plugin from 'tailwindcss/plugin'
  ^^^^^^
  
  SyntaxError: Cannot use import statement outside a module
  at new Script (vm.js:101:7)
  at p._moduleCompile (node_modules/jiti/dist/v8cache.js:2:3031)
  at Module.o._compile (node_modules/jiti/dist/v8cache.js:2:2582)
  at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
  at Module.load (internal/modules/cjs/loader.js:928:32)
  at Function.Module._load (internal/modules/cjs/loader.js:769:14)
  at Module.require (internal/modules/cjs/loader.js:952:19)
  at n (node_modules/jiti/dist/v8cache.js:2:2349)
  at ModuleContainer.module.exports (node_modules/@nuxtjs/tailwindcss/lib/module.js:36:22)
  at async ModuleContainer.addModule (node_modules/@nuxt/core/dist/core.js:239:20)


   ╭───────────────────────────────────────────────────────────────╮
   │                                                               │
   │   ✖ Nuxt Fatal Error                                          │
   │                                                               │
   │   SyntaxError: Cannot use import statement outside a module   │
   │                                                               │
   ╰───────────────────────────────────────────────────────────────╯

[pi0]

It seems tailwindcss module tries to directly require tailwind config and if contains esm syntax node cannot parse it. I will make a PR there.

[jb-thery]

It seems tailwindcss module tries to directly require tailwind config and if contains esm syntax node cannot parse it. I will make a PR there.

All right thanks

[pi0]

nuxt-modules/tailwindcss#286

Workaround is to use commonjs syntax in tailwind.config.js

[pi0]

Fixed in 3.4.3