bug: a given Svelte example does not compile

[PlkMarudny]

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

[kind-eh]

the same on the react: ./node_modules/@vime/core/dist/custom-elements/index.js 21:15 Module parse failed: Unexpected token (21:15) 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. | timeout = setTimeout(() => { | if (attempt === maxRetries) {

      onFail?.();

  | return; | }

[mihar-22]

Ah that's because the examples use webpack@^4, they need to be upgraded to ^5 to support optional chaining.

[kind-eh]

installed the fresh react create app, checked the webpack version ^5, same error

[PlkMarudny]

Upgraded Webpack to 5.x.x, Svelete example still does not compile

[cloudsbehindthesun]

can't we fix that typo?

[mihar-22]

It's not a typo, it's optional chaining. I'll have a look and see if I need to fix the examples or address the newer syntax.

[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-sdb]

Should I open a separate bug on react example?

[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

[engordon]

Same issue happening in Vue. Upgraded @Vime/Vue from 4.x to 5, and cannot compile.

[engordon]

This SO answer solved it for me: https://stackoverflow.com/questions/68016663/error-while-importing-a-module-with-optional-chaining Install @babel/plugin-proposal-optional-chaining and update vue.config.js:

const path = require('path');
module.exports = {
  chainWebpack: config => {
     config.module
      .rule('supportChaining')
      .test(/\.js$/)
        .include
          .add(path.resolve('node_modules/@vime/core'))
          .end()
      .use('babel-loader')
        .loader('babel-loader')
        .tap(options => ({ ...options, 
          plugins : ['@babel/plugin-proposal-optional-chaining']
        }))
        .end()
    }

[mihar-22]

Should be resolved now in 5.0.32.

[engordon]

Release 5.0.32 did not resolve the issue for me (my Bitbucket pipeline still failed). We needed to add @vime/core to our types in to tsconfig.json:

{
  "compilerOptions": {
   ...
    "types": [
       "@vime/core",
       ...

We also needed to upgrade tslib to 2.3.x: npm install tslib@latest --save

(in addition to forcing babel-loader to transpile @vime/core and use @babel/plugin-proposal-optional-chaining as per my previous comment).