Using optimizeImports() with SvelteKit causes error 500 `Unexpected token 'export'` about carbon-preprocess-svelte HOT 6 CLOSED

For me, I ran into the same issues. It took very long without the pre-processor.
In @sveltejs/kit: 1.0.0-next.508 and with the adapter-node instead of adapter-auto in svelte.config.js so far all carbon-components-svelte seem to be working.

Here is my svelte.config.js

import adapter from '@sveltejs/adapter-node';
import preprocess from 'svelte-preprocess';
import { optimizeImports  } from "carbon-preprocess-svelte";
/** @type {import('@sveltejs/kit').Config} */
const config = {	
	preprocess: [preprocess(),optimizeImports()],
	kit: { adapter: adapter(), 	}
};
export default config;

from carbon-preprocess-svelte.

Tested today with updated dependencies and the Cloudflare adapter. Now, it works!
Build is a bit smaller 1.8M to 1.5M. Nice.

I was expecting a smaller build because my app is very simple but the CSS file still large (same size as before):

596K	_layout-981051fa.css

It tried to replace all import {Grid } from 'carbon-components-svelte' by import Grid from 'carbon-components-svelte/src/Grid/Grid.svelte'; as described in https://github.com/carbon-design-system/carbon-preprocess-svelte#optimizeimports but it produces the same build output.

from carbon-preprocess-svelte.

@stephane optimizeImports rewrites component imports to speed up development and build compile times. There shouldn't be a difference in bundle output since unused imports should be tree-shaken when building for production.

optimizeCss might be what you're looking for if you want to decrease the final CSS size

from carbon-preprocess-svelte.

I'm happy to report that the config I originally posted seems to be working now, not sure if just some version changes fixed it or what exactly happened. Unfortunately, there still seem to be some issues with performance optimization. Using SvelteKit, and the svelte.config.js file posted above, loading a page with a datatable doesn't even start for ~1.5 minutes, and takes up to 6 minutes to finish:

Using vite in debug mode, I can see a whole bunch of icons and assets that aren't currently in use are being processed.

vite.config.js:

import { sveltekit } from '@sveltejs/kit/vite';
import { optimizeCss } from 'carbon-preprocess-svelte';

/** @type {import('vite').UserConfig} */
const config = {
	plugins: [sveltekit(), process.env.NODE_ENV === "production" && optimizeCss()],
	build: {
		target: [ 'es2020' ]
	}
};

export default config;

svelte.config.js:

import adapter from '@sveltejs/adapter-auto';
import preprocess from 'svelte-preprocess';
import { optimizeImports } from 'carbon-preprocess-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	// Consult https://github.com/sveltejs/svelte-preprocess
	// for more information about preprocessors
	preprocess: [preprocess(), optimizeImports()],

	kit: {
		adapter: adapter()
		
	}
};

export default config;

Versions:

• carbon-components-svelte: 0.67.9
• carbon-preprocess-svelte: 0.9.1
• svelte-kit: 1.0.0-next.510
• vite: 3.1.4

from carbon-preprocess-svelte.

@metonym, I didn't mention I used optimizeCss and to be sure optimizeCss was enabled I removed the test against NODE_ENV.

My conf was:

import adapter from '@sveltejs/adapter-cloudflare';
import preprocess from 'svelte-preprocess';
import { optimizeImports, optimizeCss } from 'carbon-preprocess-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
        // Consult https://github.com/sveltejs/svelte-preprocess
        // for more information about preprocessors
        preprocess: [preprocess(), optimizeImports()],
        kit: {
                adapter: adapter()
        },
        vite: {
                plugins: [process.env.NODE_ENV === 'production' && optimizeCss()]
        }
};

export default config;

from carbon-preprocess-svelte.

Regarding the follow up concern I shared above regarding long load times, I'm happy to report that I was able to overcome that as well.

I was importing icons in a .ts file, which I'm guessing avoids pre-processing. By converting that TS file to a .svelte file with a <script context="module" lang="ts">, optimization is working again and my dev load times are reasonable.

from carbon-preprocess-svelte.