score:0
<link href="<%= htmlwebpackplugin.options.favicon %>" rel="shortcut icon">
and
new htmlwebpackplugin({
favicon: "image/favicon.ico",
})
and
{
test: /\.(jpe?g|gif|png|ico)$/,
use: ['file-loader?name=[name].[ext]']
},
score:0
solution
- npm install interpolate-html-plugin --save-dev
- add to list of plugins in webpack config
new interpolatehtmlplugin({public_url: 'static })
score:0
i was getting this error from create-react-app when i was serving the page from express server. it was because i was serving static pages from public
folder instead of build
folder.
not working:
app.use('/', express.static(path.join(__dirname, '../public')));
working
app.use('/', express.static(path.join(__dirname, '../build')));
score:3
problem fixed
step 1)
remove %public_url% with the actual path. %public_url%/favicon.ic
o with favicon.ico
before <link rel="icon" href="%public_url%/favicon.ico" />
after <link rel="icon" href="favicon.ico" />
step 2) add this rule to the webpack.config.js
plugins: [new htmlwebpackplugin({ template: path.resolve(__dirname, "public", "index.html"),
favicon: "./public/favicon.ico",
filename: "index.html",
manifest: "./public/manifest.json",
})]
step 3) add svg support in webpack(important) install svg-url-loader package
{
test: /\.svg$/,
use: [
{
loader: 'svg-url-loader',
options: {
limit: 10000,
},
},
],
}
score:4
i had the same issue and fixed it with the following:
inside webpack.config.js in the plugins
array, add htmlwebpackplugin
and interpolatehtmlplugin
new htmlwebpackplugin(
object.assign(
{},
{
inject: true,
template: paths.apphtml,
},
isenvproduction
? {
minify: {
removecomments: true,
collapsewhitespace: true,
removeredundantattributes: true,
useshortdoctype: true,
removeemptyattributes: true,
removestylelinktypeattributes: true,
keepclosingslash: true,
minifyjs: true,
minifycss: true,
minifyurls: true,
},
}
: undefined
)
),
new interpolatehtmlplugin(htmlwebpackplugin, env.raw)
this is the documentation of interpolatehtmlplugin
makes some environment variables available in index.html.
the public url is available as %public_url% in index.html, e.g.:
<link rel="shortcut icon" href="%public_url%/favicon.ico">
in production, it will be an empty string unless you specify "homepage"
in `package.json`, in which case it will be the pathname of that url.
in development, this will be an empty string.
score:26
quick fix
what if you were to replace %public_url%
with the actual path. i think that babel is having issues transpiling the %
. try replacing %public_url%/favicon.ico
with /public/favicon.ico
and the issue is resolved.
better fix
add a new rule to your webpack.config.js.
//...
{
test: /\.(png|svg|jpg|jpeg|gif|ico)$/,
exclude: /node_modules/,
use: ['file-loader?name=[name].[ext]'] // ?name=[name].[ext] is only necessary to preserve the original file name
}
//...
then have the .ico resource copied to the dist directory by adding an import in your app.js. import '../public/favicon.ico';
in your index.html; <link rel="shortcut icon" href="favicon.ico">
to make use of your icon. no longer need to provide a path since it will be copied to the dist directory
or:
in addition to the rule added to the webpack.config.js mentioned above, adding plugins to the webpack config may be a better way to go depending on your setup.
for me this looks like adding the npm package html-webpack-plugin to the project. then requiring it in the webpack config; const htmlwebpackplugin = require('html-webpack-plugin');
. then adding plugins
to the module.exports
.
//...
plugins: [
new htmlwebpackplugin({
template: './public/index.html',
filename: './index.html',
favicon: './public/favicon.ico'
})
]
//...
going this route and doing the work in the webpack config means the line added to the app.js to import the favicon.ico will no longer be necessary.
edit: as mentioned by @tolumide
don't forget to configure the webpack.config appropriately per environment.
Source: stackoverflow.com
Related Query
- URIError: Failed to decode param '/%PUBLIC_URL%/favicon.ico'
- Webpack URIError: Failed to decode param '/%PUBLIC_URL%/favicon.ico'
- URIError: Failed to decode param '/%PUBLIC_URL%/ WEBPACK
- URIError: Failed to decode param '/<myusername>/<projectname>/%PUBLIC_URL%/manifest.json'
- How to update query param in url in React?
- DOMException: Failed to execute 'replaceState' on 'History': A history state object with URL
- Remove query param from url
- React router: component not updating on url search param change
- How to get param from url in getStaticProps without using getStaticPaths?
- Accessing URL param in react-router render function
- Failed to construct 'WebSocket': The URL '[object Object]' is invalid
- Rails API ActiveStorage: Get Public URL to display image from AWS S3 Bucket?
- React routes param auto decode string
- electron & react: No resource with given URL found, DevTools failed to load SourceMap
- How to persist data search param in url in react js
- How to access URL param to update component state in class component?
- Redux app state via url -> query param
- Reactjs - TypeError: Failed to execute 'fetch' on 'Window': Failed to parse URL from ***.**.*.***:2000
- React Router with Meteor: How to remove code param from URL after redirect from OAuth without reload
- ReactJS route optional ID URL param
- decode url before location change in react app
- get param from url in react-router
- Invalid hook call in class component when I try to use useParams to get the param from url
- React Builder tool won't set public url correctly
- How do I pass a URL Param to a selector
- react router public path url
- Check if URL param is in list of allowed params and route accordingly
- Nested Routing with url param is not working in react-router-dom
- React Route with URL Param Not Updating View
- Pass a query url param inside a graphql query (Next js)
More Query from same tag
- How can I make this nav bar thinner and the background color transparent
- Is it necessary to unmount state within ComponentWillUnmount?
- Store does not have a valid reducer while the reducer is empty
- Get output from user typed code JavaScript
- Refresh Screen A when goBack with React Native using Hooks
- React architecture
- Reactstrap tooltip to be placed on the bottom of whole div, not its children
- How to add function to onChange in Input cmponent?
- React lose focus of select after click
- List directory in React
- How do I trigger a callback continuously while mouse is down in Rect?
- how to render a specific field dynamically in Material Table React
- react class method is not defined no-undef
- React Leaflet LayersControll - baseLayer object example
- How to call useNavigate inside useEffect? - For bottom navigation in Ant Design - Mobile
- this.props.location.query ends up being undefined in my component
- How can I validate React input is not empty and valid email?
- Smooth the movement of a track bar updated on `onTimeUpdate`
- Can useReducer do a functional update similar to useState?
- How to preserve applied filters on browser back button in react js
- Reactjs promise.all order of calls
- cant find module while loading image from a relative path with require()
- How to test for a state change after image element load event?
- How to type check component children with Preact and TypeScript?
- Absolute simplest example of an Functional Observable pattern in React
- Does dayjs support ordinals in month? (Feb. instead of Feb, for germany language)
- How can I make my layout adapt to the Material-UI toolbar height?
- ReactJS -> store variable from promise
- React Axios - C# WebAPI request token fails without a server error
- Files structure with styled component and CRUD