inertia Uncaught Error: Cannot find module 'svelte/store'

I've followed the steps in inertiajs.com to set up laravel, inertia and svelte but when I spin up a php server, these errors are shown in the browser:

Uncaught Error: Cannot find module 'svelte/store'
    at webpackMissingModule (app.js:200:50)
    at Module../node_modules/@inertiajs/inertia-svelte/src/store.js (app.js:200:137)
    at __webpack_require__ (app.js:7495:42)
    at Module../node_modules/@inertiajs/inertia-svelte/src/page.js (app.js:177:64)
    at __webpack_require__ (app.js:7495:42)
    at Module../node_modules/@inertiajs/inertia-svelte/src/index.js (app.js:90:63)
    at __webpack_require__ (app.js:7495:42)
    at Module../resources/js/app.js (app.js:2562:83)
    at __webpack_require__ (app.js:7495:42)
    at app.js:7660:64

app.js:


import { createInertiaApp } from '@inertiajs/inertia-svelte'
import { InertiaProgress } from '@inertiajs/progress'

InertiaProgress.init()

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

webpack.mix.js:


const mix = require('laravel-mix');
const path = require('path');

mix.js('resources/js/app.js', 'public/js')
    .postCss("resources/css/app.css", "public/css")
    .browserSync('127.0.0.1:8000');

web.php:

<?php

use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return inertia('app');
});

app.blade.php:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
  <link href="{{ mix('/css/app.css') }}" rel="stylesheet" />
  <script src="{{ mix('/js/app.js') }}" defer></script>
  @inertiaHead
</head>
<body>
  @inertia
</body>
</html>

views/Pages/app.svelte:

<p>This is a svelte component.</p>

May 05 '22 16:05 Arturexe

I don't know if that solves the problem. In my project I use the Svelte extension for Laravel Mix: https://laravel-mix.com/extensions/svelte.

After installing the package, you need to modify your webpack.mix.js file.

const mix = require('laravel-mix');
const path = require('path');

require('laravel-mix-svelte');

mix.js('resources/js/app.js', 'public/js')
    .postCss("resources/css/app.css", "public/css")
    .browserSync('127.0.0.1:8000')
    .svelte();

Alternatively, you can check out the code of the official Inertia.js demo app with Svelte: https://github.com/inertiajs/pingcrm-svelte/blob/master/webpack.mix.js.

I hope this may help.

May 15 '22 10:05 beromir

Hey! Thanks so much for your interest in Inertia.js and for sharing this issue/suggestion.

In an attempt to get on top of the issues and pull requests on this project I am going through all the older issues and PRs and closing them, as there's a decent chance that they have since been resolved or are simply not relevant any longer. My hope is that with a "clean slate" me and the other project maintainers will be able to better keep on top of issues and PRs moving forward.

Of course there's a chance that this issue is still relevant, and if that's the case feel free to simply submit a new issue. The only thing I ask is that you please include a super minimal reproduction of the issue as a Git repo. This makes it much easier for us to reproduce things on our end and ultimately fix it.

Really not trying to be dismissive here, I just need to find a way to get this project back into a state that I am able to maintain it. Hope that makes sense! ❤️

Jul 28 '23 01:07 reinink

inertia inertia copied to clipboard

Uncaught Error: Cannot find module 'svelte/store'

inertia
inertia copied to clipboard