Skip to content

Vite resolves import with browser field during SSR #2995

@benmccann

Description

@benmccann

Describe the bug

The presence of a browser field is causing Vite to try to load the client-side version of an isomorphic package on the server-side.

Reproduction

npm init svelte@next
npm install
npm install websocket
sed -i "s/<script>/<script>\n\timport { w3cwebsocket } from 'websocket';\n\tconsole.log(w3cwebsocket);\n/" ./src/routes/index.svelte
npm run dev

System Info

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

  System:
    OS: Linux 5.8 Ubuntu 20.04.2 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i7-10510U CPU @ 1.80GHz
    Memory: 17.36 GB / 31.14 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 14.16.0 - ~/.nvm/versions/node/v14.16.0/bin/node
    npm: 7.9.0 - ~/.nvm/versions/node/v14.16.0/bin/npm
  Browsers:
    Chrome: 89.0.4389.114
    Firefox: 87.0
  npmPackages:
    vite: ^2.1.0 => 2.1.5

Used package manager: npm

Logs

3:26:21 PM [vite] Error when evaluating SSR module /node_modules/websocket/lib/browser.js?v=364f06a3:
ReferenceError: require is not defined
    at /node_modules/websocket/lib/browser.js?v=364f06a3:15:25

Before submitting the issue, please make sure you do the following

  • Read the Contributing Guidelines.
  • Read the docs.
  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • Provide a description in this issue that describes the bug.
  • Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
  • Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

Metadata

Metadata

Assignees

No one assigned

    Labels

    feat: ssrp3-downstream-blockerBlocking the downstream ecosystem to work properly (priority)

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions