Module not found error with style url(/...)

[govis]

Having an absolute url: background-image: url('/images/image1.jpg'); in dom-module style throws Module not found: Error: Can't resolve '/images/image1.jpg' in '{Project root}\{path to dom-module}'.

It appears to be treating it as a relative path. Adding ?url=false option doesn't help - do you know how to fix it without changing the url itself? Thanks.

[ChadKillingsworth]

It's possible its a bug. We'll have to investigate.

[govis]

html-loader 'Root-relative' URLs

For urls that start with a /, the default behavior is to not translate them. If a root query parameter is set, however, it will be prepended to the url and then translated.

Maybe polymer-webpack-loader should behave in a similar fashion. Thanks

[TheLarkInn]

@govis, before we tackle this would it be possible that you provide a minimal reproducible repo that we can clone for debugging, solution, and adding to our tests. This will considerably expedite the solution process.

Thank you so much!

[govis]

If you add

<style>

:host {

background-image: url('/images/background.jpg');

}

</style>

to src\my-element.html in Rob Dodson's polymer-webpack-loader demo, you will get the error:

<link rel="import" href="../bower_components/polymer/polymer-element.html">

<dom-module id="my-element">
  <template>
    <style>
        :host {
            background-image: url('/images/background.jpg');
        }
    </style>
    <h1>Hello, World! It's [[today]].</h1>
  </template>
  <script>
    // Heyyyy, we're pulling in a Node module!
    import format from 'date-fns/format';
    
    class MyElement extends Polymer.Element {
      static get is() { return 'my-element'; }
      static get properties() {
        return {
          today: {
            type: String,
            value: function() {
              return format(new Date(), 'MM/DD/YYYY');
            }
          }
        }
      }
    }

    window.customElements.define(MyElement.is, MyElement);
  </script>
</dom-module>

Thanks

[imskull]

Same problem, wish have an option likes css-loader:

loader: "css-loader?url=false"

[mdvanes]

I get a similar error when adding ts-loader like this:

            {
                // If you see a file that ends in .html, send it to these loaders.
                test: /\.html$/,
                // This is an example of chained loaders in Webpack.
                // Chained loaders run last to first. So it will run
                // polymer-webpack-loader, and hand the output to
                // babel-loader. This lets us transpile JS in our `<script>` elements.
                use: [
                    { loader: 'babel-loader' },
                    { loader: 'ts-loader' }, 
                    { loader: 'polymer-webpack-loader' }
                ]
            },

Typescript and ts-loader are installed. The error is:

ERROR in ./src/my-element.html
Module build failed: Error: Could not find file: '/Users/foo/project/src/my-element.html'.

[ChadKillingsworth]

I finally got a chance to debug this. The loader is doing the appropriate thing. Webpack does not appear to support treating the compilation folder as a root. This is unfortunate.