vitesse vue3 issue adding libraries

Question

I'm trying to add some dependencies to vitesse with vue 3 and typescript. I added a couple of libraries with pnpm

pnpm add @aws-sdk/credential-providers
pnpm add @aws-sdk/client-dynamodb

Now when I try and pnpm dev I get the following errors when I hit the route calling the component with the code utilizing the dependencies. I have no idea how to proceed (more of an infrastructure person, this is my first time trying typescript)

pnpm dev

> @ dev /Users/me/code/github/me/app-frontend
> vite --port 3333 --open

Pre-bundling dependencies:
  vite-ssg
  nprogress
  pinia
  vue-i18n
  vue
  (...and 3 more)
(this will be run only when your dependencies or config have changed)

  vite v2.6.10 dev server running at:

  > Local: http://localhost:3333/
  > Network: use `--host` to expose

  ready in 789ms.

3:56:55 PM [vite] hmr update /src/pages/hi/[name].vue
3:56:55 PM [vite] new dependencies found: @aws-sdk/client-dynamodb, @aws-sdk/credential-providers, updating...
 > node_modules/.pnpm/@[email protected]/node_modules/@aws-sdk/credential-provider-imds/dist-es/remoteProvider/httpRequest.js:3:9: error: No matching export in "browser-external:buffer" for import "Buffer"
    3 │ import { Buffer } from "buffer";
      ╵          ~~~~~~

 > node_modules/.pnpm/@[email protected]/node_modules/@aws-sdk/credential-provider-imds/dist-es/remoteProvider/httpRequest.js:4:9: error: No matching export in "browser-external:http" for import "request"
    4 │ import { request } from "http";
      ╵          ~~~~~~~

 > node_modules/.pnpm/@[email protected]/node_modules/@aws-sdk/credential-provider-imds/dist-es/fromContainerMetadata.js:3:9: error: No matching export in "browser-external:url" for import "parse"
    3 │ import { parse } from "url";
      ╵          ~~~~~

 > node_modules/.pnpm/@[email protected]/node_modules/@aws-sdk/shared-ini-file-loader/dist-es/index.js:2:9: error: No matching export in "browser-external:fs" for import "readFile"
    2 │ import { readFile } from "fs";
      ╵          ~~~~~~~~

 > node_modules/.pnpm/@[email protected]/node_modules/@aws-sdk/shared-ini-file-loader/dist-es/index.js:3:9: error: No matching export in "browser-external:os" for import "homedir"
    3 │ import { homedir } from "os";
      ╵          ~~~~~~~

 > node_modules/.pnpm/@[email protected]/node_modules/@aws-sdk/shared-ini-file-loader/dist-es/index.js:4:9: error: No matching export in "browser-external:path" for import "join"
    4 │ import { join, sep } from "path";
      ╵          ~~~~

 > node_modules/.pnpm/@[email protected]/node_modules/@aws-sdk/shared-ini-file-loader/dist-es/index.js:4:15: error: No matching export in "browser-external:path" for import "sep"
    4 │ import { join, sep } from "path";
      ╵                ~~~

 > node_modules/.pnpm/@[email protected]/node_modules/@aws-sdk/credential-provider-sso/dist-es/index.js:6:9: error: No matching export in "browser-external:crypto" for import "createHash"
    6 │ import { createHash } from "crypto";
      ╵          ~~~~~~~~~~

 > node_modules/.pnpm/@[email protected]/node_modules/@aws-sdk/credential-provider-sso/dist-es/index.js:7:9: error: No matching export in "browser-external:fs" for import "readFileSync"
    7 │ import { readFileSync } from "fs";
      ╵          ~~~~~~~~~~~~

 > node_modules/.pnpm/@[email protected]/node_modules/@aws-sdk/credential-provider-sso/dist-es/index.js:8:9: error: No matching export in "browser-external:path" for import "join"
    8 │ import { join } from "path";
      ╵          ~~~~

 > node_modules/.pnpm/@[email protected]/node_modules/@aws-sdk/credential-provider-ini/dist-es/index.js:5:9: error: No matching export in "node_modules/.pnpm/@[email protected]/node_modules/@aws-sdk/credential-provider-web-identity/dist-es/index.js" for import "fromTokenFile"
    5 │ import { fromTokenFile } from "@aws-sdk/credential-provider-web-identity";
      ╵          ~~~~~~~~~~~~~

 > node_modules/.pnpm/@[email protected]/node_modules/@aws-sdk/credential-provider-process/dist-es/index.js:4:9: error: No matching export in "browser-external:child_process" for import "exec"
    4 │ import { exec } from "child_process";
      ╵          ~~~~

 > node_modules/.pnpm/@[email protected]/node_modules/@aws-sdk/credential-providers/dist-es/fromTokenFile.js:3:9: error: No matching export in "node_modules/.pnpm/@[email protected]/node_modules/@aws-sdk/credential-provider-web-identity/dist-es/index.js" for import "fromTokenFile"
    3 │ import { fromTokenFile as _fromTokenFile, } from "@aws-sdk/credential-provider-web-identity";
      ╵          ~~~~~~~~~~~~~

3:56:56 PM [vite] error while updating dependencies:
Error: Build failed with 13 errors:
node_modules/.pnpm/@[email protected]/node_modules/@aws-sdk/credential-provider-imds/dist-es/fromContainerMetadata.js:3:9: error: No matching export in "browser-external:url" for import "parse"
node_modules/.pnpm/@[email protected]/node_modules/@aws-sdk/credential-provider-imds/dist-es/remoteProvider/httpRequest.js:3:9: error: No matching export in "browser-external:buffer" for import "Buffer"
node_modules/.pnpm/@[email protected]/node_modules/@aws-sdk/credential-provider-imds/dist-es/remoteProvider/httpRequest.js:4:9: error: No matching export in "browser-external:http" for import "request"
node_modules/.pnpm/@[email protected]/node_modules/@aws-sdk/credential-provider-ini/dist-es/index.js:5:9: error: No matching export in "node_modules/.pnpm/@[email protected]/node_modules/@aws-sdk/credential-provider-web-identity/dist-es/index.js" for import "fromTokenFile"
node_modules/.pnpm/@[email protected]/node_modules/@aws-sdk/credential-provider-process/dist-es/index.js:4:9: error: No matching export in "browser-external:child_process" for import "exec"
...
    at failureErrorWithLog (/Users/me/code/github/me/app-frontend/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1493:15)
    at /Users/me/code/github/me/app-frontend/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1151:28
    at runOnEndCallbacks (/Users/me/code/github/me/app-frontend/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:941:63)
    at buildResponseToResult (/Users/me/code/github/me/app-frontend/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1149:7)
    at /Users/me/code/github/me/app-frontend/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1258:14
    at /Users/me/code/github/me/app-frontend/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:629:9
    at handleIncomingPacket (/Users/me/code/github/me/app-frontend/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:726:9)
    at Socket.readFromStdout (/Users/me/code/github/me/app-frontend/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:596:7)
    at Socket.emit (node:events:390:28)
    at addChunk (node:internal/streams/readable:324:12)

further investigation seems that it's not possible to use the aws sdk and vite github.com/aws/aws-sdk-js-v3/issues/2478 — Sean
– Sean, Commented Nov 23, 2021 at 2:29
also see the linked note in the vite repo about the problem github.com/vitejs/vite/issues/1374#issuecomment-754820938 which further says because it uses Node stuff it won't work — Keith Nicholas
– Keith Nicholas, Commented Jan 16, 2022 at 23:40

Saddy Madrid C · Accepted Answer · 2022-06-10 15:57:53Z

1

Since Vite does not wrap NodeJS libraries on its own, core libraries such as buffer, fs, and path are not available for use in the browser. You can find fixes (eg https://github.com/feross/buffer or https://github.com/ionic-team/rollup-plugin-node-polyfills) to help handle these cases.

In my case I only had a problem with the buffer, so I only installed buffer with npm i buffer -D

answered Jun 10, 2022 at 15:57

Saddy Madrid C

511 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

vitesse vue3 issue adding libraries

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related