Does it work with Sapper?

[tobiasmuehl]

import * as Pancake from '@sveltejs/pancake'

Can't get it to work with Sapper. The rollup-compiled server.js contains var pancake = require('@sveltejs/pancake'); which will break as the package doesn't have a main attribute in the package.json.

Looking at the rollup plugin config options, it sounds like rollup should be able to take care of it, but I can't work out which options to set

internal/modules/cjs/loader.js:1033
  throw err;
  ^

Error: Cannot find module '@sveltejs/pancake'
Require stack:
- /home/t/sapper-ts/__sapper__/dev/server/server.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:1030:15)
    at Function.Module._load (internal/modules/cjs/loader.js:899:27)
    at Module.require (internal/modules/cjs/loader.js:1090:19)
    at require (internal/modules/cjs/helpers.js:75:18)
    at Object.<anonymous> (/home/t/sapper-ts/__sapper__/dev/server/server.js:9:15)
    at Module._compile (internal/modules/cjs/loader.js:1201:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1221:10)
    at Module.load (internal/modules/cjs/loader.js:1050:32)
    at Function.Module._load (internal/modules/cjs/loader.js:938:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [ '/home/t/sapper-ts/__sapper__/dev/server/server.js' ]
}

Adding a main attribute changes the error to this:

internal/modules/cjs/loader.js:1048
    throw new ERR_REQUIRE_ESM(filename);
    ^

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /home/t/sapper-ts/node_modules/@sveltejs/pancake/index.mjs
    at Module.load (internal/modules/cjs/loader.js:1048:11)
    at Function.Module._load (internal/modules/cjs/loader.js:938:14)
    at Module.require (internal/modules/cjs/loader.js:1090:19)
    at require (internal/modules/cjs/helpers.js:75:18)
    at Object.<anonymous> (/home/t/sapper-ts/__sapper__/dev/server/server.js:9:15)
    at Module._compile (internal/modules/cjs/loader.js:1201:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1221:10)
    at Module.load (internal/modules/cjs/loader.js:1050:32)
    at Function.Module._load (internal/modules/cjs/loader.js:938:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12) {
  code: 'ERR_REQUIRE_ESM'

[mhkeller]

It could be the same issue as this: https://github.com/sveltejs/svelte/issues/5185

[tobiasmuehl]

Likely also related to #7 but none of the suggestions in that issue helped

[mhkeller]

Here's a possible solution @tobiasmuehl https://github.com/sveltejs/svelte/issues/5185#issuecomment-665369367

[tobiasmuehl]

Hope that works, but not sure how to test it. Do I just apply the changes from https://github.com/mhkeller/lc-ssr-test/pull/1/commits/03c6f2080c6e1b0f2ed24f0882495107a5a79acc as a patch on top of my repo? Will changing the include path to build it break hot reload in development? (https://github.com/mhkeller/lc-ssr-test/pull/1/commits/03c6f2080c6e1b0f2ed24f0882495107a5a79acc#diff-168726dbe96b3ce427e7fedce31bb0bcL2)

[mhkeller]

I'm not sure how it would apply. i think the pancake site is built with sapper so you could try seeing what that config is like. sorry i can't be more helpful

[tobiasmuehl]

Could be the alias rollup config https://github.com/Rich-Harris/pancake/blob/feef3af9346e5d7b56b9ef1c3dff2e4ac53f4e20/site/rollup.config.js#L27

[jrschumacher]

I don't think the alias is the issue, but it is aliasing the local files. I think its something with the package.json file (maybe rollup), but I haven't sussed it out.

As a workaround, copy /components, /helpers, /utils, and index.mjs to your components dir (e.g. /src/components/pancake) and use a relative path (e.g. import * as Pancake from './pancake';). Additionally, I can't get the alias to work without the same error.