New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
govis opened this Issue Sep 1, 2017 · 7 comments

Comments

Projects
None yet
5 participants
@govis
Copy link

govis commented Sep 1, 2017

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

This comment has been minimized.

Copy link
Member

ChadKillingsworth commented Sep 1, 2017

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

@govis

This comment has been minimized.

Copy link

govis commented Sep 1, 2017

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

This comment has been minimized.

Copy link

TheLarkInn commented Sep 2, 2017

@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

This comment has been minimized.

Copy link

govis commented Sep 3, 2017

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:

image

<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

This comment has been minimized.

Copy link

imskull commented Oct 6, 2017

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

loader: "css-loader?url=false"

@mdvanes

This comment has been minimized.

Copy link

mdvanes commented Oct 9, 2017

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

This comment has been minimized.

Copy link
Member

ChadKillingsworth commented Dec 2, 2017

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment