Vite commonjs not getting converted to esm

[philholden]

Getting the following error:

Internal server error: module is not defined
      at eval (/node_modules/react/index.js:8:3)
      at instantiateModule (file:///Users/i24823/projects/svelte-design-system-ts/node_modules/vite/dist/node/chunks/dep-ae3fae1b.js:52409:15)
ReferenceError: module is not defined
    at /node_modules/react/index.js:6:3
    at instantiateModule (file:///Users/i24823/projects/svelte-design-system-ts/node_modules/vite/dist/node/chunks/dep-ae3fae1b.js:52409:15)

svelte config:

import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/kit/vite';
import {mdsvex} from 'mdsvex';
import preprocessReact from "svelte-preprocess-react/preprocessReact";

/** @type {import('@sveltejs/kit').Config} */
const config = {
  // Consult https://kit.svelte.dev/docs/integrations#preprocessors
  // for more information about preprocessors
  extensions: ['.svelte', '.md', '.svx'],
  preprocess: preprocessReact({
    preprocess: [
      mdsvex({
        extensions: ['.md', '.svx'],
      }),
      vitePreprocess()
    ]
  }),
  kit: {
    alias: {
    '$library': './src/library',
    '$react': './src/react'
  },
    adapter: adapter()
  }
};

export default config;

vite.config (commented out lines are things I have tried):

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vitest/config';

export default defineConfig({
  plugins: [sveltekit()],
  ssr: {
    noExternal: true
  },
  // build: {
  //   commonjsOptions: {
  //     include: [/node_modules/],
  //   },
  // },
  optimizeDeps: {
    include: [
      '@capsizecss/core',
      // 'react',
      // 'react-dom'
    ],
  },
  test: {
    include: ['src/**/*.{test,spec}.{js,ts}']
  }
});

Any thoughts?

[bfanger]

This has to to with React still using commonjs, but I haven't encountered the issue you're describing. In my tests Vite was able to handle the react imports.

Could you try to recreate the bug on Stackblitz?

[philholden]

Thanks. I had a go but ran into some different errors on StackBlitz. Would you be able to get it running with SvleteKit 1.x on StackBlitz. Just default install with one react HelloWorld component on a route?

https://stackblitz.com/edit/sveltejs-kit-template-default-4ammlw?file=vite.config.js&terminal=dev

If I can start from something that works I can then see where I am breaking things.

[bfanger]

Saw some (golang?) errors I haven't seen before on StackBlitz (had to refresh 2 times)

I've created a basic example here:

https://stackblitz.com/edit/sveltejs-kit-template-default-539f8b?file=src%2Froutes%2FSomeComponent.tsx,src%2Froutes%2F%2Bpage.svelte&terminal=dev

[philholden]

Thanks

[philholden]

I think my problem was using it with vitePreprocess which it is meant to replace this is currently the default rather than sveltePreprocess. So it was not clear that I needed to replace vitePreprocess with sveltePreprocessReact. By reading the docs it looked to me like you needed vitePreprocess for TypeScript so I did not try removing it.

https://kit.svelte.dev/docs/integrations

[philholden]

Thanks again for taking time to do this all working now. noExternal: true in vite.config was also breaking this.

    // ssr: {
    //  noExternal: true
    // },