code splitting mode not working in template

joshua1 commented 4 years ago

@jakobrosenberg following the instructions here https://routify.now.sh/docs/codesplitting and using the starter template, i am only able to hit 404 (_fallback.svelte) page and cannot get the links to work. I might be doing something wrong i cant say , my rollup.config file is

import svelte from 'rollup-plugin-svelte';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import {routify} from '@sveltech/routify'

const production = !process.env.ROLLUP_WATCH;

export default {
    input: 'src/main.js',
    output: {
        sourcemap: true,
        format: 'esm',
        name: 'app',
        dir: 'public/build/bundle'
    },
    plugins: [
        routify({ dynamicImports: true }),
        svelte({
            // enable run-time checks when not in production
            dev: !production,
            // we'll extract any component CSS out into
            // a separate file — better for performance
            css: css => {
                css.write('public/build/bundle.css');
            }
        }),

        // If you have external dependencies installed from
        // npm, you'll most likely need these plugins. In
        // some cases you'll need additional configuration —
        // consult the documentation for details:
        // https://github.com/rollup/rollup-plugin-commonjs
        resolve({
            browser: true,
            dedupe: importee => importee === 'svelte' || importee.startsWith('svelte/'),
            mainFields: ['main', 'module']
        }),
        commonjs(),
        // In dev mode, call `npm run start` once
        // the bundle has been generated
        !production && serve(),

        // Watch the `public` directory and refresh the
        // browser on changes when not in production
        !production && livereload('public'),

        // If we're building for production (npm run build
        // instead of npm run dev), minify
        production && terser()
    ],
    watch: {
        clearScreen: false
    }
};

function serve() {
    let started = false;

    return {
        writeBundle() {
            if (!started) {
                started = true;

                require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
                    stdio: ['ignore', 'inherit', 'inherit'],
                    shell: true
                });
            }
        }
    };
}

and index.html is

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width,initial-scale=1'>

    <title>Svelte app</title>

    <link rel='icon' type='image/png' href='/favicon.png'>
    <link rel='stylesheet' href='/global.css'>
    <link rel='stylesheet' href='/build/bundle.css'>

</head>
<script type="module" defer src='/build/bundle/main.js'></script>
<body>
</body>
</html>

Can you have a look please. Thanks a lot

rixo commented 4 years ago

Is it working at all, even without code splitting?

You need to pass the --single flag to sirv, to be able to load your SPA from any URL.

See how it is done at this line for an example.

jakobrosenberg commented 4 years ago

If you share your project, I'll clone it and have a look.

Tommertom commented 4 years ago

I don't have any issues with code splitting, even though I used the -D flag in package.json instead of the routify plugin in rollup.config.js as @joshua1 is saying. (and that way also works for me)

https://github.com/sveltech/routify/issues/29 for a sample repo (last post)

rixo commented 4 years ago

To be clear, what I'm suggesting is to try with a command like this:

npx sirv public --dev --single

Without the --single flag, sirv will 404 on any page that does not exist (which is essentially every page in the client router). The 404 tells it to send index.html instead of 404.

joshua1 commented 4 years ago

@rixo the --single flag is there . and i am not running yarn start or npm run start yet, i am simply running yarn dev , the only changes i made to the starter template are the ones i have posted up there . Note also that it works out the box without my changing the setup to enable code splitting. @rixo i am referring to the starter template project, not the example module in routify code base itself. You can try with the template.

jakobrosenberg commented 4 years ago

I just cloned the starter template with npx @sveltech/routify@next init and configured it for code-splitting. Unfortunately I can't reproduce the error. Yarn and NPM works and so does CLI mode and Rollup.

Any chance you can share your project or show us your filestructure?

Lastly, have you tried hitting Ctrl + F5 (or equivalent) to clear the browser?

rixo commented 4 years ago

@joshua1 What browser are you using? (type="module" not supported in IE / Edge, AFAIK)

joshua1 commented 4 years ago

@jakobrosenberg I used the npx @sveltech/routify@next init command on a new project and moved my src and other files in there , and it worked. removing node_modules and package lock file didnt seem to work for me , found that strange. maybe have this command in the readme as a way to use the starter template

jakobrosenberg commented 4 years ago

@joshua1 it will be added to the docs, but for the moment the syntax isn't set in stone. I doubt much will change though.

roxiness / routify

code splitting mode not working in template #49