`SyntaxError: Unexpected token '<'` on importing an svg but loaders is configured

[gaggle]

Hi,

I might be misunderstanding something basic, but I encounter this error running tests on a file that imports an svg import:

    .../src/pages/react.svg:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<svg xmlns="http://www.w3.org/2000/svg" width="256" height="228"

    SyntaxError: Unexpected token '<'

      4 |
      5 | // import './Home.css'
    > 6 | import logo from './react.svg'
        |                  ^

The runtime code works fine, but jest fails. I've set up my jest.config.ts with loaders though:

  transform: {
    '^.+\\.tsx?$': [
      'esbuild-jest', {
        sourcemap: true,
        loaders: { '.svg': 'file' }
      }
    ]
  },

I don't really know what to do from here... I hope I'm just misunderstanding something very basic as I'm no expert in setting up esbuild or jest.

If it's helpful to see this problem locally the code is available here:

https://github.com/gaggle/exploring-the-monorepo/tree/attempt-0-files-and-folders

It occurs when running npm test.

I hope you can spot what I'm doing wrong, or I'm happy to hear any sort of pointers you can think of that I can investigate because I've got no clue how to proceed otherwise.

[aelbore]

@gaggle thanks for creating issue, will check on this, PR are open :) thanks

[gaggle]

@aelbore thanks. FWIW I've tried hacking around a bit but just end up breaking the transformer 🤷 If you have suggestions to investigate I'm happy to try and help.

[gaggle]

I've moved away from esbuild so I'll close this issue to not leave issues open I don't plan to continue with.

[aelbore]

@gaggle you can use this package for svg

https://www.npmjs.com/package/jest-svg-transformer/v/1.0.0

[th3fallen]

@gaggle do you mind sharing what you moved to?

[gaggle]

@gaggle do you mind sharing what you moved to?

Pretty sure I moved to ts-jest.