-
-
Notifications
You must be signed in to change notification settings - Fork 7.2k
Closed as not planned
Closed as not planned
Copy link
Labels
Description
Describe the bug
I have an interesting monorepo setup, which essentially consists of a component library living alongside a web app. The environment is as follows:
- Yarn Workspaces Monorepo
- Yarn 2 PnP mode
- twin.macro and @emotion/react for CSS-in-JS (means changing
importSource
and using Babel) - Using Vite for building the webapp
- Using tsup for building the component library
- Using fork of @preact/preset-vite with support for changing the
importSource
to@emotion/react
- See Allow JSX Import Source to be overwritten preactjs/preset-vite#47
preact/compat
is used
Under these circumstances, attempting a development build results in:
3:12:53 pm [vite] error while updating dependencies:
Error: Build failed with 1 error:
../.yarn/__virtual__/@emotion-react-virtual-d17d5de215/0/cache/@emotion-react-npm-11.10.0-06b9abb1e2-6d692e43ff.zip/node_modules/@emotion/react/dist/emotion-react.browser.esm.js:1:23: ERROR: [plugin: vite:dep-pre-bundle] ENOENT: no such file or directory, open 'E:\Documents\GitHub\workspace-root\webapp\preact\compat'
at failureErrorWithLog (E:\Documents\GitHub\workspace-root\.yarn\unplugged\esbuild-npm-0.14.53-5d7e9d5739\node_modules\esbuild\lib\main.js:1624:15)
at E:\Documents\GitHub\workspace-root\.yarn\unplugged\esbuild-npm-0.14.53-5d7e9d5739\node_modules\esbuild\lib\main.js:1266:28
at runOnEndCallbacks (E:\Documents\GitHub\workspace-root\.yarn\unplugged\esbuild-npm-0.14.53-5d7e9d5739\node_modules\esbuild\lib\main.js:1046:63)
at buildResponseToResult (E:\Documents\GitHub\workspace-root\.yarn\unplugged\esbuild-npm-0.14.53-5d7e9d5739\node_modules\esbuild\lib\main.js:1264:7)
at E:\Documents\GitHub\workspace-root\.yarn\unplugged\esbuild-npm-0.14.53-5d7e9d5739\node_modules\esbuild\lib\main.js:1377:14
at E:\Documents\GitHub\workspace-root\.yarn\unplugged\esbuild-npm-0.14.53-5d7e9d5739\node_modules\esbuild\lib\main.js:678:9
at handleIncomingPacket (E:\Documents\GitHub\workspace-root\.yarn\unplugged\esbuild-npm-0.14.53-5d7e9d5739\node_modules\esbuild\lib\main.js:775:9)
at Socket.readFromStdout (E:\Documents\GitHub\workspace-root\.yarn\unplugged\esbuild-npm-0.14.53-5d7e9d5739\node_modules\esbuild\lib\main.js:644:7)
at Socket.emit (node:events:390:28)
at addChunk (node:internal/streams/readable:315:12)
The above is resolvable by adding preact
as a dependency to the workspace root. However, for production builds, the issue still persists as below:
vite v2.9.14 building for production...
✓ 42 modules transformed.
[vite:load-fallback] Could not load preact/compat (imported by ../.yarn/__virtual__/component-library-virtual-d766dbb59b/1/component-library/dist/index.js): ENOENT: no such file or directory, open 'E:\Documents\GitHub\workspace-root\webapp\preact\compat'
error during build:
Error: Could not load preact/compat (imported by ../.yarn/__virtual__/component-library-virtual-d766dbb59b/1/component-library/dist/index.js): ENOENT: no such file or directory, open 'E:\Documents\GitHub\workspace-root\webapp\preact\compat'
Reproduction
https://github.com/Interpause/yarn-pnp-vite-preact-emotion-bug
System Info
System:
OS: Windows 10 10.0.22000
CPU: (24) x64 AMD Ryzen 9 3900X 12-Core Processor
Memory: 10.00 GB / 31.92 GB
Binaries:
Node: 16.13.2 - E:\Program Files\nodejs\node.EXE
Yarn: 3.2.2 - E:\Program Files\nodejs\yarn.CMD
npm: 8.4.0 - E:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: 104.0.5112.79
Edge: Spartan (44.22000.120.0), Chromium (104.0.1293.47)
Internet Explorer: 11.0.22000.120
Used Package Manager
yarn
Logs
Click to expand!
❯ yarn build:webapp --debug
vite:config bundled config file loaded in 204.31ms +0ms
vite:config using resolved config: {
vite:config plugins: [
vite:config 'vite:build-metadata',
vite:config 'alias',
vite:config 'vite:preact-jsx',
vite:config 'preact:devtools',
vite:config 'vite:modulepreload-polyfill',
vite:config 'vite:resolve',
vite:config 'vite:html-inline-proxy',
vite:config 'vite:css',
vite:config 'vite:esbuild',
vite:config 'vite:json',
vite:config 'vite:wasm',
vite:config 'vite:worker',
vite:config 'vite:asset',
vite:config 'preact:config',
vite:config 'prefresh',
vite:config 'vite:define',
vite:config 'vite:css-post',
vite:config 'vite:build-html',
vite:config 'vite:worker-import-meta-url',
vite:config 'vite:watch-package-data',
vite:config 'commonjs',
vite:config 'vite:data-uri',
vite:config 'rollup-plugin-dynamic-import-variables',
vite:config 'vite:asset-import-meta-url',
vite:config 'vite:build-import-analysis',
vite:config 'vite:esbuild-transpile',
vite:config 'vite:terser',
vite:config 'vite:reporter',
vite:config 'vite:load-fallback'
vite:config ],
vite:config build: {
vite:config target: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
vite:config polyfillModulePreload: true,
vite:config outDir: 'dist',
vite:config assetsDir: 'assets',
vite:config assetsInlineLimit: 4096,
vite:config cssCodeSplit: true,
vite:config cssTarget: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
vite:config sourcemap: false,
vite:config rollupOptions: {},
vite:config minify: 'esbuild',
vite:config terserOptions: {},
vite:config write: true,
vite:config emptyOutDir: null,
vite:config manifest: false,
vite:config lib: false,
vite:config ssr: false,
vite:config ssrManifest: false,
vite:config reportCompressedSize: true,
vite:config chunkSizeWarningLimit: 500,
vite:config watch: null,
vite:config commonjsOptions: { include: [Array], extensions: [Array] },
vite:config dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] }
vite:config },
vite:config optimizeDeps: {
vite:config include: [ 'preact/jsx-runtime' ],
vite:config esbuildOptions: { keepNames: undefined, preserveSymlinks: undefined }
vite:config },
vite:config resolve: {
vite:config dedupe: undefined,
vite:config alias: [ [Object], [Object], [Object], [Object], [Object] ]
vite:config },
vite:config configFile: 'E:/Documents/GitHub/workspace-root/webapp/vite.config.ts',
vite:config configFileDependencies: [ 'E:/Documents/GitHub/workspace-root/webapp/vite.config.ts' ],
vite:config inlineConfig: {
vite:config root: undefined,
vite:config base: undefined,
vite:config mode: undefined,
vite:config configFile: undefined,
vite:config logLevel: undefined,
vite:config clearScreen: undefined,
vite:config build: {}
vite:config },
vite:config root: 'E:/Documents/GitHub/workspace-root/webapp',
vite:config base: '/',
vite:config publicDir: 'E:\\Documents\\GitHub\\workspace-root\\webapp\\public',
vite:config cacheDir: 'E:\\Documents\\GitHub\\workspace-root\\webapp\\node_modules\\.vite',
vite:config command: 'build',
vite:config mode: 'production',
vite:config isWorker: false,
vite:config isProduction: true,
vite:config server: {
vite:config preTransformRequests: true,
vite:config fs: { strict: true, allow: [Array], deny: [Array] }
vite:config },
vite:config preview: {
vite:config port: undefined,
vite:config strictPort: undefined,
vite:config host: undefined,
vite:config https: undefined,
vite:config open: undefined,
vite:config proxy: undefined,
vite:config cors: undefined,
vite:config headers: undefined
vite:config },
vite:config env: { BASE_URL: '/', MODE: 'production', DEV: false, PROD: true },
vite:config assetsInclude: [Function: assetsInclude],
vite:config logger: {
vite:config hasWarned: false,
vite:config info: [Function: info],
vite:config warn: [Function: warn],
vite:config warnOnce: [Function: warnOnce],
vite:config error: [Function: error],
vite:config clearScreen: [Function: clearScreen],
vite:config hasErrorLogged: [Function: hasErrorLogged]
vite:config },
vite:config packageCache: Map(0) { set: [Function (anonymous)] },
vite:config createResolver: [Function: createResolver],
vite:config worker: {
vite:config format: 'iife',
vite:config plugins: [
vite:config [Object], [Object], [Object],
vite:config [Object], [Object], [Object],
vite:config [Object], [Object], [Object],
vite:config [Object], [Object], [Object],
vite:config [Object], [Object], [Object],
vite:config [Object], [Object], [Object],
vite:config [Object], [Object], [Object],
vite:config [Object], [Object], [Object],
vite:config [Object]
vite:config ],
vite:config rollupOptions: {}
vite:config }
vite:config } +14ms
vite v2.9.14 building for production...
✓ 42 modules transformed.
[vite:load-fallback] Could not load preact/compat (imported by ../.yarn/__virtual__/component-library-virtual-d766dbb59b/1/component-library/dist/index.js): ENOENT: no such file or directory, open 'E:\Documents\GitHub\workspace-root\webapp\preact\compat'
error during build:
Error: Could not load preact/compat (imported by ../.yarn/__virtual__/component-library-virtual-d766dbb59b/1/component-library/dist/index.js): ENOENT: no such file or directory, open 'E:\Documents\GitHub\workspace-root\webapp\preact\compat'
Validations
- Follow our Code of Conduct
- Read the Contributing Guidelines.
- Read the docs.
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
- Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
- The provided reproduction is a minimal reproducible example of the bug.