vitejs / vite

Next generation frontend tooling. It's fast!
http://vite.dev
MIT License
68.75k stars 6.21k forks source link

When reusing tsconfig.json and tailwind.config.js: [plugin:vite:css] [postcss] Cannot use import statement outside a module #11013

Closed Nefcanto closed 2 years ago

Nefcanto commented 2 years ago

Describe the bug

I'm trying to reuse some configurations.

For tsconfig.json, I reuse it using extends property.

For tailwind.config.js I reuse it using preset property.

However, vite does not compile the code when we use these properties.

Reproduction

https://github.com/Nefcanto/ViteTailwindTsConfigReuse

Steps to reproduce

1- npm create qwik@latest 2- npm run qwik add tailwind 3- Create a tailwind.js as the base 4- Create a tasconfig.base.json as the base 5- Reuse tailwind using preset property 6- Reuse TypeScript config using extends property 7- npm run dev 8- Go to the home page

System Info

System:
    OS: Linux 5.15 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
    CPU: (4) x64 Intel(R) Core(TM) i7-5500U CPU @ 2.40GHz
    Memory: 8.99 GB / 15.37 GB
    Container: Yes
    Shell: 5.1.4 - /bin/bash
  Binaries:
    Node: 18.12.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.1.2 - /usr/local/bin/npm

Used Package Manager

npm

Logs

[plugin:vite:css] [postcss] Cannot use import statement outside a module
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1088:15)
    at Module._compile (node:internal/modules/cjs/loader:1123:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
    at Module.load (node:internal/modules/cjs/loader:1037:32)
    at Module._load (node:internal/modules/cjs/loader:878:12)
    at Module.require (node:internal/modules/cjs/loader:1061:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at Object.<anonymous> (/ItCodes/SiteQwik/tailwind.config.js:3:9)
    at Module._compile (node:internal/modules/cjs/loader:1159:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
    at Module.load (node:internal/modules/cjs/loader:1037:32)
    at Module._load (node:internal/modules/cjs/loader:878:12)
    at Module.require (node:internal/modules/cjs/loader:1061:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at getTailwindConfig (/HolismSite/Qwik/node_modules/tailwindcss/lib/lib/setupTrackingContext.js:67:53)
    at /HolismSite/Qwik/node_modules/tailwindcss/lib/lib/setupTrackingContext.js:96:92
    at /HolismSite/Qwik/node_modules/tailwindcss/lib/processTailwindFeatures.js:46:11
    at plugins (/HolismSite/Qwik/node_modules/tailwindcss/lib/index.js:38:63)
    at LazyResult.runOnRoot (/HolismSite/Qwik/node_modules/postcss/lib/lazy-result.js:339:16)
    at LazyResult.runAsync (/HolismSite/Qwik/node_modules/postcss/lib/lazy-result.js:393:26)
    at LazyResult.async (/HolismSite/Qwik/node_modules/postcss/lib/lazy-result.js:221:30)
    at LazyResult.then (/HolismSite/Qwik/node_modules/postcss/lib/lazy-result.js:206:17

Validations

bluwy commented 2 years ago

The tailwind/postcss config is loaded via nodejs. In ./tailwind.js, you can't use import ... from if the file is CJS. You should rewrite as this instead:

const defaultTheme = require('tailwindcss/defaultTheme')