Module parse failed: Unexpected token

[bennyvenassi]

Hi Guys,

I'm trying to use your module inside an angular 12 project.
Unfortunately the app won't compile, because of this issue:

([ng] ./node_modules/@mindsorg/web3modal-ts/dist/providers/logos/web3-default.svg:1:0 - Error: Module parse failed: Unexpected token (1:0)
[ng] 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
[ng] > <svg height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><radialGradient id="a" cx="1.813132%" cy="50%" r="98.186868%"><stop offset="0" stop-color="#424242"/><stop offset="1"/></radialGradient><g fill="none" fill-rule="evenodd"><path d="m256 0c141.384896 0 256 114.615104 256 256 0 141.384896-114.615104 256-256 256-141.384896 0-256-114.615104-256-256 0-141.384896 114.615104-256 256-256z" fill="url(#a)"/><path d="m137.902344 242.761719-15.820313 55.957031h-16.699219l-22.382812-84.550781h18.398438l13.183593 59.589843h.9375l15.410157-59.589843h14.941406l15.703125 59.589843h.9375l13.066406-59.589843h18.28125l-22.441406 84.550781h-16.582031l-15.996094-55.957031zm127.324218 40.839843v15.117188h-56.015624v-84.550781h56.015624v15.117187h-38.320312v19.746094h36.152344v14.003906h-36.152344v20.566406zm56.601563 15.117188h-37.96875v-84.550781h36.972656c16.40625 0 26.191407 8.027343 26.191407 21.09375 0 8.964843-6.621094 16.757812-15.292969 18.046875v1.054687c11.191406.820313 19.335937 9.257813 19.335937 20.15625 0 14.824219-11.191406 24.199219-29.238281 24.199219zm-20.273437-71.015625v21.503906h13.300781c9.550781 0 14.765625-3.925781 14.765625-10.722656 0-6.738281-4.863282-10.78125-13.300782-10.78125zm0 57.480469h15.761718c10.195313 0 15.703125-4.277344 15.703125-12.1875 0-7.734375-5.683593-11.835938-16.113281-11.835938h-15.351562zm84.433593-23.144532v-13.183593h10.3125c8.027344 0 13.476563-4.6875 13.476563-11.601563 0-6.796875-5.273438-11.132812-13.535156-11.132812-8.203126 0-13.652344 4.628906-14.121094 11.953125h-16.347656c.585937-15.996094 12.480468-26.074219 30.9375-26.074219 17.34375 0 29.824218 9.492188 29.824218 22.792969 0 9.785156-6.152344 17.402343-15.585937 19.335937v1.054688c11.601562 1.289062 18.867187 9.023437 18.867187 20.15625 0 14.824218-13.945312 25.546875-33.222656 25.546875-18.867188 0-31.640625-10.429688-32.402344-26.367188h16.933594c.527344 7.148438 6.5625 11.660157 15.644531 11.660157 8.847657 0 15-4.980469 15-12.1875 0-7.382813-5.800781-11.953126-15.292969-11.953126z" fill="#fff"/></g></svg> )  

This error appears for all svg files in the web3modal-angular module.

Thank you for your help!

[gianlucamazza]

Hi Bennyvenassi,

I [partially] fixed this error adding a custom webpack and a special loader for the svg files:

This is my custom-webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
            },
          },
        ],
      },
      {
        test: /\.(svg)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
            },
          },
        ],
      },
    ],
  },
};

I can actually get the popup working but the rendered svg are marked as "unsafe" in the DOM.

I'm still trying to find a solution

If I modify manually the DOM I can successfully see the svg resource:

[rkreutzer]

I have the same/similar issue in an Ionic/Capacitor app.

`Error: ./node_modules/@mindsorg/web3modal-ts/dist/providers/injected/index.js 4:53
Module parse failed: Unexpected token (4:53)
File was processed with these loaders:

• ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js
• ./node_modules/@angular-devkit/build-optimizer/src/build-optimizer/webpack-loader.js
• ./node_modules/@ngtools/webpack/src/ivy/index.js
  You may need an additional loader to handle the result of these loaders.
  | id: 'injected',
  | name: 'Web3',

logo: new URL('../logos/web3-default.svg', import.meta.url),

| type: 'injected',
| check: 'isWeb3',
@ ./node_modules/@mindsorg/web3modal-ts/dist/providers/index.js 2:0-39 4:0-43
@ ./node_modules/@mindsorg/web3modal-ts/dist/index.js
@ ./node_modules/@mindsorg/web3modal-angular/ivy_ngcc/fesm2015/mindsorg-web3modal-angular.js
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi ./src/main.ts`

Then the same message is repeated for @mindsorg/web3modal-ts/dist/providers/providers/index.js

[bennyvenassi]

I have the same/similar issue in an Ionic/Capacitor app.

`Error: ./node_modules/@mindsorg/web3modal-ts/dist/providers/injected/index.js 4:53
Module parse failed: Unexpected token (4:53)
File was processed with these loaders:

* ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js

* ./node_modules/@angular-devkit/build-optimizer/src/build-optimizer/webpack-loader.js

* ./node_modules/@ngtools/webpack/src/ivy/index.js
  You may need an additional loader to handle the result of these loaders.
  |     id: 'injected',
  |     name: 'Web3',

logo: new URL('../logos/web3-default.svg', import.meta.url),

| type: 'injected',
| check: 'isWeb3',
@ ./node_modules/@mindsorg/web3modal-ts/dist/providers/index.js 2:0-39 4:0-43
@ ./node_modules/@mindsorg/web3modal-ts/dist/index.js
@ ./node_modules/@mindsorg/web3modal-angular/ivy_ngcc/fesm2015/mindsorg-web3modal-angular.js
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi ./src/main.ts`

Then the same message is repeated for @mindsorg/web3modal-ts/dist/providers/providers/index.js

@gianlucamazza shows the solution to this issue in Angular. With a custom webpack loader it's working. Also in ionic.
Nevertheless it would be great, that the web3modal would be working without this workaround.

[0xSzeth]

Hello, I'm also experiencing the above issue.

Here's my custom-webpack.config.js file.

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
            },
          },
        ],
      },
      {
        test: /\.(svg)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
            },
          },
        ],
      },
    ],
  },
};

Any idea what might be going on?