ReferenceError: module is not defined

[YugoCode]

First of all thank you making it easier to integrate ReCAPTCHA! :)

I'm using the latest version of sveltekit (SvelteKit v1.0.0-next.203) and just followed your instructions in the README one-by-one.

When I start the dev environment with npm run dev -- --open, I run into the error message below and the page won't get loaded at all.

My svelte.config.js looks like this:

import adapter from '@sveltejs/adapter-static';
import sveltePreprocess from 'svelte-preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    preprocess: sveltePreprocess(),
    kit: {
        adapter: adapter({
            // default options are shown
            pages: 'build',
            assets: 'build',
            fallback: null,
            precompress: false
        }),
        // hydrate the <div id="svelte"> element in src/app.html
        target: '#svelte'
    }
};

export default config;

Error Message

[vite] Error when evaluating SSR module /node_modules/debug/src/index.js?v=338ddabd:
ReferenceError: module is not defined
    at /node_modules/debug/src/index.js?v=338ddabd:9:2
    at instantiateModule (/Users/**********/node_modules/vite/dist/node/chunks/dep-24a6b4c4.js:60096:15)

Do you know what the problem is? I don't even need SSR, it will be just a static page, but since the features even state 'svelte server side rendering (SSR) friendly', I guess I'm doing something wrong? 😅

[basaran]

hi, it seems the debug package is not being installed somehow. have you installed svelte-recaptcha-v2 as a dev dependency?

You can also try installing the debug package manually.

pnpm install -D debug

and then try again. Let me know how it goes, I will take a look at it, may be something is missing in my package.json.

[YugoCode]

Thank you so much for your quick reply! :)

have you installed svelte-recaptcha-v2 as a dev dependency?

Yes, I did npm install -D svelte-recaptcha-v2. I'm using npm instead of pnpm, could that be a problem?

You can also try installing the debug package manually.

Did it (again with npm) and now there are no error message anymore 👍 But the website now is just all white 😅 In the beginning I see my hero page for a second, but then it disappears and everything is just white. I don't have any error messages. Neither in the browser console nor in my terminal. But when I look into the debug messages, I don't see the output of a certain script I use (fullpage.js), which I usually do. I confirmed that the issue only arrises when I add following line: import { Recaptcha, recaptcha, observer } from 'svelte-recaptcha-v2';

Do you have an idea what that could be? In the meantime I could try to setup a blank sveltekit project and try to reproduce it there, if that helps you 👍

[basaran]

well, you shouldn't mix npm, yarn or pnpm together :)

definitely try on a blank project, it should work out of the box. Recaptcha package is very simple. I only included the debug as a dependency to make it easier to troubleshoot things which you most likely would need to when dealing with google libs.

You can also try cleaning up your node_modules folder and reinstall everything whichever the package manager you are using.

[YugoCode]

Thank you for the hints, I tried them but unfortunately I still have the same issue. Therefore I have setup a blank sveltekit project and and it turns out that the same issue arrises.

Here are the steps:

npm init svelte@next my-app # select demo app
cd my-app
npm install
npm install -D svelte-recaptcha-v2
# Add the import line and the Recaptcha component to index.svelte
npm run dev

You will now run into the ReferenceError: module is not defined error again.

npm install -D debug
npm run dev

The error message will be gone and you won't see any error messages in the console, but if you look at the website you will see:

500: import not found: default

And the actual content of the page won't also be loaded (same as in my project), though it loads the navigation bar. If I remove the import and the Recaptcha component everything works fine again.

Any idea? :(

[basaran]

I will try to take a look at it later today and update you.

[YugoCode]

Thank you very much again! :)

Just one additional information: I tested this on Firefox initially. On Safari I get the same issue, but a little bit more detailed error message. Maybe it helps you 👍

[basaran]

Okay, I checked and it doesn't work :)

The reason is related to the latest sveltekit version has latest vite bundler which is not recognizing the default export from the debug module which is common.js

If you try to build, it will build fine. If you use svelte and not sveltekit, it is also fine. However, this needs to be fixed. I will look for a replacement for debug.js and push a new release.

I don't think it will happen today though, but I will try to address it in the next few days.

[rallisf1]

Try #3 and let me know how it goes.

[basaran]

Guys, sorry about this. It's been busy lately and hopefully I will get to this sooner than later. The issue is not with the package but the way vite started to bundle the dependencies. One approach in the meantime would be to clone the git repository into your project and take out the debug import and statements.

Another would be to disable sveltekit during development, and enable it before compiling. Last time I tested it, it was compiling fine and would init fine as well.

[johnny-mh]

same issue. I've used with sveltekit.

ReferenceError: module is not defined
  at /@fs/Users/johnny/Projects/loantalk/node_modules/debug/src/index.js?v=e1652a3c:7:2
  at instantiateModule (/Users/johnny/Projects/loantalk/node_modules/vite/dist/node/chunks/dep-9c153816.js:56193:15)

<Recaptcha> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules

[rafaelspring]

@basaran Would you mind moving svelte-recaptcha-v2 to NPM instead of PNPM?

Most people use NPM and I had lots of trouble with PNPM (https://github.com/pnpm/pnpm/issues/724#issuecomment-1464947089), that's why I'm unable to use svelte-recaptcha-v2, even though the project looks great and I'd really like to use it.

Please consider it. Thank you.

[basaran]

sorry for the delay, I am going to make a new push that will address this building issues altogether and will switch npm at the time. Closing this for now.