bug: a given Svelte example does not compile

Trying to run Svelte example project I got:

ERROR in ./node_modules/@vime/svelte/src/lib.ts 1:30
Module parse failed: Unexpected token (1:30)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> export const define = (tagName: string, clazz: any) => {
|   const isClient = typeof window !== 'undefined';
|   if (isClient && !customElements.get(tagName))
 @ ./node_modules/@vime/svelte/src/svelte/Audio.svelte 17:0-32 20:0-33 102:0-6 103:0-6
 @ ./node_modules/@vime/svelte/src/svelte/index.js
 @ ./node_modules/@vime/svelte/src/svelte.js
 @ ./src/App.svelte
 @ ./src/main.ts
 @ multi ./src/main.ts

ERROR in ./node_modules/@vime/core/dist/custom-elements/index.js 20:15
Module parse failed: Unexpected token (20:15)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     timeout = setTimeout(() => {
|       if (attempt === maxRetries) {
>         onFail?.();
|         return;
|       }
 @ ./node_modules/@vime/svelte/src/svelte.js 2:0-27 2:0-27
 @ ./src/App.svelte
 @ ./src/main.ts
 @ multi ./src/main.ts

[gshilin]

I don’t have that error, but this one:

./node_modules/@vime/core/dist/custom-elements/index.js 421:41
Module parse failed: Unexpected token (421:41)
File was processed with these loaders:
 * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|   const registryId = Symbol('vmRegistryId');
|   const registrant = getRegistrant(ref);
>   registrant[COMPONENT_NAME_KEY] = name ?? registrant.nodeName.toLowerCase();
|   registrant[REGISTRATION_KEY] = registryId;

I use CRA, so I have no idea which version of webpack I use, but I have the following in package.json

    "@babel/cli": "^7.11.6",
    "@babel/core": "^7.11.6",
    "@babel/parser": "^7.11.5",
    "@babel/plugin-proposal-class-properties": "^7.4.4",
    "@babel/plugin-proposal-export-namespace-from": "^7.2.0",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.1",
    "@babel/plugin-proposal-optional-chaining": "^7.11.0",
    "@babel/plugin-proposal-throw-expressions": "^7.2.0",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/polyfill": "^7.11.5",
    "@babel/preset-env": "^7.11.5",
    "@babel/preset-react": "^7.0.0",
    "@babel/register": "^7.11.5",
    "@babel/types": "^7.11.5",

And node 14.17.0

[gshilin]

This answer solved the problem: https://stackoverflow.com/questions/67551922/cra-react-leaflet-failed-to-compile

Open your package.json file

"browserslist": {
 "production": [
  ">0.2%",
  "not dead",
  "not op_mini all"
],
"development": [
  "last 1 chrome version",
  "last 1 firefox version",
  "last 1 safari version"
]
},

Replace it with following lines :

"browserslist": [
">0.2%",
"not dead",
"not op_mini all"
],

Now Delete node_modeules folder

npm install

npm start