npm run dev works build does not -laravel inertia react

Please Help.

when I serve the page if I have npm run dev running it works

if I run npm run build page does not load (no logical errors displayed/saved anywhere).

I also tried with php artisan inertia:start-ssr

there I get errors like:

TypeError: styled.div is not a function
    at file:///home/azael/Documents/GitHub/casatrade/bootstrap/ssr/assets/LanguageDropdwn-CxzE3EZx.js:5:37
    at ModuleJob.run (node:internal/modules/esm/module_job:262:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:474:24)
    at async V (file:///home/azael/Documents/GitHub/casatrade/node_modules/@inertiajs/react/dist/index.esm.js:5:1570)
    at async Server.<anonymous> (file:///home/azael/Documents/GitHub/casatrade/node_modules/@inertiajs/core/dist/server.esm.js:1:527)

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.jsx',
            ssr: 'resources/js/ssr.jsx',
            refresh: true,
        }),
        react(),
    ],
});

package.json

{
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build && vite build --ssr"
    },
    "devDependencies": {
        "@headlessui/react": "^2.0.0",
        "@inertiajs/react": "^1.0.0",
        "@tailwindcss/forms": "^0.5.3",
        "@vitejs/plugin-react": "^4.2.0",
        "autoprefixer": "^10.4.12",
        "axios": "^1.6.4",
        "laravel-vite-plugin": "^1.0",
        "postcss": "^8.4.31",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "tailwindcss": "^3.2.1",
        "vite": "^5.0"
    },
    "dependencies": {
        "@craftjs/core": "^0.2.8",
        "@craftjs/layers": "^0.2.5",
        "@emotion/react": "^11.13.0",
        "@emotion/styled": "^11.13.0",
        "@mui/material": "^5.16.4",
        "@tiptap/extension-color": "^2.5.9",
        "@tiptap/extension-image": "^2.5.9",
        "@tiptap/extension-text-style": "^2.5.9",
        "@tiptap/extension-underline": "^2.5.9",
        "@tiptap/pm": "^2.5.9",
        "@tiptap/react": "^2.5.9",
        "@tiptap/starter-kit": "^2.5.9",
        "lzutf8": "^0.6.3",
        "moment": "^2.30.1",
        "react-slick": "^0.30.2",
        "react-tooltip": "^5.28.0",
        "react-video-thumbnail": "^0.1.3",
        "slick-carousel": "^1.8.1",
        "styled-components": "^6.1.12"
    }
}

LaryAI

1 year ago

Best Answer

Level 58

The issue you're encountering seems to be related to the usage of styled-components in your SSR (Server-Side Rendering) setup. The error message TypeError: styled.div is not a function suggests that there might be a problem with how styled-components is being imported or used in your SSR build.

Here are a few steps to troubleshoot and potentially resolve the issue:

Check Import Statements: Ensure that you are importing styled-components correctly in your components. For example:
```
import styled from 'styled-components';
```
Ensure Consistent Versions: Make sure that the version of styled-components you are using is compatible with your setup. You can check the version in your package.json:
```
"styled-components": "^6.1.12"
```

Update Vite Configuration: Sometimes, the Vite configuration might need adjustments for SSR. Ensure that your vite.config.js is correctly set up for SSR. Here is an example configuration:

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.jsx',
            ssr: 'resources/js/ssr.jsx',
            refresh: true,
        }),
        react(),
    ],
    ssr: {
        noExternal: ['styled-components']
    }
});

The ssr.noExternal option ensures that styled-components is bundled with your SSR build.

Check SSR Entry Point: Ensure that your SSR entry point (resources/js/ssr.jsx) is correctly set up and does not have any issues with imports or usage of styled-components.
Build and Run SSR: After making these changes, try running the build and SSR commands again:
```
npm run build
php artisan inertia:start-ssr
```

If the issue persists, you might want to create a minimal reproducible example and share it on the Laracasts forum or GitHub for further assistance. This will help others to better understand the problem and provide more targeted solutions.

1 like

Please or to participate in this conversation.