Top menu doe snot show up

[oneandonlyonebutyou]

Error on Chrome change made

It is possible be of my webpack setting is not right ..

{
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          'style-loader',
          // Translates CSS into CommonJS
          'css-loader',
          // Compiles Sass to CSS
          'sass-loader'
        ]
      },
      { test: /\.svg$/, loader: 'file-loader' },
      {
        test: /\.(jpe?g|gif|png)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10000
            }
          }
        ]
      }

[josdejong]

Looks indeed like the sprite image is not bundled/loaded.

[oneandonlyonebutyou]

How am I supposed to fix this ? Could you kindly help me

[josdejong]

I guess it has to do with your Webpack configuration in combination with this SVG image loaded by JSONEditor. You could try start from a simple, working webpack setup and figure out the differences that may play a role.

Alternatively you could have a look at the successor of this library, which is currently in beta. Maybe that works for you, it doesn't load CSS or images separatly. See https://github.com/josdejong/svelte-jsoneditor/

[josdejong]

I created a small react sandbox to try out, and this has the same issue: https://codesandbox.io/s/jsoneditor-in-react-bxezf

So, this is great, me or someone else can try do some debugging into this too.

EDIT: Hm, the issue only occurs when running the code in codesandbox. When downloading the code and starting it locally it just works.

[yadleo]

@joseph-vedadi , not sure if you're still looking for an answer, but I was running into a similar issue.

My context:

• icons show up when running the app locally
• icon does not show up in a deployed production build due to a GET 404 error cause the compiled url in the css file was no longer correct, but the svg file was hosted correctly (you can load the file if you know the correct path)
• I am using webpack with MiniCssExtractPlugin for css, url-loader for svg, css-loader

The solution for me was to make sure that I supply the "publicPath" property with "../../" (see official doc below) https://v4.webpack.js.org/plugins/mini-css-extract-plugin/#publicpath

Not sure if that resolves the issue for you, but hope this helps.

[ssurve]

@joseph-vedadi I ran into the same issue. Was using html-loader to load svg files. Since sprites are handled differently, using just the html-loader didn't cut it. I had to additionally add file-loader. This is my webpack config for svg:

    {
        test: /\.svg$/,
        oneOf: [
          {
            resourceQuery: /inline/,
            use: [
              'html-loader'
            ],
          },
          {
            loader: 'file-loader',
            options: {
              esModule: false,
            }
          },
        ],
      },

Previously, I would import svg images like:

import logo from './assets/logo.svg';

With the new config, I needed to add the ?inline suffix to the path like this:

import logo from './assets/logo.svg?inline';

So, all inline svgs are handled by html-loader while the rest (e.g. sprites) are handled by file-loader.

I used this link to come up with my solution. Hope this helps!

[josdejong]

Thanks for sharing your solution @ssurve, that makes sense