codymikol
commented
2 years ago Does this solve your issue?
https://github.com/ryanclark/karma-webpack/issues/517#issuecomment-993088871
Closed Merynek closed 10 months ago
codymikol
commented
2 years ago Does this solve your issue?
https://github.com/ryanclark/karma-webpack/issues/517#issuecomment-993088871
Merynek
commented
2 years ago Does this solve your issue?
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
codymikol
commented
2 years ago Nope, the bit about file-loader being deprecated, see the comment I linked.
Merynek
commented
2 years ago 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'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.
MS-elug
commented
1 year ago 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"
I got some errors during running karma tests.
Error log:
my libs:
My karma.config.js
My webpack.config:
Any idea?