search

bfanger / svelte-preprocess-react

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

500 Internal Error #40

Closed happyeric77 closed 2 months ago

happyeric77 commented 2 months ago

Hello team, I created a brand new svelte project using npx create-svelte notifi-svelte-example. Then I follow exactly the doc mentioned.

Please see my package.json below:

{
  "name": "notifi-svelte-example",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "dev": "vite dev",
    "build": "vite build",
    "preview": "vite preview",
    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
  },
  "devDependencies": {
    "@sveltejs/adapter-auto": "^3.0.0",
    "@sveltejs/kit": "^2.0.0",
    "@sveltejs/vite-plugin-svelte": "^3.0.0",
    "svelte": "^4.2.7",
    "svelte-check": "^3.6.0",
    "tslib": "^2.4.1",
    "typescript": "^5.0.0",
    "vite": "^5.0.3"
  },
  "type": "module",
  "dependencies": {
    "react-youtube": "^10.1.0",
    "svelte-preprocess-react": "^0.17.0",
    "react": "^18",
    "react-dom": "^18"
  }
}

And my svelte.config.js is like below:

import adapter from "@sveltejs/adapter-auto";
import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
import preprocessReact from "svelte-preprocess-react/preprocessReact";
/** @type {import('@sveltejs/kit').Config} */
const config = {
  // Consult https://kit.svelte.dev/docs/integrations#preprocessors
  // for more information about preprocessors
  preprocess: [vitePreprocess(), preprocessReact()],

  kit: {
    // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
    // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
    // See https://kit.svelte.dev/docs/adapters for more information about adapters.
    adapter: adapter(),
  },
};

export default config;

Then the +page.svelte:

<script>
  import YouTube from "react-youtube";
</script>
<react:YouTube videoId="AdNJ3fydeao" />
<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>

After all setting up, I run npm run dev. Then the error shows on backend like below

VITE v5.3.3  ready in 533 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
    at renderElement (/Users/macbookpro4eric/Projects/notifi/ref/notifi-svelte-example/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6058:9)
    at renderNodeDestructiveImpl (/Users/macbookpro4eric/Projects/notifi/ref/notifi-svelte-example/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6119:11)
    at renderNodeDestructive (/Users/macbookpro4eric/Projects/notifi/ref/notifi-svelte-example/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6091:14)
    at renderContextProvider (/Users/macbookpro4eric/Projects/notifi/ref/notifi-svelte-example/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5935:3)
    at renderElement (/Users/macbookpro4eric/Projects/notifi/ref/notifi-svelte-example/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6032:11)
    at renderNodeDestructiveImpl (/Users/macbookpro4eric/Projects/notifi/ref/notifi-svelte-example/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6119:11)
    at renderNodeDestructive (/Users/macbookpro4eric/Projects/notifi/ref/notifi-svelte-example/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6091:14)
    at retryTask (/Users/macbookpro4eric/Projects/notifi/ref/notifi-svelte-example/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6543:5)
    at performWork (/Users/macbookpro4eric/Projects/notifi/ref/notifi-svelte-example/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6591:7)
    at /Users/macbookpro4eric/Projects/notifi/ref/notifi-svelte-example/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6915:12
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
    at renderElement (/Users/macbookpro4eric/Projects/notifi/ref/notifi-svelte-example/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6058:9)
    at renderNodeDestructiveImpl (/Users/macbookpro4eric/Projects/notifi/ref/notifi-svelte-example/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6119:11)
    at renderNodeDestructive (/Users/macbookpro4eric/Projects/notifi/ref/notifi-svelte-example/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6091:14)
    at renderContextProvider (/Users/macbookpro4eric/Projects/notifi/ref/notifi-svelte-example/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5935:3)
    at renderElement (/Users/macbookpro4eric/Projects/notifi/ref/notifi-svelte-example/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6032:11)
    at renderNodeDestructiveImpl (/Users/macbookpro4eric/Projects/notifi/ref/notifi-svelte-example/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6119:11)
    at renderNodeDestructive (/Users/macbookpro4eric/Projects/notifi/ref/notifi-svelte-example/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6091:14)
    at retryTask (/Users/macbookpro4eric/Projects/notifi/ref/notifi-svelte-example/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6543:5)
    at performWork (/Users/macbookpro4eric/Projects/notifi/ref/notifi-svelte-example/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6591:7)
    at /Users/macbookpro4eric/Projects/notifi/ref/notifi-svelte-example/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6915:12

At frontend, it just simply renders nothing with 500 internal error. Screenshot 2024-07-11 at 18 01 37

Cannot really tell what is happening and not sure if I do miss anything. I also share the project on my github repo herewith: https://github.com/happyeric77/svelte-react-example. Is it possible to give me a hint?

bfanger commented 2 months ago

Looks like server side rendering of class components isn't working as expected.

A workaround is to disable SSR

in svelte.config.js: 

preprocessReact({ ssr: false })`

or

Disable SSR for a specific +page.js(also affects Svelte components)

export const ssr = false;

Thanks for reporting the issue, i'll investigate the issue further at a later moment, this should work or at least not result in a 500.

bfanger commented 2 months ago

Hmm, either Vite or the react-youtube package is doing something wrong.

<script>
    import DefaultExport from "react-youtube";
    let YouTube = DefaultExport.default || DefaultExport // <- fixes the issue
  </script>

<react:YouTube videoId="AdNJ3fydeao" />

Client imports dist/YouTube.esm.js but the Server imports dist/YouTube.js from react-youtube.

On the server YouTube was not the component but an object with a property default containing the component.

happyeric77 commented 2 months ago

Thank you so much! @bfanger. It at least unblocks me at this point🙏 . Feel free to close this issue if it is not supposed to have further change.

BTW totally not related to this topic but I just want to ask do we have any reference of using react contexts so that I will be able to consume the context at children components by wrapping the parent component with react context component. ex. how to retrieve the exported context value in svelte component

bfanger commented 2 months ago

Examples are here: https://github.com/bfanger/svelte-preprocess-react/tree/main/src/routes

context and hooks are relevant,

To read React context in Svelte you’d run the useContext using the hooks helper