`vite build` ignores `optimizeDeps.include`

Describe the bug

optimizeDeps.include option in config file is ignored by vite build command, while dev-server (just vite command) performs optimizing steps for the included files.

I use these feature because of I have to deal with CommonJS modules. My project uses gRPC-Web and generetes JavaScript-clients by Protocol Buffer Compiler with gRPC-Web plugin. This tool can’t generate ES modules syntax currently.

During migrating to Vite from Webpack I move the generated files to local package ("my-project-proto": "file:./my-project-proto") and instruct Vite to optimize it (convert from cjs -> esm) by optimizeDeps.include option.

npm run dev does the trick, and I can see properly converted files in the cache, but npm run build skip this step. Even when I intentionally make typo in value of optimizeDeps.include, then npm run build doesn’t react to it, while npm run dev exits with error about the dependency: Error: Failed to resolve force included dependency: my-package-name-with-typo.

Reproduction

To investigate the problem, I experiment with it in specailly created minimal project: buggy state commit. To reproduce the bug, clone the repo and execute npm run build. This repo is not about gRPC-Web, but for illustrate more common ~pattern~ bug: using CommonJS modules in Vite project.

System Info

Output of npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers:

  System:
    OS: Linux 5.8 Ubuntu 20.10 (Groovy Gorilla)
    CPU: (8) x64 Intel(R) Core(TM) i7-4790K CPU @ 4.00GHz
    Memory: 22.69 GB / 31.30 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 12.18.2 - /usr/bin/node
    npm: 6.14.8 - /usr/bin/npm
  Browsers:
    Chromium: 91.0.4472.114
    Firefox: 89.0.1
  npmPackages:
    vite: ^2.3.7 => 2.3.8

Used package manager: npm

Issue Analytics

State:
Created 2 years ago
Reactions:2
Comments:6

Top GitHub Comments

2reactions

darophicommented, Jul 6, 2021

Would it be possible to do this without requiring a local package. I have the following structure where generated protofiles are placed in src/proto, and i just want to be able to point the config to src/proto, and have it transform the the files to ES6.

2reactions

OneNailcommented, Jun 22, 2021

The execution process of the build does not include dependency pre-bundling, so optimizeDeps.include is invalid

build commonjsOptions include’s default config is [/node_modules/], this caused the error.

https://github.com/vitejs/vite/blob/bb095db11db5c7a12db6dcee866694f1f68d1e15/packages/vite/src/node/build.ts#L212-L216

the following config is work

import { defineConfig } from "vite";

export default defineConfig({
  optimizeDeps: {
    include: ["fancy-date"],
  },
  build: {
    commonjsOptions: {
      include: [/fancy-date/, /node_modules/]
    },
   // or empty commonjsOptions: {}
  },
});

Top Results From Across the Web

Dep Optimization Options - Vite

Only node_modules and build.outDir folders will be ignored by default when optimizeDeps.entries is explicitly defined. If other folders need to be ignored, ...

Configuring Vite

Configuring Vite #. When running vite from the command line, Vite will automatically try to resolve a config file named vite.config.js inside project...

Configuring Vite

If you specify build.lib , build.assetsInlineLimit will be ignored and assets will always be inlined, regardless of file size. build.cssCodeSplit ...

Dependency Pre-Bundling - Vite

include or optimizeDeps.exclude is when you have an import that is not directly discoverable in the source code. For example, maybe the import...

Build Options - Vite

By default, an absolute path including the base will be used when loading these ... assetsInlineLimit will be ignored and assets will always...