[vite] Internal server error: Not implemented undefined with some modules

[Pensarfeo]

I am getting the following error when I try to load some packages. I only get the error when I have the babel preprocessor on.

this is my config

import preprocess from 'svelte-preprocess';
import path from 'path';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: preprocess({
    babel: {
      presets: [
        [
          '@babel/preset-env',
          {
            loose: true,
            modules: false,
            targets: {
              // ! Very important. Target es6+
              esmodules: true,
            },
          },
        ],
      ],
    },
  }),
	kit: {
		target: '#svelte',
    vite: {
			resolve: {
				alias: {
					components: path.resolve('./src/components'),
					resources: path.resolve('./src/resources'),
					store: path.resolve('./src/store'),
				}
			}
		}
	}
};

export default config;

For example the issue appears with svelte-select and svelecte but not with svelte-tags-input

Thanks in advance for your help

[Conduitry]

This error is coming from within the compiler. If we knew exactly what was being passed to it (after the preprocessors) that would help.

It sounds like it might be https://github.com/sveltejs/svelte/issues/6706 which occurs when using for (var foo of bar) (as opposed to let or const). That this only occurs when using Babel (which, among other things, might be transpiling stuff to var) is also suspicious.

[mhzrerfani]

I'm getting this error too

This is my config

const preprocess = require("svelte-preprocess");

module.exports = {
  disableDependencyReinclusion: ["@roxi/routify"],

  preprocess: [
    preprocess({
      babel: {
        presets: [
          [
            "@babel/preset-env",
            {
              loose: true,
              modules: false,
              targets: {
                esmodules: true,
              },
            },
          ],
        ],
      },
      postcss: true,
    }),
  ],
};

Issue appears when using Swiper and some other packages

[atomcat1978]

Hi,

I did plenty of debugging, and the issue is that babel converts all let and const declarations to var and if there is any const or let within a reactive declaration, the compiler fails after babel did its job.

Quite easy to reproduce in the svelte repl.

This works ok:

<script>
	$: {
		let name = 'world';		
	}
</script>

<h1>Hello {name}!</h1>

This fails:

<script>
	$: {
		var name = 'world';		
	}
</script>

<h1>Hello {name}!</h1>

Not implemented undefined

The compiler fails in the const handle_body = (nodes, state) => ... function (line 6968). The reason is that the handle method should be called with a Node object, but instead it gets called by an Array(1) [Node], which in response triggers a handlers[undefined] call in the handle(node, state) function at line 6731. The undefined error message comes from this function, thanks to this if statement:

		if (!handler) {
			throw new Error(`Not implemented ${node.type}`);
		}

[atomcat1978]

Regarding the original post, the issue is caused by Item.svelte in svelte-select:

$: {
        const classes = [];
//...

[Antoine-lb]

just my two cents: this error can happen if you use var for your variables instead of let or const.

[tekhedd]

Does not appear to be limited to reactive declarations. Just a simple top-level block in 'script' triggers it:

if (mode='create') {
}
else {
  let promises = []; // later used in Promises.all()
  ...

If I change this to let promises, it's fine. Note that promises is not used anywhere else except in the block.

Hope this helps.