Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

laravel inertia react ssr can not start ssr server #656

Open
deniznet opened this issue Aug 31, 2024 · 5 comments
Open

laravel inertia react ssr can not start ssr server #656

deniznet opened this issue Aug 31, 2024 · 5 comments

Comments

@deniznet
Copy link

deniznet commented Aug 31, 2024 •
edited
Loading

Hello!
I'm tring run ssr in exist project laravel+inertia+react(typescript). All made by https://inertiajs.com/server-side-rendering.
Run "npm run build" without error, but when I started "php artisan inertia:start-ssr", I get error:

file:///F:/Projects/php/laravel/myproj/bootstrap/ssr/ssr.js:12
import { MathJaxContext, MathJax } from "better-react-mathjax";
                         ^^^^^^^
SyntaxError: Named export 'MathJax' not found. The requested module 'better-react-mathjax' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'better-react-mathjax';
const { MathJaxContext, MathJax } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:122:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:188:5)
    at async DefaultModuleLoader.import (node:internal/modules/esm/loader:228:24)
    at async loadESM (node:internal/process/esm_loader:40:7)
    at async handleMainPromise (node:internal/modules/run_main:66:12)

Node.js v20.5.1

I tried remove MathJax from project, but get the same error about another package.

My ssr.jsx:

import { createInertiaApp } from '@inertiajs/react'
import createServer from '@inertiajs/react/server'
import ReactDOMServer from 'react-dom/server'

createServer(page =>
    createInertiaApp({
        page,
        render: ReactDOMServer.renderToString,
        resolve: name => {
            const pages = import.meta.glob('./Pages/**/*.tsx', { eager: true })
            return pages[`./Pages/${name}.tsx`]
        },
        setup: ({ App, props }) => <App {...props} />,
    }),
)

app.tsx:

import './bootstrap';
import '../css/app.css';

import { createRoot, hydrateRoot } from 'react-dom/client';
import { createInertiaApp } from '@inertiajs/react';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';


const appName = import.meta.env.VITE_APP_NAME || 'Laravel';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.tsx`, import.meta.glob('./Pages/**/*.tsx')),
    setup({ el, App, props }) {
        if (import.meta.env.DEV) {
            createRoot(el).render(<App {...props} />);
            return
        }

        hydrateRoot(el, <App {...props} />);
    },
    progress: {
        color: '#fdcf11', //4B5563
    },
});

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.tsx',
            ssr: 'resources/js/ssr.jsx',
            refresh: true,
        }),
        react(),
    ],
});

tsconfig.json:

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@/*": ["resources/js/*"],
            "ziggy-js": ["./vendor/tightenco/ziggy"]
        }
    },
    "exclude": ["node_modules", "public"]
}

app.blade.php:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title inertia>{{ config('app.name', 'Laravel') }}</title>
        <link rel="shortcut icon" sizes="any" type="image/svg+xml" href="/favicon.svg">

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />

        <!-- Scripts -->
        @routes()
        @viteReactRefresh
        @vite(['resources/js/app.tsx', "resources/js/Pages/{$page['component']}.tsx"])
        @inertiaHead

    </head>
    <body class="font-sans antialiased bg-tsobackground dark:bg-tsodarkbackground-700">
        @inertia


    </body>
</html>

composer.json:

{
    "name": "laravel/laravel",
    "type": "project",
    "description": "The skeleton application for the Laravel framework.",
    "keywords": ["laravel", "framework"],
    "license": "MIT",
    "require": {
        "php": "^8.1",
        "ext-xmlreader": "*",
        "defstudio/telegraph": "^1.49",
        "guzzlehttp/guzzle": "^7.2",
        "inertiajs/inertia-laravel": "^1.0",
        "jenssegers/agent": "^2.6",
        "laravel/framework": "^11.0",
        "laravel/pulse": "^1.2",
        "laravel/reverb": "@beta",
        "laravel/sanctum": "^4.0",
        "laravel/tinker": "^2.8",
        "predis/predis": "^2.2",
        "spatie/laravel-permission": "^6.7",
        "tightenco/ziggy": "^2.0"
    },
    "require-dev": {
        "fakerphp/faker": "^1.9.1",
        "laravel/breeze": "^2.0",
        "laravel/pint": "^1.0",
        "laravel/sail": "^1.18",
        "mockery/mockery": "^1.4.4",
        "nunomaduro/collision": "^8.1",
        "phpunit/phpunit": "^11.0",
        "spatie/laravel-ignition": "^2.0"
    },
    "autoload": {
        "psr-4": {
            "App\\": "app/",
            "Database\\Factories\\": "database/factories/",
            "Database\\Seeders\\": "database/seeders/"
        }
    },
    "autoload-dev": {
        "psr-4": {
            "Tests\\": "tests/"
        }
    },
    "scripts": {
        "post-autoload-dump": [
            "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
            "@php artisan package:discover --ansi"
        ],
        "post-update-cmd": [
            "@php artisan vendor:publish --tag=laravel-assets --ansi --force"
        ],
        "post-root-package-install": [
            "@php -r \"file_exists('.env') || copy('.env.example', '.env');\""
        ],
        "post-create-project-cmd": [
            "@php artisan key:generate --ansi"
        ]
    },
    "extra": {
        "laravel": {
            "dont-discover": []
        }
    },
    "config": {
        "optimize-autoloader": true,
        "preferred-install": "dist",
        "sort-packages": true,
        "allow-plugins": {
            "pestphp/pest-plugin": true,
            "php-http/discovery": true
        }
    },
    "minimum-stability": "stable",
    "prefer-stable": true
}

package.json:

{
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "tsc && vite build && vite build --ssr"
    },
    "devDependencies": {
        "@editorjs/embed": "^2.7.4",
        "@editorjs/table": "^2.3.0",
        "@headlessui/react": "^2.0.0",
        "@inertiajs/react": "^1.0.0",
        "@tailwindcss/forms": "^0.5.3",
        "@types/node": "^18.13.0",
        "@types/nprogress": "^0.2.3",
        "@types/react": "^18.0.28",
        "@types/react-dom": "^18.0.10",
        "@types/ziggy-js": "^1.3.2",
        "@vitejs/plugin-react": "^4.2.0",
        "autoprefixer": "^10.4.12",
        "axios": "^1.1.2",
        "editorjs-hyperlink": "^1.0.6",
        "editorjs-table": "^1.4.10",
        "editorjs-undo": "^1.0.1",
        "laravel-echo": "^1.16.1",
        "laravel-vite-plugin": "^0.8.0",
        "postcss": "^8.4.31",
        "pusher-js": "^8.4.0-rc2",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "tailwindcss": "^3.2.1",
        "typescript": "^5.0.2",
        "vite": "^4.0.0"
    },
    "dependencies": {
        "@codexteam/ajax": "^4.2.0",
        "@codexteam/icons": "^0.3.0",
        "@editorjs/delimiter": "^1.4.0",
        "@editorjs/editorjs": "^2.29.1",
        "@editorjs/header": "^2.8.1",
        "@editorjs/inline-code": "^1.5.0",
        "@editorjs/link": "^2.6.2",
        "@editorjs/list": "^1.9.0",
        "@editorjs/paragraph": "^2.11.4",
        "@formkit/tempo": "^0.1.2",
        "@inertiajs/server": "^0.1.0",
        "@react-input/mask": "^1.2.4",
        "better-react-mathjax": "^2.0.3",
        "codex-notifier": "^1.1.2",
        "codex-tooltip": "^1.0.5",
        "editorjs-mathlive": "^1.0.1",
        "highlight.js": "^11.9.0",
        "mathjax-full": "^3.2.2",
        "mathlive": "^0.98.6",
        "nprogress": "^0.2.0",
        "react-arborist": "^3.4.0",
        "react-feather": "^2.0.10",
        "sortablejs": "^1.15.2"
    }
}

What I do wrong? Thank you!
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@deniznet and others