Unexpected Token error when importing module

[K-JAX]

After importing the module with the line: import { Recaptcha, recaptcha, observer } from "svelte-recaptcha-v2";

I immediately get the following build error when compiling:

[!] Error: Unexpected token
node_modules/svelte-recaptcha-v2/node_modules/debug/src/browser.js (119:45)
117:   // initialized. Since we know we're in Chrome, we'll just detect this case
118:   // explicitly
119:   if (typeof window !== 'undefined' && window.process && (window.process.type === 'renderer' || window.process.__nwjs)) {
                                                   ^
120:     return true;
121:   }
Error: Unexpected token
    at error (/home/node/app/node_modules/rollup/dist/shared/node-entry.js:5400:30)
    at Module.error (/home/node/app/node_modules/rollup/dist/shared/node-entry.js:9824:16)
    at tryParse (/home/node/app/node_modules/rollup/dist/shared/node-entry.js:9717:23)
    at Module.setSource (/home/node/app/node_modules/rollup/dist/shared/node-entry.js:10080:33)
    at /home/node/app/node_modules/rollup/dist/shared/node-entry.js:12366:20
    at async Promise.all (index 3)
    at async Promise.all (index 0)
    at async Promise.all (index 3)
    at async Promise.all (index 12)
    at async Promise.all (index 2)`

Let me know if there's any other details I should give to be more helpful :)

[basaran]

That's odd, have you installed it with --save-dev? If that's the case, please also try installing the debug package and try to compile again.

[K-JAX]

Interesting. I made sure svelte-recaptcha-v2 was a dev dependency as well as debug as you suggested. I have also removed the import module line I mentioned in my first comment and now I still receive the error but directly from debug this time.

node_modules/debug/src/browser.js (119:45)
117:   // initialized. Since we know we're in Chrome, we'll just detect this case
118:   // explicitly
119:   if (typeof window !== 'undefined' && window.process && (window.process.type === 'renderer' || window.process.__nwjs)) {
                                                   ^
120:     return true;
121:   }

So I believe there is something wrong with my configuration, not anything with the svelte-recaptcha-v2 package. I will post here if I find anything that may help anyone in the future.

[basaran]

svelte-recaptcha-v2 already bundles the debug as a dependency so it shouldn't have been required. I just wanted to rule out a possible inconsistency by installing it separately. Let me know if you find anything though. I will make a demo repository and link it in the next release.

Does it fail for you in dev mode too or just when you try to build?

[K-JAX]

I found my issue and it was my configuration as I suspected. In case a Google search leads someone to this comment, this is for you-

If you are passing environment variables in your rollup.config.js to your app like this:

replace({
            process: JSON.stringify({
                env: {
                    api_url:
                        process.env.NODE_ENV === "production"
                            ? "https://your-endpoint.com/wp-json"
                            : "http://localhost:8080/wp-json"
                }
            })
}),

You are effectively overwriting the process object and it may cause strange errors with your dependencies. You need to change it to something like this:

replace({
    "process.env.api_url": JSON.stringify(
                process.env.NODE_ENV === "production"
                    ? "https://your-endpoint/wp-json"
                    : "http://localhost:8080/wp-json"
            )
}),

[basaran]

now I recall having a similar problem when I used to define globals in vite config, which caused issues left and right.

I switched to using env-cmd and replaced the package.json script as such:

        "dev": "env-cmd -f .env.development svelte-kit dev --host 0.0.0.0",

You may want to look into it.