Vite: can't add less as dependency

Created on 17 Sep 2020  路  5Comments  路  Source: vitejs/vite

Do NOT ignore this template or your issue will have a very high chance to be closed without comment.

Describe the bug

I use vite generate a project,Everything is fun after i install less as a dependency.

System Info

  • required vite version: 1.0.0-rc.4
  • required Operating System: mac10.15.6
  • required Node version: 14.10.1
  • Optional:

    • npm/yarn version yarn-1.21.1

    • Installed vue version (from yarn.lock or package-lock.json) 3.0.0-rc.12

    • Installed @vue/compiler-sfc version 3.0.0-rc.12

Logs (Optional if provided reproduction)

  1. Run vite or vite build with the --debug flag.
  2. Provide the error log here.
    ````
    yarn run v1.21.1
    warning package.json: No license field
    $ vite --debug
    vite v1.0.0-rc.4
    vite:config env mode: development +0ms
    vite:config env: {} +1ms
    vite:config config resolved in 3ms +1ms
    vite:resolve (node_module entry) date-fns -> esm/index.js +0ms
    vite:optimize optimizing date-fns (contains relative imports) +0ms
    vite:resolve (node_module entry) less -> ./lib/less-node/index +6ms
    vite:resolve (postfix) /Users/yuli/work/vite-test/node_modules/less/lib/less-node/index -> /Users/yuli/work/vite-test/node_modules/less/lib/less-node/index.js +0ms
    vite:optimize optimizing less (no exports, likely commonjs) +2ms
    vite:resolve (node_module entry) vue -> dist/vue.runtime.esm-bundler.js +2ms
    vite:optimize optimizing vue (imports sub dependencies) +1ms
    [vite] Optimizable dependencies detected:
    date-fns, less, vue
    Pre-bundling them to speed up dev server page load...
    (this will be run only when your dependencies have changed)

[vite] Dep optimization failed with error:
Dependency graceful-fs is attempting to import Node built-in module fs.
This will not work in a browser environment.
Imported by: node_modules/graceful-fs/graceful-fs.js

Tip:
Make sure your "dependencies" only include packages that you
intend to use in the browser. If it's a Node.js package, it
should be in "devDependencies".

If you do intend to use this dependency in the browser and the
dependency does not actually use these Node built-ins in the
browser, you can add the dependency (not the built-in) to the
"optimizeDeps.allowNodeBuiltins" option in vite.config.js.

If that results in a runtime error, then unfortunately the
package is not distributed in a web-friendly format. You should
open an issue in its repo, or look for a modern alternative.
error Command failed with exit code 1.
````
Graceful-fs is a optionalDependency of Less

pending triage

Most helpful comment

If you don't want this behavior, you can add them into exclude inside optimizeDeps.

All 5 comments

It's same to sass.

The less should place inside devDependencies instead of dependencies, because vite will optimized the package comes from dependencies.

@underfin we have a similar issue but with server side rendering package which actually should be part of dependencies because it will be used in release while devDependencies like linter, less, sass won't. Does it mean that meaning of dependencies shifted a bit for Vite and it should contain only what is going to be on the client side?

If you don't want this behavior, you can add them into exclude inside optimizeDeps.

If you don't want this behavior, you can add them into exclude inside optimizeDeps.

How to support require

Was this page helpful?
0 / 5 - 0 ratings

Related issues

TrungRueta picture TrungRueta  路  4Comments

ashubham picture ashubham  路  3Comments

Hoverhuang-er picture Hoverhuang-er  路  3Comments

haikyuu picture haikyuu  路  3Comments

cmwhited picture cmwhited  路  3Comments