Error when compiling in Angular 12 application - ./node_modules/graphql-playground-react/lib/assets/logo.png:1:0 - Error: Module parse failed: Unexpected character '�' (1:0) 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 (Source code omitted for this binary file)

[MurrayFurtado]

This issue pertains to the following package(s):

• [x ] GraphQL Playground HTML

What OS and OS version are you experiencing the issue(s) on? Windows

What version of graphql-playground(-electron/-middleware) are you experiencing the issue(s) on? 1.7.27

What is the expected behavior? - Compile succeeds

What is the actual behavior? - Compile fails with error

./node_modules/graphql-playground-react/lib/assets/logo.png:1:0 - Error: Module parse failed: Unexpected character '�' (1:0)
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
(Source code omitted for this binary file)

What steps may we take to reproduce the behavior? - Compile an angular 12 project with graphql-playground as a dependency.

Please provide a gif or image of the issue for a quicker response/fix.

[medbz]

+1

[slimou]

hello same issue @MurrayFurtado have you a solution ?

[artemave]

This issue also makes it impossible to use graphql-playground-react with importmap

One way to fix it would be to compile import imageSource from '../assets/logo.png' (here) down to inline data.
Currently, in the npm package, it's compiled to var logo_png_1 = require("../assets/logo.png"); which leaves down to the user to inline the image. That works fine when user code goes through webpack/esbuild/etc., but jspm doesn't work that way. It doesn't allow any code transformations - it's simpy following imports.