permission error when using webpack-dev-server

[Krustal]

First of all thanks for making this, it is exactly what I've been looking for. I'm running into a permission error when using this loader with webpack-dev-server.

ERROR in ./~/globals-loader!./src/models/todo.js
Module build failed: Error: EACCES, permission denied '//vendor.js'
    at Error (native)
    at Object.fs.openSync (fs.js:500:18)
    at Object.fs.writeFileSync (fs.js:1099:15)
    at Object.module.exports (/path/to/project/node_modules/globals-loader/index.js:23:6)
 @ ./src/main.js 4:0-32

The require I have is:

require('globals!./models/foo')

I'm looking into this at the moment, but I thought I'd throw this up here first since I've not done a ton of work with Webpack, especially with building loaders.

[bensampaio]

I never used this with webpack-dev-server but it seems the permissions for the todo.js file must not be correct. Are you sure you have permissions to read the file and that it belongs to a group that webpack has access to?

[Krustal]

It seems to be because this.options.output.path resolves to / when using webpack-dev-server, so it's trying to write the bundle to //vendor.js. webpack-dev-server doesn't actually write to files, it stores and serves the bundles from memory, which I imagine is why the output path doesn't make sense. That isn't the path I have set in my config.

https://github.com/bensampaio/webpack-globals-loader/blob/152351bf9a1118dee04b5644cdb95212d2951ccd/index.js#L13

I'm still diggin but I'm not clear with how webpack-dev-server writes and reads from memory, still pretty new to streams in JavaScript.

[bensampaio]

Sorry for the delay, I didn't have much time lately to focus on this.

Can you tell me what is the value of output.path in your webpack.config.js?

[kesne]

I just ran into this issue as well. The output.path is set to a value, but when using webpack-dev-server it ignores it.

[hoanguyen311]

I got the same problem with this webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
    context: __dirname + "/app",
    entry: "./main",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js"
    },
    devServer: {
        hot: false,
        contentBase: 'dist'
    },
    resolve: {
        alias: {
            'extJs': __dirname + '/app/libs/extJs/adapter/ext/ext-base.js',
            'extJsDebug': __dirname + '/app/libs/extJs/ext-all-debug.js'
        }
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html',
            hash: true
        })
    ]

};

[mishoboss]

Any solution to this issue? This loader is not usable at all while developing.

[bensampaio]

I looked into this problem in the past few days but I cannot find out how to properly fix it. I believe the problem exists because this loader tries to go against the way webpack expects JS to be dealt with. Instead of emitting a file I should be adding it as an entry to the compiler but the template for the generated output should be different from the usual. I think it is possible to do this but the documentation is not really helpful. They just tell you too look into the source code, which is quite massive and complex...

So if anyone here has a deep understanding on how webpack works internally and how could this be done properly then please contact me. Otherwise I don't think I'll have the time to deep dive into this :(