Not allowed to load local resource - Webpack dev server error

[Deckerz]

• Operating System: Win 10
• Node Version: 11.14.0
• NPM Version: 6.7.0
• webpack Version: 4.30.0
• webpack-dev-server Version: 3.3.1

• This is a bug
• This is a modification request

Code

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

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');


const path = require('path');

function resolvePath(dir) {
    return path.join(__dirname, '..', dir);
}

const env = process.env.NODE_ENV || 'development';
const target = process.env.TARGET || 'web';


module.exports = {
    mode: env,
    entry: [
        './src/js/app.js',
    ],
    output: {
        path: resolvePath('www'),
        filename: 'js/app.js',
        publicPath: '',
    },
    resolve: {
        extensions: ['.js', '.jsx', '.json'],
        alias: {

            '@': resolvePath('src'),
        },
    },
    devtool: env === 'production' ? 'source-map' : 'eval',
    devServer: {
        hot: true,
        open: true,
        compress: true,
        contentBase: '/www/',
        disableHostCheck: true,
        watchOptions: {
            poll: 1000,
        },
        port: 8081
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                use: 'babel-loader',
                include: [
                    resolvePath('src'),
                    resolvePath('node_modules/framework7'),
                    resolvePath('node_modules/framework7-react'),
                    resolvePath('node_modules/template7'),
                    resolvePath('node_modules/dom7'),
                    resolvePath('node_modules/ssr-window'),
                ],
            },


            {
                test: /\.css$/,
                use: [
                    (env === 'development' ? 'style-loader' : {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../'
                        }
                    }),
                    'css-loader',
                    'postcss-loader',
                ],
            },
            {
                test: /\.styl(us)?$/,
                use: [
                    (env === 'development' ? 'style-loader' : {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../'
                        }
                    }),
                    'css-loader',
                    'postcss-loader',
                    'stylus-loader',
                ],
            },
            {
                test: /\.less$/,
                use: [
                    (env === 'development' ? 'style-loader' : {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../'
                        }
                    }),
                    'css-loader',
                    'postcss-loader',
                    'less-loader',
                ],
            },
            {
                test: /\.(sa|sc)ss$/,
                use: [
                    (env === 'development' ? 'style-loader' : {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../'
                        }
                    }),
                    'css-loader',
                    'postcss-loader',
                    'sass-loader',
                ],
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: 'images/[name].[ext]',
                },
            },
            {
                test: /\.(mp4|webm|ogg|mp3|wav|flac|aac|m4a)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: 'media/[name].[ext]',
                },
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: 'fonts/[name].[ext]',
                },
            },
        ],
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify(env),
            'process.env.TARGET': JSON.stringify(target),
        }),

        ...(env === 'production' ? [
            // Production only plugins
            new UglifyJsPlugin({
                uglifyOptions: {
                    compress: {
                        warnings: false,
                    },
                },
                sourceMap: true,
                parallel: true,
            }),
            new OptimizeCSSPlugin({
                cssProcessorOptions: {
                    safe: true,
                    map: {inline: false},
                },
            }),
            new webpack.optimize.ModuleConcatenationPlugin(),
        ] : [
            // Development only plugins
            new webpack.HotModuleReplacementPlugin(),
            new webpack.NamedModulesPlugin(),
        ]),
        new HtmlWebpackPlugin({
            filename: './index.html',
            template: './src/index.html',
            inject: true,
            minify: env === 'production' ? {
                collapseWhitespace: true,
                removeComments: true,
                removeRedundantAttributes: true,
                removeScriptTypeAttributes: true,
                removeStyleLinkTypeAttributes: true,
                useShortDoctype: true
            } : false,
        }),
        new MiniCssExtractPlugin({
            filename: 'css/app.css',
        }),
        new CopyWebpackPlugin([
            {
                from: resolvePath('src/static'),
                to: resolvePath('www/static'),
            },

        ]),


    ],
};

Expected Behavior

Using this js

let reader = new FileReader();
let file = res.target.files[0];

reader.onloadend = () => {
    newState.items[id].image = reader.result;
    this.setState(newState);
    this.saveQuote();
};

reader.readAsDataURL(file);

I should be able to access an image that is selected via file select. But i get Not allowed to load local resource: error

Actual Behavior

Able to access base64 image

For Bugs; How can we reproduce the behavior?

I think the problem is to do with my webpack config

[alexander-akait]

Because by default we use memory fs for speedup build, so you don't have real files, you need use option writeToDisk https://webpack.js.org/configuration/dev-server/#devserverwritetodisk- for this files

[Deckerz]

Just tried that didnt work. I still can't access the file input image. Same error: Not allowed to load local resource: file:///C:/fakepath/homepage-1.jpg

[alexander-akait]

it is browser limitation, you can't use file:// to load files

[alexander-akait]

Please read https://stackoverflow.com/questions/25046301/convert-url-to-file-or-blob-for-filereader-readasdataurl

[JounQin]

@alexander-akait

What if it is caused by css-loader?

---

The following works to me.

{
  "loader": "css-loader",
  "options": {
    "url": false
  }
}

[alexander-akait]

@JounQin Looks like you use css-loader with target: node so we use file://..., right?

Do you build library or app?

[JounQin]

@alexander-akait We are targeting ['web', 'es2015'], it's an app.

[alexander-akait]

@JounQin strange, can you provide reproducible example? Maybe you have own CSS/extract CSS loader?

[JounQin]

@JounQin strange, can you provide reproducible example? Maybe you have own CSS/extract CSS loader?

I'll try to add a reproduction, it's an Angular cli App with custom-webpack, but the matched css-loader is only for monaco-editor/esm.

See also https://github.com/angular/angular-cli/blob/main/CHANGELOG.md#angular-devkitbuild-angular-9

[alexander-akait]

@JounQin webpack internally replace import.meta.url when you build CSS code for node target (note - mini-css-extract-plugin do the same under the hood, so after evalation we can extract them from JS), can you capture what loaders are used for CSS (from bottom to top, you can use Profile plugin)?

[JounQin]

@alexander-akait

In Angular@v13, .css is not handled by default in ESM, so I can confirm that we're using:

config.module.rules.push({
  test: /node_modules[/\\]monaco-editor[/\\]esm[/\\].*\.css$/i,
  use: [
    "style-loader",
    {
      loader: "css-loader",
      options: {
        // https://github.com/webpack/webpack-dev-server/issues/1815#issuecomment-1181720815
        url: false,
      },
    },
  ],
});

[yangxiaolang]

@JounQin
It seems @angular-builder/custom-webpack influence css-loader,when i use @angular-builders/custom-webpack:browser and webpack to handle same imported css file which use url()

{
  test: /ttk.css$/i,
  use: [
    "style-loader",
    {
      loader: "css-loader",
      options:{
        // url:false
      }
    },
  ],
},

they output differently

// webpack 
new URL(/* asset import */ __webpack_require__(/*! ./ttk.ttf */ \"./src/assets/ttk.ttf\")

// @angular-builder/custom-webpack
new URL("./ttk.ttf","file:///D:/alauda/angular-tour-of-heros/src/assets/ttk.css")

and this issue metioned it webpack-contrib/css-loader#1362 , but now i'm not sure what differences between @angular-builder/custom-webpack and webpack

Repro: https://github.com/yangxiaolang/css-loader-packaged-file-procotol

[alexander-akait]

@yangxiaolang Looks like angular execute CSS on Node.js side, so webpack inline base of new URL(...)

@alan-agius4 can you look at this, thank you?

[alan-agius4]

Modifying the Webpack configuration is not something that we the Angular team support.

Likely however this is caused because we disabled url parsing https://github.com/angular/angular-cli/blob/bf41b66fcc7e68b6a04ea3a6be470c7d97eacd57/packages/angular_devkit/build_angular/src/webpack/configs/common.ts#L351-L353

[JounQin]

So css-loader's url should default to module.parser.javascript.url if possible?

[yangxiaolang]

@alan-agius4 @JounQin
Thanks , Indeed this module.parser.javascript.url is disabled causing the css-loader in customWebpackConfig will output a new URL() with file://
I have reproduced locally by using webpack directly

[alexander-akait]

@alan-agius4 Could you tell me why it's disabled? Maybe we can solve it