[Windows] wrong path separator (options.name)

[net1957]

I'm working on windows8.1 and have some problems with path.

the generated manifest look a little bad:

{
  "application.css": "/packs/application-cf63677c5f4021f40c64b2013d17428c.css",
  "application.js": "/packs/application-6a8f00751a437a9bfb81.js",
  "images\\logo.png": "/packs/images/logo-b463011bf65683cac7917a30ba072bf8.png"
}

correcting images\logo.png to images/logo.png result in a correct page.

I did open this issue here after some advice on bug rails/webpacker#1101

I'm using:

node 6.11.5
webpack 3.10.0
file-loader 1.1.5

I used https://github.com/zarqman/look_ma_no_sprockets as example. All credits to the author.
I just added:
a image as javascript/images/logo.png and

 <img src="<%= asset_pack_path('images/logo.png')%>">

in the layout.

in packs/application.js I added:

require.context('../images/', true, /\.(gif|jpg|png|svg)$/i)

Any advice ?
Regards

[ryan-codingintrigue]

Ran into this issue myself on a Windows machine. I resolved using a custom name function:

use: {
    loader: "file-loader",
    options: {
        name: filename => path.relative("./", filename).replace(/\\/g, "/");
    }
}

Which I think is equivalent to { options: { name: "[path][name].[ext]" } }

[net1957]

can you elaborate? I'm new to webpacker and any advice would be nice!
regards

[ryan-codingintrigue]

@net1957 I'll try. I am unfamiliar with @rails/webpacker myself. It looks like it has a default configuration for file-loader here, which means you'll need to modify the default config to add the name option.

Given your repository, looks like you'll need to modify:
https://github.com/zarqman/look_ma_no_sprockets/blob/master/config/webpack/environment.js

And the webpacker docs are pretty explicit on how to modify existing configs:
https://github.com/rails/webpacker/blob/master/docs/webpack.md#loaders

// config/webpack/environment.js
const { environment } = require('@rails/webpacker')
const path = require("path")

const fileLoader = environment.loaders.get('file')
fileLoader.options.name = filename => path.relative("./", filename).replace(/\\/g, "/")

module.exports = environment

You might need to tweak the function a bit to work with your environment, but should get you most of the way there. Hope that helps.

[hron]

The problem is actually already fixed in the scope of webpack-manifest-plugin. However the fix is only available for 2.0.0-rc.1 version. Here is the details: shellscape/webpack-manifest-plugin#78

@net1957 Here is my workaround for this problem. Add the following to config/webpack/environment.js:

// This is a temporary workaround for generating manifest.json on Windows. The problem is already fixed in //
// webpack-manifest-plugin 2.0.0-rc.1. Remove this piece of code when @rails/webpacker incorporates the new version
// of webpack-manifest-plugin.
const config = require('@rails/webpacker/package/config')
const ManifestPlugin = require('webpack-manifest-plugin')
environment.plugins.append('Manifest', new ManifestPlugin({
  publicPath: config.publicPath,
  writeToFileEmit: true,
  filter: f => {
    f.name = f.name.replace(/\\/g, '/')
    f.path = f.path.replace(/\\/g, '/')
    return f
  }
}))

Essentially it mimics the patch applied in 2.0.0-rc.1 by adding a filter which replaces all \ symbols with /.

You also might need to execute ruby bin/yarn add webpack-manifest-plugin so the require statement would work.

[net1957]

@ryan-codingintrigue : Thanks for the trick. I came to a similar code, but it was a wrong path. But I learned some new webpacker coding.

@hron : Work nice! webpack-manifest-plugin is already required by webpacker@3.2.0 (but version ^1.3.2), so no need to add webpack-manifest-plugin with yarn.

[ryan-codingintrigue]

@net1957 Indeed, hron's solution is correct one for this particular issue.

Just for other people arriving here though I was seeing this issue whilst doing server-side rendering using css-loader. As a result of the way file-loader is working, it was outputting windows-style paths in the output CSS which for some clients would be an invalid path.

[net1957]

@ryan-codingintrigue: You are right. I hope webpacker team will change the dependency as soon as possible, but for now @hron workaround is working very well.

Thanks to all for the help

[alexander-akait]

Anybody can create minimum reproducible test repo?

[kreediam]

@evilebottnawi I'm having this issue in my project. I should be able to reproduce in a small repo in the next day or two.

[kreediam]

@evilebottnawi here is an example. There ended up being more to this example than I planned, but I'm using ExtractTextPlugin to isolate the issue to the dist/index.css file after npm run build.

// package.json
"dependencies": {
  "css-loader": "^0.28.9",
  "extract-text-webpack-plugin": "^3.0.2",
  "file-loader": "^1.1.8",
  "webpack": "^3.11.0"
}

// webpack.config.js
var path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'index.bundle.js'
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
                use: ['css-loader']
            })
        }, {
            test: /\.(png)$/,
            use: [{
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]',
                    outputPath: 'img/'
                }
            }]
        }]
    },
    plugins: [
        new ExtractTextPlugin('index.css')
    ]
};

node 8.9.4, npm 5.6.0 on Windows 10:

/* dist/index.css */
body {
    background-image: url(img\cake.png); /* wrong path separator */
}

Note that this worked with file-loader v0.11.2

For reference, node 8.9.1, npm 5.6.0 on macOS10.13.3:

/* dist/index.css */
body {
    background-image: url(img/cake.png);
}

[michael-ciniawsky]

Could someone try with v1.1.9 ?

[kreediam]

Works for me with v1.1.9. Thanks!

[alexander-akait]

Thanks!. Feel free to feedback is still regressions 👍