I'm getting an error building a sveltekit project

user_1738579 0
Viewed 1660

I'm building a sveltekit project. One thing I've done is created a custom type of file which is converted to a *.svelte file upon building or running the development server. By default, sveltekit includes the rollup extension rollup-plugin-dynamic-import-variables which is trying to parse my custom file (who knows why?) and throwing an "unexpected token" error. I'm trying to configure that extension to ignore my custom files, but so far without success. Here is my attempted svelte.config.js file:

// @type {import('@sveltejs/kit').Config}
var config;

import adapter from '@sveltejs/adapter-static';

import dynamicImportVariables from 'rollup-plugin-dynamic-import-variables';

config = {
  kit: {
    // --- hydrate the <div id="svelte"> element in src/app.html
    target: '#svelte',
    adapter: adapter({
      pages: 'build',
      assets: 'build',
      fallback: null
    }),
    vite: {
      plugins: [
        dynamicImportVariables({
          warnOnError: true,
          exclude: '**'
        })
      ]
    }
  }
};

export default config;

To be honest about it, I don't use dynamic imports anywhere and therefore would accept as a solution the complete disabling of the extension. But anything that would get it to ignore my custom files would also work.

sveltekit rollupjs vite
1 Answers

UPDATE: SvelteKit 1.0.0-beta now requires pages/endpoints to follow a specific naming pattern, so explicit file exclusion should no longer be needed.

SvelteKit specially handles files in the routes/ directory with the following filenames (note the leading + in each filename):

All other files are ignored and can be colocated in the routes/ directory.

If, for some reason, you need to have a file that has a special name shown above, it's currently not possible to exclude that file from special processing.

Original outdated answer:

The rollup-plugin-dynamic-import-variables is actually included by Vite. To configure Vite's plugin, set the build.dynamicImportVarsOptions property:

// svelte.config.js
/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    // hydrate the <div id="svelte"> element in src/app.html
    target: "#svelte",
    vite: {
      build: {
        dynamicImportVarsOptions: {
          exclude: [/node_modules/, /\.starbucks$/],
        },
      },
    },
  },
}

export default config

But that's not going to fix the problem...

SvelteKit processes all files under src/routes/ so that they're automatically imported in the output application (in .svelte-kit/build/app.js), which will result in the same error.

Option 1: Private modules

You could exclude a src/routes/*.starbucks file by making it a private module, which has a leading underscore in the filename:

src/routes/_home.starbucks 
src/routes/_index.starbucks 
src/routes/index.svelte

Option 2: Move files outside src/routes

Alternatively, move those *.starbucks files outside of src/routes/ (e.g., into src/starbucks/ or src/lib/):

src/routes/index.svelte
src/starbucks/home.starbucks 
src/starbucks/index.starbucks 
src/lib/home.starbucks 
src/lib/index.starbucks
user_62771510
Related