Skip to content
New issue

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

#

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

Already on GitHub? # 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!
# for free to join this conversation on GitHub. Already have an account? # 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