SVG loading error

[thiagocoelho]

I'm trying to use the Launcher but in first run I got this:

ERROR in ./node_modules/react-chat-window/es/assets/chat-icon.svg
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <svg xmlns="http://www.w3.org/2000/svg"

I need to install anything besides react-chat-window?

[heatherbooker]

Hi @thiagocoelho, If you are still experiencing this issue, could you provide more details to help us understand? (for example, what you mean by "trying to use the Launcher", what steps you took leading up to this error, etc) The cause of the problem is not immediately apparent to me, though perhaps @dharness might have more of an idea.

[JeffLoo-ong]

So I am running into a similar issue in my Next.JS project which I have a suspicion he may be using as well.

I am including the Launcher using this
import { Launcher } from 'react-chat-window'

which triggers the exact same error as @thiagocoelho.

Looking into Next a little more I think it is related to this topic: vercel/next.js#79
where Next needs a folder defined to serve up images.

Tried to tinker around with a solution but couldn't quite figure it out yet...

[dharness]

It sounds like we should embed the svg manually in the jsx instead of importing it - if anyone has time to make that change it'd be great

[heatherbooker]

I am hopeful that using webpack with the appropriate file-loader will fix if this sort of thing pops up again, in #128:

      test: /\.(png|svg|jpg|gif|mp3)$/,
      use: [
        'file-loader'
      ]

[AppLoidx]

define SRC like this:

var path = require('path');
var SRC = path.resolve(__dirname, 'src/main/js');

And use file-loader for mp3 (module -> rules):

{
    test: /\.mp3$/,
    include: SRC,
    loader: 'file-loader'
}

or use image-webpack-loader for load images:

{
        test: /\.(gif|png|jpe?g|svg)$/i,
        use: [
          'file-loader',
          {
            loader: 'image-webpack-loader',
            options: {
              bypassOnDebug: true, // [email protected]
              disable: true, // [email protected] and newer
            },
          },
        ]}

For example, this is my webpack.config.js:

const path = require('path');
const SRC = path.resolve(__dirname, 'node_modules');

module.exports = {
  entry: './jsx/App.jsx',
  mode: "development",
  output: {
    path:
        '/java/helios-backend/src/main/resources/static/js'
        // __dirname + '/js/'
    ,
    filename: 'bundle.js'
  },
  devtool: '#sourcemap',
  stats: {
   colors: true,
   reasons: true
  },
  module: {
    rules: [
      { test: /\.css$/, loader: 'style-loader!css-loader' },
      {
        test: /\.jsx?$/,
        exclude: /(node_modules)/,
        loaders: ['babel-loader']
      },
      {
        test: /\.(gif|png|jpe?g|svg)$/i,
        use: [
          'file-loader',
          {
            loader: 'image-webpack-loader',
            options: {
              bypassOnDebug: true,
              disable: true, 
            },
          },
        ]},
      {
        test: /\.mp3$/,
        include: SRC,
        loader: 'file-loader'
      }

    ]
  }
};

And do not forget to install the file-loader before:

npm install file-loader --save-dev

I'm not sure if this is the best solution, but it works :)