search

bfanger / svelte-preprocess-react

Seamlessly use React components inside a Svelte app
MIT License
126 stars 6 forks source link

Internal server error: Cannot use import statement outside a module #30

Closed mmailaender closed 1 year ago

mmailaender commented 1 year ago

If I try to import the following React/Nextjs component: import { ClerkProvider } from "@clerk/nextjs"; in src/routes/+layout.svelte I'm getting the following error

Internal server error: Cannot use import statement outside a module
      at Object.compileFunction (https://sveltejskittemplatedefaultwgzm-0gfk.w-credentialless.staticblitz.com/blitz.961159ce.js:72:4777)
      at wrapSafe (https://sveltejskittemplatedefaultwgzm-0gfk.w-credentialless.staticblitz.com/blitz.961159ce.js:56:13586)
      at Module._compile (https://sveltejskittemplatedefaultwgzm-0gfk.w-credentialless.staticblitz.com/blitz.961159ce.js:56:13951)
      at Module._extensions..js (https://sveltejskittemplatedefaultwgzm-0gfk.w-credentialless.staticblitz.com/blitz.961159ce.js:56:14989)
      at Module.load (https://sveltejskittemplatedefaultwgzm-0gfk.w-credentialless.staticblitz.com/blitz.961159ce.js:56:13005)
      at Module._load (https://sveltejskittemplatedefaultwgzm-0gfk.w-credentialless.staticblitz.com/blitz.961159ce.js:56:9949)
/home/projects/sveltejs-kit-template-default-wgzmck/node_modules/.pnpm/@clerk+nextjs@4.23.2_next@13.4.19_react-dom@18.2.0_react@18.2.0/node_modules/@clerk/nextjs/dist/esm/index.js:1
import {
^^^^^^

Stackblitz: https://stackblitz.com/edit/sveltejs-kit-template-default-wgzmck?file=src%2Froutes%2F%2Blayout.svelte

bfanger commented 1 year ago

This is not an issue with svelte-preprocess-react, but with@clerk/nextjs and node. As @clerk/nextjs is not bundled as an ESM package. (It's missing the "type": "module" in it's package.json)

// test.js
import * as clerk from "@clerk/nextjs";
node test.js
(node:13751) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
/Users/bob/project/node_modules/.pnpm/@clerk+nextjs@4.23.3_next@13.4.19_react-dom@18.2.0_react@18.2.0/node_modules/@clerk/nextjs/dist/esm/index.js:1
import {
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1153:20)
    at Module._compile (node:internal/modules/cjs/loader:1197:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1287:10)
    at Module.load (node:internal/modules/cjs/loader:1091:32)
    at Module._load (node:internal/modules/cjs/loader:938:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:165:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:192:25)
    at async DefaultModuleLoader.import (node:internal/modules/esm/loader:228:24)
    at async loadESM (node:internal/process/esm_loader:40:7)

Node.js v20.5.1

Looks like Nextjs (and Webpack) does more processing than Vite, you might want to investigate it its possible pre-bundle the ssr dependencies.

The package does load in the browser, but needs an :

// vite.config.js
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [sveltekit()],
    define: {
      'process.env.__NEXT_STRICT_NEXT_HEAD': 'false'
    },
});

https://stackblitz.com/edit/sveltejs-kit-template-default-a7kejt?file=vite.config.js,src%2Froutes%2F%2Blayout.ts