Relative image urls in CSS replaced with absolute urls by build script

[alessandrotesoro]

Hi there,

I was just testing your package within an editor I'm working on and noticed an issue with images loading when the package is used within a vue app with webpack. It also looks like someone else had the same issue and submitted a pull request #515 that has been merged, however the dist file has not been updated https://github.com/josdejong/jsoneditor/blob/master/dist/jsoneditor.css#L155

Can this be fixed please?

Thank you :)

[josdejong]

Thanks for reporting. The relative urls are there in the source code, but are apparently replaced with absolute urls by the build script which concatenates the CSS (gulp-concat-css).

[zoro-r]

这个问题啥时候修复呀?

[josdejong]

Ah, you're right @jdfdcc , thanks for the feedback. Can you please use English next time?

[vladbalan]

@josdejong I'm still seeing this bug, am I doing something wrong?

[josdejong]

ow, I think I accidentally closed this issue. Looking at my reply on Nov 12 I was thinking that @jdfdcc reported that the issue was fixed or so, but if I translate his comment now it just asks "When is this problem fixed?". I don't get it 😕

Anyway, seems the issue is not fixed yet. Anyone able to look into this? Help would be very welcome.

[TakhirMamirov]

Anyone is fixing it? Still happening :(

[josdejong]

It's not yet fixed. Help would be welcome.

[NisugaJ]

Hi I think we can change it like this. url("./img/jsoneditor-icons.svg"); . Yes I saw this change was merged at #515. But again now I get below error when manually changed same as #515 .

ModuleParseError: Module parse failed: Unexpected token (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
> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
| <svg
|    xmlns:dc="http://purl.org/dc/elements/1.1/"

configured the webpack config also as following using this guide. But no success.

const svgToMiniDataURI = require('mini-svg-data-uri');

  module: {
      rules: [
        {
          test: /\.svg$/i,
          use: [
            {
              loader: 'url-loader',
              options: {
                generator: (content) => svgToMiniDataURI(content.toString()),
              },
            },
          ],
        },
      ],
    },

@josdejong Hi Jos, I almost wasted a day on this problem. Shall we fix this soon ?. Hope what I am addressing is correct.

[josdejong]

@NisugaJ sorry to hear that. Yes it would be great to solve as soon as possible of course. I will not have time for it myself though on short term, help would be very welcome.

I have to say I haven't encountered this issue myself (using JSONEditor in React applications, built using Webpack), I'm not sure how to reproduce the issue in the first place.

I suppose it's a matter of configuring webpack and/or the SCSS processor to either embed the SVG or change the url to the place where the image is hosted. In my own React projects, Webpack automatically copies the image to build/static/media/jsoneditor-icons.15f2789d.svg and adjusts the url in the bundled code - I've never had an issue with this or had to configure something to get it working.

It maybe helpful too know that it is possible to change the url from where JSONEditor loads the SVG by overriding the SCSS variables $jse-icons or $jse-icons-url (see https://github.com/josdejong/jsoneditor/blob/develop/src/scss/jsoneditor/_variables.scss#L43-L44)

[NisugaJ]

@josdejong thanks for the reply. Excuse me, forgot to mention that I actually have a React based nextjs project. It also has a webpack configuration inside the nextjs configuration. Below is my nextjs configuration file (configured using this tutorial) . I think nextjs configuration is the problem. It doesn't load the SVG if that path is not changed like #515 in the node_modules .

const withSass = require('@zeit/next-sass');
const withLess = require('@zeit/next-less');
const withCSS = require('@zeit/next-css');
const withImages = require('next-images')

const isProd = process.env.NODE_ENV === 'production';

if (typeof require !== 'undefined') {
  require.extensions['.less'] = (file) => { };
}

module.exports = {
  webpack: (config, options) => {
    config.module.rules.push({
      test: /\.svg$/,
      use: ["@svgr/webpack"]                 <----------------(here, I am trying to load the SVG but gives ModuleParseError error)
    });
    return config;
  },
  ...withImages(withCSS({
    cssModules: true,
    cssLoaderOptions: {
      importLoaders: 1,
      localIdentName: '[local]___[hash:base64:5]',
    },
    ...withLess(
      withSass({
        lessLoaderOptions: {
          javascriptEnabled: true,
          importScripts: true,
        },
      }),
    )
  }))
}

This probably a SVG loading issue with nextjs confguration and jsoneditor.

Regarding this ,I think, our ultimate goal is that jsoneditor should be able to load SVG to any type of React based project. Almost everyone use the React based frameworks for rapid development. Not React only projects.

[josdejong]

Ah, makes sense that there is missing or differing something in the setup of nextjs then what works out of the box with create-react-app.

I did a bit of googling about images from css in a nextjs setups, this may be helpful:

• https://whoisryosuke.com/blog/2018/nextjs-tip-using-media-in-css/
• https://stackoverflow.com/questions/55487534/how-to-load-background-images-from-css-in-react-and-nextjs
• Can't import static files like images vercel/next.js#1935

[josdejong]

The issue with absolute urls has been fixed in v9.5.2 (see #1354).