Dependency-cruiser: Webpack's resourceQuery vs. not-to-unresolvable

[hckr]

I use the following solution in my Webpack config to be able to import SVGs as both React components and URLs, depending on the context. In the second case an example import looks like this:

import imageUrl from './assets/image.svg?url';

Even though ./assets/image.svg exists, dependency-cruiser still marks this import as violating rule not-to-unresolvable. Is there an option to ignore the resourceQuery part?

Webpack config:

module.exports = {
    // ...
    module: {
        // ...
        rules: [
            // ...
            {
                test: /\.svg$/,
                exclude: /node_modules/,
                oneOf: [
                    {
                        resourceQuery: /url/,
                        loader: 'file-loader',
                        options: {
                            name: isProd ? '[name].[contenthash:8].[ext]' : '[name].[ext]',
                            useRelativePath: true,
                            outputPath: 'images/',
                        },
                    },
                    {
                        use: 'svg-react-loader',
                    },
                ],
            }
            // ...
        ]
        // ...
    }
    // ...
}

[sverweij]

hi @hckr - thanks for raising this issue. As it turns out dependency-cruiser currently doesn't handle module references with query-parameters like the one you have (./assets/image.svg?url or ./thing.js?blah) as I would expect it to. I've added a unit test for it and (if diving deeper into webpack's resolver confirms my suspicion) come up with a fix over the weekend - after which your set up should work out of the box again.

I'll post any updates in this thread.

If you need a workaround in the mean time there's two options I see:

• easiest: you can exclude modules from being visited with the exclude option ("exclude": "\?url$" in the options section of your dependency-cruiser config) or the --exclude command line parameter (e.g. depcruise --exclude "\?url$" -v -- src)
• tweak the not-to-unresolvable rule by adding a pathNot attribute in the to part with this pattern. E.g.

forbidden: [
  // other rules
  {
    name: "not-to-unresolvable",
    comment:
      "This module depends on a module that cannot be found ('resolved to disk'). If it's an npm " +
      "module: add it to your package.json. In all other cases you likely already know what to do.",
    severity: "error",
    from: {},
    to: {
      pathNot: "\?url$", // workaround for https://github.com/sverweij/dependency-cruiser/issues/198
      couldNotResolve: true
    }
  }
  // maybe more rules
]

[hckr]

For now, I've just changed the severity to "warn". Thank you very much for such a fast response.

[sverweij]

@hckr I have a fix up in the beta channel (also see #201) . If you want you can verify by (npm i | yarn add) 'ing dependency-cruiser@beta and re-running your depcruise. Please let me know if it doesn't work as expected - or if it works fine, for that matter :-)

[hckr]

It works fine, thank you :)