Make Module compatible with SvelteKit & Vite SSR #2126

alexanderniebuhr · 2021-07-07T11:43:24Z

Please avoid duplicates

I checked all open bugs and none of them matched my problem.

Reproducible test case

Please select the environment(s) that are relevant to your bug report

Version

What happened?

Octokit.js is supposed to be compatible with browsers, so I expect it to be compatible with frameswork aswell.
Using Vite bundler, the resolve of packages is not working.
Following some Error Logs using latest svelteKit and Vite, as well an Workaround hack, provided by @GrygrFlzr (not sure if he is willing to give some more backround insights, how to fix)

Code want to run

<script lang="ts">
  import { onMount } from 'svelte';
  import { Octokit } from 'octokit';

  onMount(() => {});
  async function fetchRepos() {
    const octo = new Octokit({
      auth: 'GH_TOKEN'
    });
    const data = await octo.rest.repos.listForUser({ username: 'alexanderniebuhr' });
    console.log(data);
  }
</script>

<svelte:head>
  <title>Welcome</title>
</svelte:head>

<main class="h-screen">
  <div>
    <button on:click={fetchRepos}> FETCH </button>
  </div>
</main>

Error getting

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

get@http://localhost:3000/node_modules/.vite/@octokit_rest.js?v=781bf494:538:11
@http://localhost:3000/node_modules/.vite/@octokit_rest.js?v=781bf494:571:16

After setting octokit as noExternal wiht kit.vite.ssr.noExternal: ["octokit"], getting the following

07:39:34 [vite] Error when evaluating SSR module /node_modules/@octokit/app/dist-node/index.js?v=4a823be6:
ReferenceError: exports is not defined
    at eval (/node_modules/@octokit/app/dist-node/index.js?v=4a823be6:5:23)
    at instantiateModule (C:\Users\Alexander\Documents\projects\windicss\marketplace\node_modules\vite\dist\node\chunks\dep-fc2895ac.js:72490:166)
exports is not defined
ReferenceError: exports is not defined
    at eval (/node_modules/@octokit/app/dist-node/index.js?v=4a823be6:5:23)
    at instantiateModule (C:\Users\Alexander\Documents\projects\windicss\marketplace\node_modules\vite\dist\node\chunks\dep-fc2895ac.js:72490:166)
07:39:34 [vite] Error when evaluating SSR module /node_modules/@octokit/oauth-app/dist-node/index.js?v=4a823be6:
ReferenceError: exports is not defined
    at eval (/node_modules/@octokit/oauth-app/dist-node/index.js?v=4a823be6:5:23)
    at instantiateModule (C:\Users\Alexander\Documents\projects\windicss\marketplace\node_modules\vite\dist\node\chunks\dep-fc2895ac.js:72490:166)
07:39:34 [vite] Error when evaluating SSR module /node_modules/before-after-hook/index.js?v=4a823be6:
ReferenceError: require is not defined
    at /node_modules/before-after-hook/index.js?v=4a823be6:1:16
    at instantiateModule (C:\Users\Alexander\Documents\projects\windicss\marketplace\node_modules\vite\dist\node\chunks\dep-fc2895ac.js:72490:166)
07:39:34 [vite] Error when evaluating SSR module /node_modules/once/once.js?v=4a823be6:
ReferenceError: require is not defined
    at /node_modules/once/once.js?v=4a823be6:1:14
    at instantiateModule (C:\Users\Alexander\Documents\projects\windicss\marketplace\node_modules\vite\dist\node\chunks\dep-fc2895ac.js:72490:166)

trying to import from octokit/dist-web

07:50:24 [vite] new dependencies found: octokit/dist-web/index, updating...
07:50:24 [vite] Error when evaluating SSR module /node_modules/@octokit/app/dist-node/index.js?v=8f91861d:
ReferenceError: exports is not defined
exports is not defined
ReferenceError: exports is not defined
07:50:24 [vite] Error when evaluating SSR module /node_modules/@octokit/oauth-app/dist-node/index.js?v=8f91861d:
ReferenceError: exports is not defined
07:50:24 [vite] Error when evaluating SSR module /node_modules/before-after-hook/index.js?v=8f91861d:
ReferenceError: require is not defined
07:50:24 [vite] Error when evaluating SSR module /node_modules/once/once.js:
ReferenceError: require is not defined
 > node_modules/clean-stack/index.js:2:19: error: Could not read from file: C:\Users\Alexander\Documents\projects\windicss\marketplace\os
    2 │ const os = require('os');
 > node_modules/node-fetch/lib/index.mjs:5:17: error: Could not read from file: C:\Users\Alexander\Documents\projects\windicss\marketplace\zlib
    5 │ import zlib from 'zlib';
 > node_modules/node-fetch/lib/index.mjs:2:17: error: Could not read from file: C:\Users\Alexander\Documents\projects\windicss\marketplace\http
    2 │ import http from 'http';
 > node_modules/node-fetch/lib/index.mjs:3:16: error: Could not read from file: C:\Users\Alexander\Documents\projects\windicss\marketplace\url
    3 │ import Url from 'url';
 > node_modules/node-fetch/lib/index.mjs:4:18: error: Could not read from file: C:\Users\Alexander\Documents\projects\windicss\marketplace\https
    4 │ import https from 'https';
 > node_modules/node-fetch/lib/index.mjs:1:19: error: Could not read from file: C:\Users\Alexander\Documents\projects\windicss\marketplace\stream
    1 │ import Stream from 'stream';
07:50:24 [vite] error while updating dependencies:
Error: Build failed with 6 errors:
node_modules/clean-stack/index.js:2:19: error: Could not read from file: C:\Users\Alexander\Documents\projects\windicss\marketplace\os
node_modules/node-fetch/lib/index.mjs:1:19: error: Could not read from file: C:\Users\Alexander\Documents\projects\windicss\marketplace\stream
node_modules/node-fetch/lib/index.mjs:2:17: error: Could not read from file: C:\Users\Alexander\Documents\projects\windicss\marketplace\http
node_modules/node-fetch/lib/index.mjs:3:16: error: Could not read from file: C:\Users\Alexander\Documents\projects\windicss\marketplace\url
node_modules/node-fetch/lib/index.mjs:4:18: error: Could not read from file: C:\Users\Alexander\Documents\projects\windicss\marketplace\https
...
    at failureErrorWithLog (C:\Users\Alexander\Documents\projects\windicss\marketplace\node_modules\esbuild\lib\main.js:1449:15)
    at C:\Users\Alexander\Documents\projects\windicss\marketplace\node_modules\esbuild\lib\main.js:1131:28
    at runOnEndCallbacks (C:\Users\Alexander\Documents\projects\windicss\marketplace\node_modules\esbuild\lib\main.js:921:63)
    at buildResponseToResult (C:\Users\Alexander\Documents\projects\windicss\marketplace\node_modules\esbuild\lib\main.js:1129:7)
    at C:\Users\Alexander\Documents\projects\windicss\marketplace\node_modules\esbuild\lib\main.js:1236:14
    at C:\Users\Alexander\Documents\projects\windicss\marketplace\node_modules\esbuild\lib\main.js:609:9
    at handleIncomingPacket (C:\Users\Alexander\Documents\projects\windicss\marketplace\node_modules\esbuild\lib\main.js:706:9)
    at Socket.readFromStdout (C:\Users\Alexander\Documents\projects\windicss\marketplace\node_modules\esbuild\lib\main.js:576:7)
    at Socket.emit (node:events:394:28)
    at Socket.emit (node:domain:470:12)

trying to import from octokit/dist-web and added octokit to noExternal

import { Octokit as Octokit$1 } from '@octokit/core';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1025:15)
    at Module._compile (node:internal/modules/cjs/loader:1059:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1124:10)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:816:12)
    at Module.require (node:internal/modules/cjs/loader:999:19)
    at require (node:internal/modules/cjs/helpers:93:18)
    at nodeRequire (C:\Users\Alexander\Documents\projects\windicss\marketplace\node_modules\vite\dist\node\chunks\dep-fc2895ac.js:72504:17)
    at ssrImport (C:\Users\Alexander\Documents\projects\windicss\marketplace\node_modules\vite\dist\node\chunks\dep-fc2895ac.js:72457:20)

Amazing workaround fix by @GrygrFlzr: https://gist.github.com/alexanderniebuhr/12a60bde6faf44d4f519e93b1765ec99
I am not very safe with modules and exports and imports, but it seems that there might be just some mappings to update. Sure you have some idea, or can get around it.

keep me updated.
cheers

Would you be interested in contributing a fix?

yes

The text was updated successfully, but these errors were encountered:

gr2m · 2021-07-08T20:31:27Z

This is a build problem, not a library problem. You can import a browser-compatible/optimized version directly from skypack, as shown in the readme. I'm not familiar with SveletKit and Vite, but some of the @octokit/* packages use the non-standard "browser" key to override the main export. The build tools would ideally respect that.

The proper solution will be to migrate all of Octokit to native ES Modules which is something I'm preparing right now, but it's a big project and I need to finish some other work first. I hope to finish the transition by end of September.

If there is something simple I can do to make Octokit easier to use for Svelte users please let me know, I can create follow up issues and address them. But I'll close this issue as there is nothing actionable to do for me as things stand right now

suptejas · 2021-12-16T16:42:10Z

Any updates with this? I'm facing the exact same issue too.

Raicuparta · 2022-01-04T17:28:18Z

I worked around this problem by aliasing node-fetch to isomorphic-fetch. No idea if it works for all usages within octokit, but works fine for my project. You'll need to install the isomorphic-fetch dependency before making this config change.

// svelte.config.js

const config = {
  // ...
  kit: {
    // ...
    vite: {
      resolve: {
        alias: {
          'node-fetch': 'isomorphic-fetch',
        },
      },
    },
  },
};

export default config;

@gr2m Maybe it would be possible to use isomorphic-fetch instead of node-fetch in the @octokit/* packages?

wolfy1339 · 2022-01-04T18:29:52Z

Unfortunately the JS octokit libraries no longer have an active maintainer.

You can read about it in this discussion, subscribe to it for further updates.

Raicuparta · 2022-01-04T19:09:40Z

Bummer. In any case, I hope my answer will help people who search for this issue and end up here, like I did.

suptejas · 2022-01-04T19:40:12Z

Yep, this is helpful, thank you!

ConteMan · 2022-01-18T11:29:48Z

Bummer. In any case, I hope my answer will help people who search for this issue and end up here, like I did.

Thank you!

TJKoury · 2022-06-04T21:57:27Z

{
      resolve: {
        alias: {
          'node-fetch': 'isomorphic-fetch',
        },
      },

For anyone confused by this, the file in the default vite setup is not the svelte.config, it is the vite.config:

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [svelte()],
  resolve: {
    alias: {
      'node-fetch': 'isomorphic-fetch',
    },
  }
})

alsino · 2022-07-16T14:50:25Z

This import worked for me as of 16 July 2022 with version ^3.44.0 of SvelteKit:

import { sveltekit } from '@sveltejs/kit/vite';

/** @type {import('vite').UserConfig} */
const config = {
plugins: [sveltekit()],
resolve: {
    alias: {
      'node-fetch': 'isomorphic-fetch',
    },
  }
};

export default config;

And the import in index.svelte like so:

import { Octokit } from '@octokit/core';

1. **Octokit:** Added Octokit Official clients for the GitHub API. 2. **Isomorphic-fetch:** Octokit was not working with default node-fetch, So had to use Isomorphic-fetch. [Issue](octokit/octokit.js#2126) 3. **Session storage:** Added fetch data to session storage, So doesn't need to fetch it again while routing to `UserCardComponent` to `UserDetailsView`

milahu · 2022-10-23T13:52:27Z

this also solves

ReferenceError: global is not defined`

from node-fetch

// expose Promise
Body.Promise = global.Promise;

wolfy1339 · 2023-05-27T00:28:58Z

For those subscribed to this issue, we will be removing node-fetch and using the Fetch API that is standard on brosers and Node v18+ in the next major version of @octokit/request

octokit/request.js#586

electrovir · 2023-06-07T19:33:00Z

This import worked for me as of 16 July 2022 with version ^3.44.0 of SvelteKit:

import { sveltekit } from '@sveltejs/kit/vite';

/** @type {import('vite').UserConfig} */
const config = {
plugins: [sveltekit()],
resolve: {
    alias: {
      'node-fetch': 'isomorphic-fetch',
    },
  }
};

export default config;

And the import in index.svelte like so:

import { Octokit } from '@octokit/core';

Probably obvious to most, but make sure you've also installed isomorphic-fetch as a dependency (npm i isomorphic-fetch).

alexanderniebuhr added the Type: Bug Something isn't working as documented label Jul 7, 2021

gr2m closed this as completed Jul 8, 2021

rainrisa mentioned this issue Jul 29, 2022

Cannot find package 'stream' sveltejs/kit#2412

Closed

wolfy1339 mentioned this issue May 26, 2023

[BUG]: octokit doesn't imported correctly on an React App, with VITE #2459

Closed

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Make Module compatible with SvelteKit & Vite SSR #2126

Make Module compatible with SvelteKit & Vite SSR #2126

alexanderniebuhr commented Jul 7, 2021

gr2m commented Jul 8, 2021

suptejas commented Dec 16, 2021

Raicuparta commented Jan 4, 2022

wolfy1339 commented Jan 4, 2022

Raicuparta commented Jan 4, 2022

suptejas commented Jan 4, 2022

ConteMan commented Jan 18, 2022

TJKoury commented Jun 4, 2022

alsino commented Jul 16, 2022

milahu commented Oct 23, 2022

wolfy1339 commented May 27, 2023

electrovir commented Jun 7, 2023

Make Module compatible with SvelteKit & Vite SSR #2126

Make Module compatible with SvelteKit & Vite SSR #2126

Comments

alexanderniebuhr commented Jul 7, 2021

Please avoid duplicates

Reproducible test case

Please select the environment(s) that are relevant to your bug report

Version

What happened?

Would you be interested in contributing a fix?

gr2m commented Jul 8, 2021

suptejas commented Dec 16, 2021

Raicuparta commented Jan 4, 2022

wolfy1339 commented Jan 4, 2022

Raicuparta commented Jan 4, 2022

suptejas commented Jan 4, 2022

ConteMan commented Jan 18, 2022

TJKoury commented Jun 4, 2022

alsino commented Jul 16, 2022

milahu commented Oct 23, 2022

wolfy1339 commented May 27, 2023

electrovir commented Jun 7, 2023