[v1.0.0] File paths in url() broken (css-loader)

[pastelsky]

I upgraded to file-loader@1 and this is how @font-face definitions are being rendered -

@font-face {
  font-family: Mrs Eaves XL Serif;
  font-style: normal;
   /* Font file paths are broken */
  src: url([object object]) format("woff2"), 
    url([object object]) format("woff"), 
    url([object object]) format("truetype")
}

The font paths are rendered just fine if I downgrade to v0.11.2

My loader config looks like -

      {
        test: /\.(woff|woff2|ttf)/,
        loader: 'file-loader',
        query: {
          context: path.join(paths.source, 'assets/fonts'),
          name: path.join('..','fonts/[path][name].[hash:5].[ext]'),
        },
      },

This might be happening for outside url() too, but don't have any use cases to test in my current project.

Versions

webpack v3.4.1
node v8.1.2
file-loader v1.0.0

[jasonfah]

Also having this issue after upgrading while using url-loader (which I believe uses file-loader).

node v6.11.0
webpack 3.4.1
file-loader v1.0.0
url-loader v0.5.9

Windows 10 x64

{
      test: /\.(woff|woff2|eot|ttf|svg)$/,
      loader: 'url-loader',
      options: {
        limit: 10240,
        outputPath: './fonts/',
        name: '[name].[ext]?[hash]',
      }
 }

[delch]

Have a same problem.

node v8.1.4
webpack 3.4.1
file-loader 1.0.0

os x Sierra

      loader: 'file',
      options: {
        name: '[name].[hash:base64:6].[ext]'
      }

[Jessidhia]

I think this will require an update to css-loader...

css-loader is rewriting url('./file') to use require('file'), but file-loader@1's output is not compatible with require.

[Jessidhia]

Yep, this is incompatible with the current css-loader.

https://github.com/webpack-contrib/css-loader/blob/v0.28.4/lib/loader.js#L94-L102

It needs to be converted to write hoisted imports.

[stomvi]

Same here. file-loader v1.0.0 also breaks the png files loaded when trying to get through the tutorial of the Webpack new guides on page:
https://webpack.js.org/guides/asset-management/

node 8.2.1
webpack 3.4.1
file-loader 1.0.0

OSX Sierra

[joshwiens]

As @Kovensky said, we will have to fix this in css-loader which hasn't been upgraded given it's been rewritten, hence the disconnect.

In the mean time & in the spirit of not making everyone's lives more difficult, i have updated the tags in npm while we sort this out.

'dist-tags': { latest: '0.11.2', beta: '1.0.0-rc.0' }

Please keep in mind that [email protected] was not unpublished, it's just not latest. If you are explicitly targeting 1.0.0 roll that back to 0.11.2. If you are feeling adventurous, use 1.0.0-rc.0.

[Jetsly]

when i change index.js,it ok

 -return `export default ${publicPath};`
 +return `module.exports = ${publicPath};`

[michael-ciniawsky]

We could either

1. add a 'harmony' mode to css-loader options.url to replace
   url('./file.png') =>url('require(./21543.png).default') when set
2. or inspect package.json in css-loader for file-loader >= v1.0.0 and do the same then :)
3. revert to CJS for now (:-1:)

[alexander-akait]

@michael-ciniawsky

1. We will have many problems when people just forget to add this option.
2. Sound good.
3. 👎

[joshwiens]

We could also simply wait to hear back from Tobias on the state of the style loaders chain / changes & either add defaults to css-loader or wait for css-loader/new-loader.

There is really nothing in file-loader 1.0.0 that's earth shattering feature or fix wide. It's just defaults & style updates.

[jquense]

can we please revert this change? There doesn't seem to be an value to use es6 imports here, the file on the other end isn't JS its never gonna benefit from treeshaking or any other thing you might use the esm syntax for. On the other hand its subtly breaking for everyone using file-loader in the most popular way (e.g. to chain against css-loader for loading css assets)

I'm sorry if I sound a bit annoyed I just spent 4 hourts trying to figure out why my build was broken

[azeemmirza]

Revert file-loader to v0.11.2. Works fine.

[joshwiens]

@jquense - Not entirely sure how this ended up back on dist-tags: latest but [email protected] removes the es6 imports until we can address the actual issue ( css-loader ) which isn't going to happen until after e.t.w.p is retired & becomes part of Webpack.

In short, this isn't going to change again until css-loader/new-loader replaces the existing & Webpack eats e.t.w.p. which should simplify the style sheets loader chain significantly.