jorgelf
commented
4 years ago This can't be related to my pull request as the latest npm version is from 4 months ago. Hope @lipis can provide more info.
Closed goxr3plus closed 4 years ago
jorgelf
commented
4 years ago This can't be related to my pull request as the latest npm version is from 4 months ago. Hope @lipis can provide more info.
Findus23
commented
4 years ago Hi,
Where do you see this error? This repo does neither contain a media nor a fonts directory, so I assume you have something like webpack set up to store files somewhere like /some/path/[filename].[extension] and as there are two files in the repo with the same name for each flag, the second one is overwriting the first one and you need to configure your build process to respect the parent directory of the file.
lipis
commented
4 years ago I just released a new version and can't reproduce this error..
jorgelf
commented
4 years ago I agree with @Findus23, this looks related to your environment and/or other packages. Can you try installing it solely in a clean location and check if the warnings keep appearing?
goxr3plus
commented
4 years ago Hi,
Where do you see this error? This repo does neither contain a media nor a fonts directory, so I assume you have something like webpack set up to store files somewhere like /some/path/[filename].[extension] and as there are two files in the repo with the same name for each flag, the second one is overwriting the first one and you need to configure your build process to respect the parent directory of the file.
Yes i am using it in a React with WebPack project , what can i do :) ?
goxr3plus
commented
4 years ago Here is my webpack.config.js
const webpack = require('webpack')
const path = require('path')
// ---------------------- Variables ----------------------
const nodeEnv = process.env.NODE_ENV || 'development'
const publicServePath = nodeEnv === 'production' ? '/public/' : 'http://localhost:3000/public/'
const buildPath = path.join(__dirname, './src/server/public')
module.exports = {
target: 'web',
output: {
path: buildPath,
filename: '[name].js',
publicPath: publicServePath
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: {
loader: 'babel-loader'
},
exclude: /node_modules/
},
{
test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
use: { loader: 'file-loader?name=media/fonts/[name].[ext]' }
},
{
test: /\.(png|jpe?g|gif|ico)$/,
use: { loader: 'file-loader?name=assets/[name].[hash].[ext]' }
}
]
},
resolve: {
extensions: ['.webpack-loader.js', '.web-loader.js', '.loader.js', '.js', '.jsx'],
alias: {
'react-dom': '@hot-loader/react-dom'
}
},
plugins: [
new webpack.NamedModulesPlugin(),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(nodeEnv)
}
})
],
optimization: {
splitChunks: {
cacheGroups: {
vendor: {
test: /node_modules/,
chunks: 'initial',
name: 'vendor',
priority: 10,
enforce: true
}
}
}
}
}
and webpack.dev.js :
const webpack = require('webpack')
const merge = require('webpack-merge')
const path = require('path')
const common = require('./webpack.config.js')
const devServerPort = 3000
module.exports = merge(common, {
mode: 'development',
entry: {
bundle: [`webpack-dev-server/client?http://localhost:${devServerPort}`, 'webpack/hot/dev-server', './src/client/index.jsx']
},
module: {
rules: [
{
test: /\.(scss|css)$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader', options: { sourceMap: true } },
{ loader: 'sass-loader', options: { sourceMap: true } }
]
}
]
},
plugins: [new webpack.HotModuleReplacementPlugin()],
devServer: {
contentBase: path.join(__dirname, './src/client'),
historyApiFallback: true,
port: devServerPort,
compress: false,
inline: false,
hot: true,
host: '0.0.0.0',
publicPath: '/public/',
headers: { 'Access-Control-Allow-Origin': '*' },
disableHostCheck: true,
stats: {
colors: true,
assets: true,
version: false,
hash: false,
timings: true,
chunks: false,
chunkModules: false
}
},
devtool: 'inline-source-map'
})
Rendrik
commented
4 years ago @goxr3plus I was having this issue in Webpack as well. It stems from a combination of using the file loader, and this library. There are two sets of flags in different folders: 1x1, and 4x3. The filenames however are the same. Using your settings, Webpack will happily take all of them and slap them in media/fonts/[name].[ext] at which point they will be stepping on eachother's toes.
There's many ways around this. But the root of it is when using file-loader, you need to ensure the name/path is unique. So you could add the path in: media/fonts/[path][name].[ext], but that will result in something like media/fonts/node_modules/flag-icon-css/flags/4x3/yt.svg.
Another solution is to add some other uniqueness to it like a hash.
But the point is the root of the problem is the way file-loader is being used, and it's not really a problem with this NPM library.
goxr3plus
commented
4 years ago @Rendrik So for example with the given Webpack I have can you suggest me the simplest solution. I mean giving me one or two lines of code that will work. I read your two different solution but I don't know how to translate into Webpack code.
I am kind of very new in the world of Webpack :)
Thank you ♥️
Rendrik
commented
4 years ago @goxr3plus This line in your webpack config:
use: { loader: 'file-loader?name=media/fonts/[name].[ext]' } You can make it unique by adding hash like so use: { loader: 'file-loader?name=media/fonts/[name]-[contenthash].[ext]' }.
You can also not specify the name at all, and set just the output path to /media/fonts. Webpack will automatically name each file with only a hash. You can read about output path and the other options on the webpack file-loader page.
goxr3plus
commented
4 years ago Thank you very much I will try and come back here to close :)
I just installed from npm used it it works but my console is full of these annoying warnings .... ? @jorgelf