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

@unocss/vite may failed to compile due to confusion of cssPlugin during parallel builds in renderChunk #1065

Closed
Cubelrti opened this issue Jun 6, 2022 · 2 comments
Labels
help wanted Extra attention is needed

Comments

@Cubelrti
Copy link
Contributor

Cubelrti commented Jun 6, 2022

Hi,

I'm trying to integrate unocss with vuepress-next. But I failed to build the site with npm run build. Dev mode is fine and everything just works.

Reproducible StackBlitz: https://stackblitz.com/edit/vuepress-vxrzqi?file=package.json
Reproduce Repo: https://github.com/Cubelrti/vuepress-unocss-repro

It produces the following error(if you don't encounter this, refresh stackblitz then try again):

[unocss:global:build:scan] Cannot read properties of undefined (reading 'get')
✖ Compiling with vite - failed
TypeError: Cannot read properties of undefined (reading 'get')
    at Object.transform (/home/projects/vuepress-vxrzqi/node_modules/vite/dist/node/chunks/dep-59dc6e00.js:35386:56)
    at Object.renderChunk (/home/projects/vuepress-vxrzqi/node_modules/@unocss/vite/dist/index.cjs:290:29)
    at async Chunk.render (/home/projects/vuepress-vxrzqi/node_modules/rollup/dist/shared/rollup.js:15109:20)
    at async eval (/home/projects/vuepress-vxrzqi/node_modules/rollup/dist/shared/rollup.js:16236:40)
    at async Promise.all (index 11)
    at async Bundle.addFinalizedChunksToBundle (/home/projects/vuepress-vxrzqi/node_modules/rollup/dist/shared/rollup.js:16234:9)
    at async Bundle.generate (/home/projects/vuepress-vxrzqi/node_modules/rollup/dist/shared/rollup.js:16214:13)
    at async eval (/home/projects/vuepress-vxrzqi/node_modules/rollup/dist/shared/rollup.js:23836:27)
    at async catchUnfinishedHookActions (/home/projects/vuepress-vxrzqi/node_modules/rollup/dist/shared/rollup.js:23278:20)
    at async doBuild (/home/projects/vuepress-vxrzqi/node_modules/vite/dist/node/chunks/dep-59dc6e00.js:41418:20)

However, this error is not always reproduced in my own machine (or CICD pipeline), seems to be flaky that if you retry for a couple of times, it will succeed.

Seems to be related to vite, but i'm not sure.

EDIT: some digging FYI

TypeError occurs in transform method of vite when transforming assets/HomeLayout.${hash}.js-unocss-hash.css

        async transform(css, id, options) {
            if (!isCSSRequest(id) ||
                commonjsProxyRE.test(id) ||
                SPECIAL_QUERY_RE.test(id)) {
                return;
            }
            const inlined = inlineRE.test(id);
            const modules = cssModulesCache.get(config).get(id); // <- .get(config) return undefined
            // ...

cssModulesCache is defined in global scope with const cssModulesCache = new WeakMap();
and is initialized by buildStart() with cssModulesCache.set(config, moduleCache);

after a successful vuepress dev docs then vuepress build docs then the error is gone.

@antfu antfu added the help wanted Extra attention is needed label Jun 6, 2022
Cubelrti added a commit to Cubelrti/unocss that referenced this issue Jun 7, 2022
Cubelrti added a commit to Cubelrti/unocss that referenced this issue Jun 7, 2022
Cubelrti added a commit to Cubelrti/unocss that referenced this issue Jun 7, 2022
Cubelrti added a commit to Cubelrti/unocss that referenced this issue Jun 7, 2022
@Cubelrti Cubelrti changed the title [unocss:global:build:scan] Cannot read properties of undefined (reading 'get') @unocss/vite may failed to compile due to confusion of cssPlugin during parallel builds in renderChunk Jun 7, 2022
@Cubelrti
Copy link
Contributor Author

Cubelrti commented Jun 7, 2022

After checking vuepress-next/build.ts, I fount it will run viteBuild() in parallel in the following code:

    ;[clientOutput, serverOutput] = await Promise.all([
      viteBuild(clientConfig) as Promise<RollupOutput>,
      viteBuild(serverConfig) as Promise<RollupOutput>,
    ])

This will confuse vite plugin because we only preserve one cssPostPlugin reference in configResolved hook, which may be called multiple times, causing the old one being dropped.

When running renderChunk, vite plugin will try to invoke transform of cssPostPlugin, which may be overwritten by the late call, causing this issue when building.

It can be fixed by using outDir as a unique key for cssPostPlugin and cssPlugin, PR: #1074.

Hope it helps.

@Cubelrti
Copy link
Contributor Author

Cubelrti commented Jun 8, 2022

Confirmed fixed in 0.38.1. Thanks @antfu !

image

@Cubelrti Cubelrti closed this as completed Jun 8, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted Extra attention is needed
Projects
None yet
Development

No branches or pull requests

2 participants