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

vite tries to resolve dependencies despite they're marked as external #11048

Open
7 tasks done
michael42 opened this issue Nov 23, 2022 · 8 comments · May be fixed by #11093
Open
7 tasks done

vite tries to resolve dependencies despite they're marked as external #11048

michael42 opened this issue Nov 23, 2022 · 8 comments · May be fixed by #11093
Labels
feat: ssr has workaround p3-minor-bug An edge case that only affects very specific usage (priority)

Comments

@michael42
Copy link

michael42 commented Nov 23, 2022

Describe the bug

Hi there,

we're using vite inside a big monorepo and I'm experiencing an unexpected issue when building with libraries marked as external. We're trying to build each module in parallel, but the vite build fails because a dependency is not yet built.

This should not happen, because the dependency is explicitly flagged as external (and vite --ssr already defaults to having every bare import external by default). vite reading and interpreting the external dependency somewhat defeats the point of having it external in the first place. It is not bundled in the output (good), but it slows the build down and would introduce unnecessary serialization into the build (that plain rollup does not require).

Reproduction

https://github.com/michael42/vite-verifies-exports-of-externals

Steps to reproduce

  • run npm install
  • run npm run build-a
  • build fails: Error: Failed to resolve entry for package "mod-b". The package may have incorrect main/module/exports specified in its package.json.
  • run npm run build-b, then npm run build-a again
  • build works and produces the expected output (import { test } from "mod-b";console.log(test);)

System Info

System:
  OS: Linux 5.15 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish)
  CPU: (32) x64 AMD Ryzen 9 5950X 16-Core Processor
  Memory: 43.32 GB / 62.73 GB
  Shell: 5.1.16 - /bin/bash
Binaries:
  Node: 16.18.1 - /usr/bin/node
  npm: 8.19.2 - /usr/bin/npm
Browsers: irrelevant

Used Package Manager

npm

Logs

Click to expand!
> vite build --debug --ssr index.js

  vite:config bundled config file loaded in 8.38ms +0ms
  vite:esbuild init tsconfck (root: /tmp/vite-verifies-exports-of-externals) +0ms
  vite:esbuild init tsconfck (root: /tmp/vite-verifies-exports-of-externals) +0ms
  vite:esbuild init tsconfck (root: /tmp/vite-verifies-exports-of-externals) +1ms
  vite:esbuild init tsconfck (root: /tmp/vite-verifies-exports-of-externals) +0ms
  vite:esbuild init tsconfck end +0ms
  vite:esbuild init tsconfck end +1ms
  vite:esbuild init tsconfck end +0ms
  vite:esbuild init tsconfck end +0ms
  vite:config using resolved config: {
  vite:config   ssr: {
  vite:config     format: 'esm',
  vite:config     target: 'node',
  vite:config     external: [ 'mod-b' ],
  vite:config     optimizeDeps: { disabled: true, esbuildOptions: [Object] }
  vite:config   },
  vite:config   optimizeDeps: {
  vite:config     disabled: 'build',
  vite:config     force: undefined,
  vite:config     esbuildOptions: { preserveSymlinks: false }
  vite:config   },
  vite:config   build: {
  vite:config     target: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari13' ],
  vite:config     cssTarget: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari13' ],
  vite:config     outDir: 'dist',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     sourcemap: false,
  vite:config     rollupOptions: {},
  vite:config     minify: false,
  vite:config     terserOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     copyPublicDir: true,
  vite:config     manifest: false,
  vite:config     lib: false,
  vite:config     ssr: 'index.js',
  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     modulePreload: { polyfill: true }
  vite:config   },
  vite:config   configFile: '/tmp/vite-verifies-exports-of-externals/mod-a/vite.config.js',
  vite:config   configFileDependencies: [
  vite:config     '/tmp/vite-verifies-exports-of-externals/mod-a/vite.config.js'
  vite:config   ],
  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     optimizeDeps: { force: undefined },
  vite:config     build: { ssr: 'index.js' }
  vite:config   },
  vite:config   root: '/tmp/vite-verifies-exports-of-externals/mod-a',
  vite:config   base: '/',
  vite:config   resolve: {
  vite:config     mainFields: [ 'module', 'jsnext:main', 'jsnext' ],
  vite:config     browserField: true,
  vite:config     conditions: [],
  vite:config     extensions: [
  vite:config       '.mjs',  '.js',
  vite:config       '.mts',  '.ts',
  vite:config       '.jsx',  '.tsx',
  vite:config       '.json'
  vite:config     ],
  vite:config     dedupe: [],
  vite:config     preserveSymlinks: false,
  vite:config     alias: [ [Object], [Object] ]
  vite:config   },
  vite:config   publicDir: '/tmp/vite-verifies-exports-of-externals/mod-a/public',
  vite:config   cacheDir: '/tmp/vite-verifies-exports-of-externals/mod-a/node_modules/.vite',
  vite:config   command: 'build',
  vite:config   mode: 'production',
  vite:config   isWorker: false,
  vite:config   mainConfig: null,
  vite:config   isProduction: true,
  vite:config   plugins: [
  vite:config     'vite:build-metadata',
  vite:config     'vite:pre-alias',
  vite:config     'alias',
  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-helper',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'vite:wasm-fallback',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:build-html',
  vite:config     'vite:worker-import-meta-url',
  vite:config     'vite:asset-import-meta-url',
  vite:config     'vite:force-systemjs-wrap-complete',
  vite:config     'vite:watch-package-data',
  vite:config     'commonjs',
  vite:config     'vite:data-uri',
  vite:config     'vite:dynamic-import-vars',
  vite:config     'vite:import-glob',
  vite:config     'vite:build-import-analysis',
  vite:config     'vite:esbuild-transpile',
  vite:config     'vite:reporter',
  vite:config     'vite:load-fallback'
  vite:config   ],
  vite:config   server: {
  vite:config     preTransformRequests: true,
  vite:config     middlewareMode: false,
  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       'vite:build-metadata',
  vite:config       'vite:pre-alias',
  vite:config       'alias',
  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-helper',
  vite:config       'vite:worker',
  vite:config       'vite:asset',
  vite:config       'vite:wasm-fallback',
  vite:config       'vite:define',
  vite:config       'vite:css-post',
  vite:config       'vite:build-html',
  vite:config       'vite:worker-import-meta-url',
  vite:config       'vite:asset-import-meta-url',
  vite:config       'vite:force-systemjs-wrap-complete',
  vite:config       'vite:watch-package-data',
  vite:config       'commonjs',
  vite:config       'vite:data-uri',
  vite:config       'vite:dynamic-import-vars',
  vite:config       'vite:import-glob',
  vite:config       'vite:build-import-analysis',
  vite:config       'vite:esbuild-transpile',
  vite:config       'vite:reporter',
  vite:config       'vite:load-fallback'
  vite:config     ],
  vite:config     rollupOptions: {},
  vite:config     getSortedPlugins: [Function: getSortedPlugins],
  vite:config     getSortedPluginHooks: [Function: getSortedPluginHooks]
  vite:config   },
  vite:config   appType: 'spa',
  vite:config   experimental: { importGlobRestoreExtension: false, hmrPartialAccept: false },
  vite:config   getSortedPlugins: [Function: getSortedPlugins],
  vite:config   getSortedPluginHooks: [Function: getSortedPluginHooks]
  vite:config } +6ms
vite v3.2.4 building SSR bundle for production...
✓ 1 modules transformed.
[commonjs--resolver] Failed to resolve entry for package "mod-b". The package may have incorrect main/module/exports specified in its package.json.
error during build:
Error: Failed to resolve entry for package "mod-b". The package may have incorrect main/module/exports specified in its package.json.
    at packageEntryFailure (file:///tmp/vite-verifies-exports-of-externals/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:34100:11)
    at resolvePackageEntry (file:///tmp/vite-verifies-exports-of-externals/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:34097:5)
    at tryNodeResolve (file:///tmp/vite-verifies-exports-of-externals/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:33838:20)
    at Object.resolveId (file:///tmp/vite-verifies-exports-of-externals/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:33598:28)
    at Object.handler (file:///tmp/vite-verifies-exports-of-externals/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:45606:19)
    at file:///tmp/vite-verifies-exports-of-externals/node_modules/rollup/dist/es/shared/rollup.js:22748:40

Validations

@luo3house
Copy link
Contributor

Are you looking for Vite config build.rollupOptions.external that equivalent to Rollup config external ?

@sun0day sun0day linked a pull request Nov 28, 2022 that will close this issue
9 tasks
@michael42
Copy link
Author

Ah, configuring rollup exports explicitly does work, I thought I tried that already, so there's a workaround:

export default {
    build: {
        rollupOptions: {
            external: ['mod-b']
        }
    }
}

@mgonline
Copy link

I have somewhat similar issue where in I'm trying to use dynamic import. My code looks something like:

// src/main.ts
import("./data.json", { assert: { type: 'json' } }).then(data => {
    /// use data ///
});

The suggestion of using build.rollupOptions.external somewhat works, where it doesn't convert data.json to data-[hash].js, however the generated js file in the dist folder seems to refer to the original file like this:

// dist/assets/index-[hash].js
import("../src/data.json", ...)

What I want is to ignore data.json completely - not even change the reference. My use case is to generate data.json later using some other code generation tools.

Note that for now, I'm just putting in a dummy data.json file in the src folder (containing only {}) -- which ideally I do not want to keep. But that's okay as far as it can be ignored completely during the import.

@bluwy bluwy added has workaround p3-minor-bug An edge case that only affects very specific usage (priority) feat: ssr and removed pending triage labels Dec 30, 2022
@WolfgangDrescher
Copy link

Could this be related to #13530? But probably not, because your issue also seems to be a problem before Vite 4.3 from April 2023 (https://github.com/vitejs/vite/releases/tag/v4.3.0).

@Eliav2
Copy link

Eliav2 commented Sep 19, 2023

i have the same issue also. the only difference is that i've upraded vite from 2.9.6 to 4.4.9 (YES this is weird but i've double checked). It seems that vite 4.4.9 does not respect external option in the vite config file. why is this the case?

EDIT:
in my case react was bundled even though it was marked as external because i used @vitejs/plugin-react plugin that made the react lib bundle with my lib. so make sure to remove it if dont want to bundle react code into your lib.(which you probably dont want to do if your building a react lib)

@terwer
Copy link

terwer commented Nov 23, 2023

add build rollupOptions external still not work.report Error [ERR_MODULE_NOT_FOUND]: Cannot find module
but I do not want the external dep to be bundled.

PS:I use sveltekit.

@perkrlsn
Copy link

perkrlsn commented Jan 12, 2024

i have the same issue also. the only difference is that i've upraded vite from 2.9.6 to 4.4.9 (YES this is weird but i've double checked). It seems that vite 4.4.9 does not respect external option in the vite config file. why is this the case?

EDIT: in my case react was bundled even though it was marked as external because i used @vitejs/plugin-react plugin that made the react lib bundle with my lib. so make sure to remove it if dont want to bundle react code into your lib.(which you probably dont want to do if your building a react lib)

In case you still want to use the @vitejs/plugin-react while developing locally. You could do something like this in your config.

export default defineConfig(({ mode }) => {
  return {
    plugins: [mode === "development" ? react() : undefined],
    ...
    build: {
      rollupOptions: {
        external: ["react", "react-dom"],
      },
    },
  };
});

@FilipJakab
Copy link

FilipJakab commented Jun 13, 2024

Hello,
I am trying to resolve similar issue (mine about jquery - what else :)).

I tried a simpler demo by externalizing window.myDep as my-dep package.
But when I write:

build: {
	rollupOptions: {
		external: [
			"my-dep"
		],
		output: {
			globals: {
				"my-dep": "myDep"
			}
		}
	}
},

and then in App.svelte I try to import this using: import MyDep from "my-dep" it just fails to resolve the import (during compilation, rather than failing in runtime).

Do I misunderstand the external build option, or is it exactly for this kind of use-case?

Thanks

PS:
Note, that in the this very scenario I made my-dep up. It is just an alias for something in the target environment residing in window, it's not in package.json

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

Successfully merging a pull request may close this issue.

9 participants