search

bfanger / svelte-preprocess-react

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

copile error on sveltekit 2 #33

Closed ryoppippi closed 7 months ago

ryoppippi commented 7 months ago

Reproduction

svelte.config.js

import adapter from '@sveltejs/adapter-auto';
import preprocessReact from 'svelte-preprocess-react/preprocessReact';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @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;

+page.svelte

<script>
  import YouTube from "react-youtube";
</script>

<react:YouTube videoId="AdNJ3fydeao" />

and when I run npm run build

vite v5.0.12 building SSR bundle for production...
transforming (1) .svelte-kit/generated/server/internal.jsCould not detect React version. Assuming "react@18"
Could not detect React version. Assuming "react@18"
✓ 7 modules transformed.
[vite]: Rollup failed to resolve import "react-dom/client" from "/Users/kimura_ryotaro/play/reactsvelte/src/routes/+page.svelte".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
error during build:
Error: [vite]: Rollup failed to resolve import "react-dom/client" from "/Users/kimura_ryotaro/play/reactsvelte/src/routes/+page.svelte".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
    at viteWarn (file:///Users/kimura_ryotaro/play/reactsvelte/node_modules/.pnpm/vite@5.0.12/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:67319:27)
    at onRollupWarning (file:///Users/kimura_ryotaro/play/reactsvelte/node_modules/.pnpm/vite@5.0.12/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:67347:9)
    at onwarn (file:///Users/kimura_ryotaro/play/reactsvelte/node_modules/.pnpm/vite@5.0.12/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:67064:13)
    at file:///Users/kimura_ryotaro/play/reactsvelte/node_modules/.pnpm/rollup@4.9.6/node_modules/rollup/dist/es/shared/node-entry.js:17420:13
    at Object.logger [as onLog] (file:///Users/kimura_ryotaro/play/reactsvelte/node_modules/.pnpm/rollup@4.9.6/node_modules/rollup/dist/es/shared/node-entry.js:19078:9)
    at ModuleLoader.handleInvalidResolvedId (file:///Users/kimura_ryotaro/play/reactsvelte/node_modules/.pnpm/rollup@4.9.6/node_modules/rollup/dist/es/shared/node-entry.js:18024:26)
    at file:///Users/kimura_ryotaro/play/reactsvelte/node_modules/.pnpm/rollup@4.9.6/node_modules/rollup/dist/es/shared/node-entry.js:17982:26
 ELIFECYCLE  Command failed with exit code 1.
ryoppippi commented 7 months ago

oh OK when I install react-build it works. However there is a compile error

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
    at Ib (/Users/kimura_ryotaro/play/reactsvelte/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server-legacy.node.production.min.js:72:155)
    at W (/Users/kimura_ryotaro/play/reactsvelte/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server-legacy.node.production.min.js:73:89)
    at Ib (/Users/kimura_ryotaro/play/reactsvelte/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server-legacy.node.production.min.js:71:304)
    at W (/Users/kimura_ryotaro/play/reactsvelte/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server-legacy.node.production.min.js:73:89)
    at Eb (/Users/kimura_ryotaro/play/reactsvelte/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server-legacy.node.production.min.js:82:216)
    at Vb (/Users/kimura_ryotaro/play/reactsvelte/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server-legacy.node.production.min.js:97:145)
    at exports.renderToString (/Users/kimura_ryotaro/play/reactsvelte/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server-legacy.node.production.min.js:100:108)
    at Object.$$render (file:///Users/kimura_ryotaro/play/reactsvelte/.svelte-kit/output/server/entries/pages/_page.svelte.js:168:26)
    at file:///Users/kimura_ryotaro/play/reactsvelte/.svelte-kit/output/server/entries/pages/_page.svelte.js:244:64
    at Object.$$render (file:///Users/kimura_ryotaro/play/reactsvelte/.svelte-kit/output/server/chunks/ssr.js:102:18)
ryoppippi commented 7 months ago

OK this is not a bug for this prjecy, but react-youtube thanks