Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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 #1113

Closed
alexander-mart opened this issue Apr 18, 2021 · 16 comments
Labels
bug Something isn't working
Milestone

Comments

@alexander-mart
Copy link
Contributor

alexander-mart commented Apr 18, 2021

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.

@babichjacob babichjacob added the bug Something isn't working label Apr 18, 2021
@Conduitry
Copy link
Member

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
Copy link
Contributor Author

alexander-mart commented Apr 18, 2021

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
Copy link
Contributor Author

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
Copy link

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
Copy link
Member

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
Copy link
Contributor Author

alexander-mart commented Apr 19, 2021

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

@benmccann benmccann added this to the 1.0 milestone Apr 19, 2021
@alexander-mart
Copy link
Contributor Author

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
Copy link
Member

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

@alukach
Copy link

alukach commented Apr 20, 2021

@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
Copy link

samklingdev commented Apr 20, 2021

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
Copy link
Member

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

@alukach
Copy link

alukach commented Apr 20, 2021

@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
Copy link

MH15 commented Apr 20, 2021

Same. Installed just now, demo app is broken.

  • node v14.16.1
  • vite 2.1.0

@benmccann
Copy link
Member

Hmm, you're right. Converting to ESM isn't enough. I think we need Vite to do a dynamic import if an ESM package is available but it looks like it always tries to require it.

I did find another workaround that works:

import { createRequire } from 'module';
const require = createRequire(import.meta.url);
const cookie = require('cookie');

@MH15
Copy link

MH15 commented Apr 21, 2021

I was able to fix it by using the cookie-esm module mentioned above. I also found a esm-cookie module that seems to have the Github page intact.

I have yet to try the latest suggestion by @benmccann . One of these changes needs to be applied to the starter project though, this is a pretty halting error for anyone beginning Svelte.

@benmccann
Copy link
Member

I think this was fixed by #1148 which removes the code below from the template's svelte.config.cjs:

		vite: {
			ssr: {
				noExternal: Object.keys(pkg.dependencies || {})
			}
		}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

8 participants