Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(css): support postcss.config.ts #7935

Merged
merged 1 commit into from Apr 28, 2022
Merged

Conversation

bluwy
Copy link
Member

@bluwy bluwy commented Apr 28, 2022

Description

Fix #5316
Supersedes #6967

Since Vite bundles postcss-load-config, we need to handle dynamic require in postcss-load-config

Additional context

Handle dynamic require at this line


What is the purpose of this pull request?

  • Bug fix
  • New Feature
  • Documentation update
  • Other

Before submitting the PR, please make sure you do the following

  • Read the Contributing Guidelines.
  • Read the Pull Request Guidelines and follow the Commit Convention.
  • Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
  • Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
  • Ideally, include relevant tests that fail without this PR but pass with it.

@bluwy bluwy added the p3-minor-bug An edge case that only affects very specific usage (priority) label Apr 28, 2022
@patak-dev patak-dev merged commit 274c10e into vitejs:main Apr 28, 2022
@bluwy bluwy deleted the fix-postcss-load-ts branch April 28, 2022 05:51
@lsotoj
Copy link

lsotoj commented Nov 10, 2022

I was solving by isntalling
PostCSS Language Support

@SalahAdDin
Copy link

SalahAdDin commented Dec 11, 2022

It won't work if you are using "type": "module" in your package.json.

And, using this with the latest version of vite, we get the following:

pnpm dev                                                      INT ✘  1m 29s  

> frontend@0.0.0 dev /home/luisalaguna/Projects/challenge-byfood/frontend
> vite


  VITE v3.2.4  ready in 1138 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
Failed to load PostCSS config (searchPath: /home/luisalaguna/Projects/challenge-byfood/frontend): [TSError] ⨯ Unable to compile TypeScript:
postcss.config.ts:1:1 - error TS1208: 'postcss.config.ts' cannot be compiled under '--isolatedModules' because it is considered a global script file. Add an import, export, or an empty 'export {}' statement to make it a module.

1 module.exports = {
  ~~~~~~

TSError: ⨯ Unable to compile TypeScript:
postcss.config.ts:1:1 - error TS1208: 'postcss.config.ts' cannot be compiled under '--isolatedModules' because it is considered a global script file. Add an import, export, or an empty 'export {}' statement to make it a module.

1 module.exports = {
  ~~~~~~

    at createTSError (/home/luisalaguna/Projects/challenge-byfood/frontend/node_modules/.pnpm/ts-node@10.9.1_eoe7put6ewfbqpy6gs36tihw6y/node_modules/ts-node/src/index.ts:859:12)
    at reportTSError (/home/luisalaguna/Projects/challenge-byfood/frontend/node_modules/.pnpm/ts-node@10.9.1_eoe7put6ewfbqpy6gs36tihw6y/node_modules/ts-node/src/index.ts:863:19)
    at getOutput (/home/luisalaguna/Projects/challenge-byfood/frontend/node_modules/.pnpm/ts-node@10.9.1_eoe7put6ewfbqpy6gs36tihw6y/node_modules/ts-node/src/index.ts:1077:36)
    at Object.compile (/home/luisalaguna/Projects/challenge-byfood/frontend/node_modules/.pnpm/ts-node@10.9.1_eoe7put6ewfbqpy6gs36tihw6y/node_modules/ts-node/src/index.ts:1433:41)
    at Module.m._compile (/home/luisalaguna/Projects/challenge-byfood/frontend/node_modules/.pnpm/ts-node@10.9.1_eoe7put6ewfbqpy6gs36tihw6y/node_modules/ts-node/src/index.ts:1617:30)
    at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
    at Object.require.extensions.<computed> [as .ts] (/home/luisalaguna/Projects/challenge-byfood/frontend/node_modules/.pnpm/ts-node@10.9.1_eoe7put6ewfbqpy6gs36tihw6y/node_modules/ts-node/src/index.ts:1621:12)
    at Module.load (node:internal/modules/cjs/loader:1037:32)
    at Function.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 file:///home/luisalaguna/Projects/challenge-byfood/frontend/node_modules/.pnpm/vite@3.2.4_@types+node@18.11.10/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:26079:31
    at Object.search (file:///home/luisalaguna/Projects/challenge-byfood/frontend/node_modules/.pnpm/vite@3.2.4_@types+node@18.11.10/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:18470:44)
    at async resolvePostcssConfig (file:///home/luisalaguna/Projects/challenge-byfood/frontend/node_modules/.pnpm/vite@3.2.4_@types+node@18.11.10/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:43966:22)
    at async compileCSS (file:///home/luisalaguna/Projects/challenge-byfood/frontend/node_modules/.pnpm/vite@3.2.4_@types+node@18.11.10/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:43699:27)
    at async TransformContext.transform (file:///home/luisalaguna/Projects/challenge-byfood/frontend/node_modules/.pnpm/vite@3.2.4_@types+node@18.11.10/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:43310:55)
    at async Object.transform (file:///home/luisalaguna/Projects/challenge-byfood/frontend/node_modules/.pnpm/vite@3.2.4_@types+node@18.11.10/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:40228:30)
    at async loadAndTransform (file:///home/luisalaguna/Projects/challenge-byfood/frontend/node_modules/.pnpm/vite@3.2.4_@types+node@18.11.10/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:36615:29)
Failed to load PostCSS config (searchPath: /home/luisalaguna/Projects/challenge-byfood/frontend): [TSError] ⨯ Unable to compile TypeScript:
postcss.config.ts:1:1 - error TS1208: 'postcss.config.ts' cannot be compiled under '--isolatedModules' because it is considered a global script file. Add an import, export, or an empty 'export {}' statement to make it a module.

  ~~~~~~

TSError: ⨯ Unable to compile TypeScript:
postcss.config.ts:1:1 - error TS1208: 'postcss.config.ts' cannot be compiled under '--isolatedModules' because it is considered a global script file. Add an import, export, or an empty 'export {}' statement to make it a module.

1 module.exports = {
  ~~~~~~

    at createTSError (/home/luisalaguna/Projects/challenge-byfood/frontend/node_modules/.pnpm/ts-node@10.9.1_eoe7put6ewfbqpy6gs36tihw6y/node_modules/ts-node/src/index.ts:859:12)
    at reportTSError (/home/luisalaguna/Projects/challenge-byfood/frontend/node_modules/.pnpm/ts-node@10.9.1_eoe7put6ewfbqpy6gs36tihw6y/node_modules/ts-node/src/index.ts:863:19)
    at getOutput (/home/luisalaguna/Projects/challenge-byfood/frontend/node_modules/.pnpm/ts-node@10.9.1_eoe7put6ewfbqpy6gs36tihw6y/node_modules/ts-node/src/index.ts:1077:36)
    at Object.compile (/home/luisalaguna/Projects/challenge-byfood/frontend/node_modules/.pnpm/ts-node@10.9.1_eoe7put6ewfbqpy6gs36tihw6y/node_modules/ts-node/src/index.ts:1433:41)
    at Module.m._compile (/home/luisalaguna/Projects/challenge-byfood/frontend/node_modules/.pnpm/ts-node@10.9.1_eoe7put6ewfbqpy6gs36tihw6y/node_modules/ts-node/src/index.ts:1617:30)
    at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
    at require.extensions.<computed> (/home/luisalaguna/Projects/challenge-byfood/frontend/node_modules/.pnpm/ts-node@10.9.1_eoe7put6ewfbqpy6gs36tihw6y/node_modules/ts-node/src/index.ts:1608:43)
    at require.extensions.<computed> (/home/luisalaguna/Projects/challenge-byfood/frontend/node_modules/.pnpm/ts-node@10.9.1_eoe7put6ewfbqpy6gs36tihw6y/node_modules/ts-node/src/index.ts:1608:43)
    at require.extensions.<computed> (/home/luisalaguna/Projects/challenge-byfood/frontend/node_modules/.pnpm/ts-node@10.9.1_eoe7put6ewfbqpy6gs36tihw6y/node_modules/ts-node/src/index.ts:1608:43)
    at Object.require.extensions.<computed> [as .ts] (/home/luisalaguna/Projects/challenge-byfood/frontend/node_modules/.pnpm/ts-node@10.9.1_eoe7put6ewfbqpy6gs36tihw6y/node_modules/ts-node/src/index.ts:1621:12)
    at Module.load (node:internal/modules/cjs/loader:1037:32)
    at Function.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 file:///home/luisalaguna/Projects/challenge-byfood/frontend/node_modules/.pnpm/vite@3.2.4_@types+node@18.11.10/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:26079:31
    at Object.search (file:///home/luisalaguna/Projects/challenge-byfood/frontend/node_modules/.pnpm/vite@3.2.4_@types+node@18.11.10/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:18470:44)
    at async resolvePostcssConfig (file:///home/luisalaguna/Projects/challenge-byfood/frontend/node_modules/.pnpm/vite@3.2.4_@types+node@18.11.10/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:43966:22)
    at async compileCSS (file:///home/luisalaguna/Projects/challenge-byfood/frontend/node_modules/.pnpm/vite@3.2.4_@types+node@18.11.10/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:43699:27)
    at async TransformContext.transform (file:///home/luisalaguna/Projects/challenge-byfood/frontend/node_modules/.pnpm/vite@3.2.4_@types+node@18.11.10/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:43310:55)
    at async Object.transform (file:///home/luisalaguna/Projects/challenge-byfood/frontend/node_modules/.pnpm/vite@3.2.4_@types+node@18.11.10/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:40228:30)
    at async loadAndTransform (file:///home/luisalaguna/Projects/challenge-byfood/frontend/node_modules/.pnpm/vite@3.2.4_@types+node@18.11.10/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:36615:29)
  Plugin: vite:css
  File: /home/luisalaguna/Projects/challenge-byfood/frontend/src/App.css
^C ELIFECYCLE  Command failed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
p3-minor-bug An edge case that only affects very specific usage (priority)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

vite fails with postcss.config.ts file
4 participants