Uncaught SyntaxError: The requested module

[kvraamkey]

Versions:

• @inertiajs/inertia version: 0.11.0
• @inertiajs/inertia-svelte version: 0.8.0

Describe the problem:

when i using with laravel-vite ,, getting below error.

Uncaught SyntaxError: The requested module '/node_modules/@inertiajs/inertia/dist/index.js?v=8fdd45f8' does not provide an export named 'Inertia'

Steps to reproduce:

import { createInertiaApp } from '@inertiajs/inertia-svelte';
createInertiaApp({
    resolve: name => require(`./Pages/${name}.svelte`),
    setup({ el, App, props }) {
        new App({ target: el, props })
    }
});

[HassanZahirnia]

Hey kvraamkey 😀 Can you provide more info on where and how the error is exactly is occurring ?

[kvraamkey]

Hey Hassan, Thanks for reply. I'm just following inertia guidelines to setup svelte, but when I using with laravel-vite getting error on browser console as i mentioned above

[pedroborges]

@kvraamkey can you share a repository that reproduces the error? I have used Inertia.js with Svelte + Vite (not laravel-vite) and never had this kind of issue. Would love to have a look and help you out.

[kvraamkey]

@pedroborges, Here you go with repo

[mbuckley]

@kvraamkey I ran into this same error when using vite-ruby with @inertiajs/inertia-svelte. I resolved things by importing Inertia in the main js entrypoint.

import { Inertia } from "@inertiajs/inertia"; // <== added this
import { createInertiaApp } from '@inertiajs/inertia-svelte'

createInertiaApp({
  resolve: name => require(`./Pages/${name}.svelte`),
  setup({ el, App, props }) {
    new App({ target: el, props })
  },
})

[sagadsalem]

Same Issue here

vite.config.js

import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte'
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        svelte(),
    ],
});

package.json

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "autoprefixer": "^10.4.8",
        "axios": "^0.27",
        "laravel-vite-plugin": "^0.5.0",
        "lodash": "^4.17.19",
        "postcss": "^8.4.14",
        "prettier": "^2.7.1",
        "prettier-plugin-svelte": "^2.7.0",
        "tailwindcss": "^3.1.7",
        "vite": "^3.0.0"
    },
    "dependencies": {
        "@inertiajs/inertia": "^0.11.0",
        "@inertiajs/inertia-svelte": "^0.8.0",
        "@inertiajs/progress": "^0.2.7",
        "@sveltejs/vite-plugin-svelte": "^1.0.1",
        "svelte": "^3.49.0",
        "svelte-loader": "^3.1.3"
    }
}

app.js:

import { Inertia } from "@inertiajs/inertia" // this line added becasue same issue with Inertia
import { createInertiaApp } from '@inertiajs/inertia-svelte'
import { InertiaProgress } from '@inertiajs/progress'
import '../css/app.css';

InertiaProgress.init()

createInertiaApp({
    resolve: name => import(`./Pages/${name}.svelte`),
    setup({ el, App, props }) {
        new App({ target: el, props })
    },
})

any component from importing inertia with same error for example in my case:

Uncaught (in promise) SyntaxError: The requested module '/node_modules/.vite/deps/@inertiajs_inertia-svelte.js?v=8b91320b' does not provide an export named 'Inertia' (at Home.svelte:2:14)

[ibnu-ja]

use optimizeDeps.include to force @inertiajs/inertia & @inertiajs/inertia-svelte to be pre-bundled in vite

//vite.config.js
import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel([
            'resources/js/app.js',
        ]),
        svelte(),
    ],
    optimizeDeps: {
        include: [
            '@inertiajs/inertia',
            '@inertiajs/inertia-svelte',
        ]
    }
});