Repeated errors from [vite] after `pnpm init svelte@next my-app` (2.0.0-next.55): Error when evaluating SSR module `cookie`: ReferenceError: exports is not defined

[alexander-mart]

Describe the bug

Repeated errors from [vite] after fresh install pnpm init svelte@next my-app
create-svelte package version: 2.0.0-next.55

Error when evaluating SSR module /node_modules/.pnpm/cookie@0.4.1/node_modules/cookie/index.js:
ReferenceError: exports is not defined

Logs

11:41:24 PM [vite] Error when evaluating SSR module /node_modules/.pnpm/cookie@0.4.1/node_modules/cookie/index.js:
ReferenceError: exports is not defined
    at /node_modules/.pnpm/cookie@0.4.1/node_modules/cookie/index.js:15:1
    at instantiateModule (/home/alex/my-app/node_modules/.pnpm/vite@2.1.5/node_modules/vite/dist/node/chunks/dep-66eb515d.js:69030:166)
11:41:24 PM [vite] new dependencies found: cookie, @lukeed/uuid, updating...
11:41:24 PM [vite] ✨ dependencies updated, reloading page...
11:41:26 PM [vite] Error when evaluating SSR module /node_modules/.pnpm/cookie@0.4.1/node_modules/cookie/index.js:
ReferenceError: exports is not defined
    at /node_modules/.pnpm/cookie@0.4.1/node_modules/cookie/index.js:15:1
    at instantiateModule (/home/alex/my-app/node_modules/.pnpm/vite@2.1.5/node_modules/vite/dist/node/chunks/dep-66eb515d.js:69030:166) (x137)

To Reproduce

pnpm init svelte@next my-app
✔ Which Svelte app template? › SvelteKit demo app
✔ Use TypeScript? … yes
✔ Add ESLint for code linting? … yes
✔ Add Prettier for code formatting? … yes

cd my-app
pnpm install
npm run dev -- --open

Expected behavior
No repeated warnings in console ouput :)

Information about your SvelteKit Installation:

Diagnostics

• The output of npx envinfo --system --npmPackages svelte,@sveltejs/kit,vite --binaries --browsers

  System:
    OS: Linux 4.15 Ubuntu 18.04.4 LTS (Bionic Beaver)
    CPU: (2) x64 Intel Xeon E3-12xx v2 (Ivy Bridge, IBRS)
    Memory: 93.37 MB / 984.89 MB
    Container: Yes
    Shell: 4.4.20 - /bin/bash
  Binaries:
    Node: 14.16.1 - /usr/local/bin/node
    Yarn: 2.0.0-rc.27 - ~/.npm-global/bin/yarn
    npm: 6.13.7 - ~/.npm-global/bin/npm
  npmPackages:
    @sveltejs/kit: next => 1.0.0-next.80 
    svelte: ^3.29.0 => 3.37.0 
    vite: ^2.1.0 => 2.1.5 

• Your browser
  Chrome 88.0.4324.150 64bit

• Your adapter (e.g. Node, static, Vercel, Begin, etc...)

Severity
How severe an issue is this bug to you? Is this annoying, blocking some users, blocking an upgrade or blocking your usage of SvelteKit entirely?

This is an annoying bug, i can not use SvelteKit normally, because of it.

[Conduitry]

This is presumably the Vite bug vitejs/vite#2579

Although maybe we should be using a different module for cookie handling in the starter app in the meantime?

[alexander-mart]

I was trying to move cookie module to dev section of package.json, by suggestion from @Kapsonfire#2810.

It was help to hide the errors, but app still reloading every second and reset store after each reload.

May be this is an another bug?

Browser console output:
Uncaught (in promise) TypeError: Failed to fetch dynamically imported module: http://localhost:3000/src/routes/index.svelte?import

[alexander-mart]

different module for cookie handling

@Conduitry Can you suggest some alternative cookie module, that we can trying to use in starter app?
I can test it and to report the result.

[bhodgesopi]

Think this is blocking the demo app from functioning correctly. The TODOs don't seem to enter correctly nor does the state save between tabs.

[benmccann]

The easiest fix would probably be to use cookie-esm which is an ESM port of the existing library. (I discovered it here: jshttp/cookie#87)

[alexander-mart]

The easiest fix would probably be to use cookie-esm

this package is available: https://www.npmjs.com/package/cookie-esm
but repo was lost: https://github.com/mkay581/cookie-esm 404

[alexander-mart]

still reloading every second and reset store after each reload.

May be this is an another bug?

It was a problem with VS Code SSH Remote and probably forwarded ports function.
I was confused why this is happens only with me, and i found the solution, but problem with SvelteKit maybe still exist: #1134

[benmccann]

I've sent a PR to convert cookie to ESM, which fixes this issue: jshttp/cookie#128

[alukach]

@benmccann Thanks for the patch, however I don't know if that did the trick:

 > node_modules/cookie/wrapper.mjs:1:22: error: Could not resolve "./index.js"
    1 │ import cjsModule from './index.js';
      ╵                       ~~~~~~~~~~~~

Unless maybe I'm doing something wrong?

Verbose

~/Projects/personal                                                                    
▶ npm init svelte@next svelte-kit-app-fix


create-svelte version 2.0.0-next.56

Welcome to the SvelteKit setup wizard!

SvelteKit is in public beta now. There are definitely bugs and some feature might not work yet.
If you encounter an issue, have a look at https://github.com/sveltejs/kit/issues and open a new one, if it is not already tracked.

✔ Which Svelte app template? › SvelteKit demo app
✔ Use TypeScript? … yes
✔ Add ESLint for code linting? … yes
✔ Add Prettier for code formatting? … yes
✔ Copied project files
✔ Added TypeScript support. To use it inside Svelte components, add lang="ts" to the attributes of a script tag.
✔ Added ESLint.
Readme for ESLint and Svelte: https://github.com/sveltejs/eslint-plugin-svelte3
✔ Added Prettier.
General formatting options: https://prettier.io/docs/en/options.html
Svelte-specific formatting options: https://github.com/sveltejs/prettier-plugin-svelte#options

Want to add other parts to your code base? Visit https://github.com/svelte-add/svelte-adders, a community project of commands to add particular functionality to Svelte projects


Next steps:
  1: cd svelte-kit-app-fix
  2: git init && git add -A && git commit -m "Initial commit" (optional step)
  3: npm install (or pnpm install, or yarn)
  4: npm run dev -- --open

To close the dev server, hit Ctrl-C

Stuck? Visit us at https://svelte.dev/chat


~/Projects/personal                                                                    
▶ cd svelte-kit-app-fix 

Projects/personal/svelte-kit-app-fix                                                   
▶ npm install 

added 195 packages, and audited 196 packages in 9s

35 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Projects/personal/svelte-kit-app-fix                                                   
▶ npm i benmccann/cookie#wrapper         

changed 1 package, and audited 196 packages in 3s

35 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Projects/personal/svelte-kit-app-fix                                                   
▶ npm run dev -- --open                  

> ~TODO~@0.0.1 dev
> svelte-kit dev "--open"


  SvelteKit v1.0.0-next.84

  local:   http://localhost:3000
  network: not exposed

  Use --host to expose server to other devices on this network


9:02:39 PM [vite] new dependencies found: cookie, @lukeed/uuid, updating...
 > node_modules/cookie/wrapper.mjs:1:22: error: Could not resolve "./index.js"
    1 │ import cjsModule from './index.js';
      ╵                       ~~~~~~~~~~~~

9:02:39 PM [vite] error while updating dependencies:
Error: Build failed with 1 error:
node_modules/cookie/wrapper.mjs:1:22: error: Could not resolve "./index.js"
    at failureErrorWithLog (/Users/alukach/Projects/personal/svelte-kit-app-fix/node_modules/esbuild/lib/main.js:1224:15)
    at buildResponseToResult (/Users/alukach/Projects/personal/svelte-kit-app-fix/node_modules/esbuild/lib/main.js:936:32)
    at /Users/alukach/Projects/personal/svelte-kit-app-fix/node_modules/esbuild/lib/main.js:1035:20
    at /Users/alukach/Projects/personal/svelte-kit-app-fix/node_modules/esbuild/lib/main.js:568:9
    at handleIncomingPacket (/Users/alukach/Projects/personal/svelte-kit-app-fix/node_modules/esbuild/lib/main.js:657:9)
    at Socket.readFromStdout (/Users/alukach/Projects/personal/svelte-kit-app-fix/node_modules/esbuild/lib/main.js:535:7)
    at Socket.emit (node:events:378:20)
    at Socket.EventEmitter.emit (node:domain:470:12)
    at addChunk (node:internal/streams/readable:313:12)
    at readableAddChunk (node:internal/streams/readable:288:9)
    
Projects/personal/svelte-kit-app-fix                                                  ⍉
▶ node --version
v15.10.0

[samklingdev]

You can replace the cookie package with a simple function that parses the header.

/src/hooks.ts

import { v4 as uuid } from '@lukeed/uuid';
import type { GetContext, Handle } from '@sveltejs/kit';

const parseCookie = (cookieString) => cookieString
	.split(';')
	.map(value => value.split('='))
	.reduce((acc, value) => {
	  acc[decodeURIComponent(value[0].trim())] = decodeURIComponent(value[1].trim());
	  return acc;
	}, {})

export const getContext: GetContext = (request) => {
	const cookies = parseCookie(request.headers.cookie || '');

	return {
		is_new: !cookies.userid,
		userid: cookies.userid || uuid()
	};
};

[benmccann]

@alukach oof. yeah, I accidentally pushed the wrong change. the CI was failing too. Should be fixed now!

[alukach]

@benmccann Unfortunately, I'm still hitting errors.

Verbose

▶ npm init svelte@next svelte-kit-app && cd svelte-kit-app && npm install && npm install benmccann/cookie#wrapper && npm run dev

create-svelte version 2.0.0-next.56

Welcome to the SvelteKit setup wizard!

SvelteKit is in public beta now. There are definitely bugs and some feature might not work yet.
If you encounter an issue, have a look at https://github.com/sveltejs/kit/issues and open a new one, if it is not already tracked.

✔ Which Svelte app template? › SvelteKit demo app
✔ Use TypeScript? … yes
✔ Add ESLint for code linting? … yes
✔ Add Prettier for code formatting? … yes
✔ Copied project files
✔ Added TypeScript support. To use it inside Svelte components, add lang="ts" to the attributes of a script tag.
✔ Added ESLint.
Readme for ESLint and Svelte: https://github.com/sveltejs/eslint-plugin-svelte3
✔ Added Prettier.
General formatting options: https://prettier.io/docs/en/options.html
Svelte-specific formatting options: https://github.com/sveltejs/prettier-plugin-svelte#options

Want to add other parts to your code base? Visit https://github.com/svelte-add/svelte-adders, a community project of commands to add particular functionality to Svelte projects


Next steps:
  1: cd svelte-kit-app
  2: git init && git add -A && git commit -m "Initial commit" (optional step)
  3: npm install (or pnpm install, or yarn)
  4: npm run dev -- --open

To close the dev server, hit Ctrl-C

Stuck? Visit us at https://svelte.dev/chat


added 195 packages, and audited 196 packages in 5s

35 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

changed 1 package, and audited 196 packages in 3s

35 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

> ~TODO~@0.0.1 dev
> svelte-kit dev


  SvelteKit v1.0.0-next.84

  local:   http://localhost:3000
  network: not exposed

  Use --host to expose server to other devices on this network


11:40:19 a.m. [vite] Error when evaluating SSR module /node_modules/cookie/index.cjs:
ReferenceError: exports is not defined
    at /node_modules/cookie/index.cjs:15:1
    at instantiateModule (/Users/alukach/Projects/personal/svelte-kit-app/node_modules/vite/dist/node/chunks/dep-5c642f9e.js:69033:166)
11:40:19 a.m. [vite] new dependencies found: cookie, @lukeed/uuid, updating...
11:40:19 a.m. [vite] ✨ dependencies updated, reloading page...
^C

Projects/personal/svelte-kit-app                                                                                    ⍉
▶ npm run dev

> ~TODO~@0.0.1 dev
> svelte-kit dev


  SvelteKit v1.0.0-next.84

  local:   http://localhost:3000
  network: not exposed

  Use --host to expose server to other devices on this network


11:42:45 a.m. [vite] Error when evaluating SSR module /node_modules/cookie/index.cjs:
ReferenceError: exports is not defined
    at /node_modules/cookie/index.cjs:15:1
    at instantiateModule (/Users/alukach/Projects/personal/svelte-kit-app/node_modules/vite/dist/node/chunks/dep-5c642f9e.js:69033:166)

[MH15]

Same. Installed just now, demo app is broken.

• node v14.16.1
• vite 2.1.0