Error: Module "stream" has been externalized for browser compatibility and cannot be accessed in client code

Describe the bug When using Vite with Vue, I got this error when importing the Notion-Client.

Error: Module "stream" has been externalized for browser compatibility and cannot be accessed in client code.

To Reproduce Node version: 16.7.0 Notion JS library version: 0.4.1

Steps to reproduce the behavior:

1. Setup a vite-project pnpm dlx create-vite
2. Choose vue-ts
3. Install Notion SDK pnpm install @notionhq/client
4. Insert Code Snippet

<script setup lang="ts">
import { Client } from '@notionhq/client'

const notion = new Client({ auth: process.env.NOTION_ACCESS_TOKEN })

</script>

<template>
  <div>
   Test
  </div>
</template>

Expected behavior It should display on localhost:3000 Test without errors.

[leiax00]

@jolo-dev try excluding the dependency from the vite optimization by adding the following to your vite.config.js file. it worked for me!

export default defineConfig({
  //...
  optimizeDeps: {
    exclude: ['@notionhq/client']
  },
  //...
})

read more here!

Did you actually try it? It won’t work even if you add that.

It solved the issue for me but it brings out other problems in my case

Same for me, now I have Uncaught SyntaxError: The requested module '/node_modules/@notionhq/client/build/src/index.js?v=fcc54f13' does not provide an export named 'Client'

me too, Is there a new solution now?

[shug0]

@jolo-dev try excluding the dependency from the vite optimization by adding the following to your vite.config.js file. it worked for me!

export default defineConfig({
  //...
  optimizeDeps: {
    exclude: ['@notionhq/client']
  },
  //...
})

read more here!

Did you actually try it? It won’t work even if you add that.

It solved the issue for me but it brings out other problems in my case

Same for me, now I have Uncaught SyntaxError: The requested module '/node_modules/@notionhq/client/build/src/index.js?v=fcc54f13' does not provide an export named 'Client'