CODEWITHSUNDEEP
typescriptvuejs3vite
Sean
Sean

Reputation: 670

vitesse vue3 issue adding libraries

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)

Upvotes: 2

Views: 1732

Answers (1)

Saddy Madrid C
Saddy Madrid C

Reputation: 51

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

Upvotes: 1

Related Questions