Giter Club home page Giter Club logo

Comments (7)

codymikol avatar codymikol commented on June 2, 2024

Does this solve your issue?

#517 (comment)

from karma-webpack.

Merynek avatar Merynek commented on June 2, 2024

Does this solve your issue?

#517 (comment)

You mean change name of output name?

package.json

 "file-loader": "6.2.0"
{
            loader: "file-loader",
            options: {
                name: (resourcePath, resourceQuery) => {
                    // `resourcePath` - `/absolute/path/to/file.js`
                    // `resourceQuery` - `?foo=bar`

                    if (this.isInDebugMode) {
                        return '[path][name].[ext]?[hash]';
                    }

                    return '[path][contenthash].[ext]';
                },
                outputPath: "images/",
                publicPath:  (this.cdnUrl || this.basePath) + this.clientBasePath + "images/"
            }
        };

Still got errors with this config of file-loader

from karma-webpack.

codymikol avatar codymikol commented on June 2, 2024

Nope, the bit about file-loader being deprecated, see the comment I linked.

from karma-webpack.

Merynek avatar Merynek commented on June 2, 2024

Nope, the bit about file-loader being deprecated, see the comment I linked.

Iยดam sorry but I dont understand where I have to set part from your linked comment.
Here is my webpack config where is file-loader

file-loader version is: 6.2.0

{
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    {
                        loader: "file-loader",
                        options: {
                            name: "[name].[ext]",
                            outputPath: "fonts/"
                        }
                    }
                ]
            },
            {
                test: /\.svg$/,
                include: [
                    svgIconsPath
                ],
                use: [
                    {
                        loader: 'svg-sprite-loader',
                        options: {
                            extract: true,
                            publicPath:  this.basePath + this.clientBasePath + 'sprites/',
                            outputPath: 'sprites/',
                            spriteFilename: filePath => {
                                const prefix = path.dirname(path.relative(__dirname, filePath))
                                    .split("\\")
                                    .join("_");

                                return prefix + 'sprite-[hash:6].svg'
                            },
                            symbolId: filePath => {
                                return path.basename(filePath, ".svg") + svgMinifier.getNextIdent(filePath);
                            }
                        }
                    },
                    {
                        loader: "svgo-loader"
                    }
                ]
            },
            {
                test: /\.svg$/,
                exclude: [
                    svgIconsPath
                ],
                use: [
                    this.buildFileLoaderForImage(),
                    {
                        loader: "svgo-loader"
                    }
                ]
            },
            {
                test: /\.(png|jpg|gif|webp)$/,
                use: [
                    this.buildFileLoaderForImage()
                ]
            },

Here is buildFileLoaderForImage fnc:

buildFileLoaderForImage() {
        return {
            loader: "file-loader",
            options: {
                name: (resourcePath, resourceQuery) => {
                    // `resourcePath` - `/absolute/path/to/file.js`
                    // `resourceQuery` - `?foo=bar`

                    if (this.isInDebugMode) {
                        return '[path][name].[ext]?[fullhash]';
                    }

                    return '[path][contenthash].[ext]';
                },
                outputPath: "images/",
                publicPath:  (this.cdnUrl || this.basePath) + this.clientBasePath + "images/"
            }
        };
    }

Error with import png:
Tsx Component:

import articleImg2 from "./images/buddy_itinerary_where.png";

Log:

[karma-server]: UnhandledRejection: Error: ENOENT: no such file or directory, open 'C:\Work\WORLDEE_WEB\client/../www/client//images/src/app/component
s/pages/Buddy-itinerary/images/buddy_itinerary_what.png?b50142538741d01bd7ac'

from karma-webpack.

codymikol avatar codymikol commented on June 2, 2024

Read this https://webpack.js.org/guides/asset-modules/

from karma-webpack.

Merynek avatar Merynek commented on June 2, 2024

Read this https://webpack.js.org/guides/asset-modules/

I understand it, I have this issue after migrate to webpack 5. But normal build works. I have own settings of file-loader and it is not problem in build. Just only in karma.

from karma-webpack.

MS-elug avatar MS-elug commented on June 2, 2024

I fixed similar issue by removing the query value of my imported asset urls, e.g. change "buddy_itinerary_what.png?b50142538741d01bd7ac" to "buddy_itinerary_what.png"

from karma-webpack.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.