URIError: Could not decode option '/% PUBLIC_URL% / WEBPACK
I have a problem running my webpack app, I have this error:
URIError: Failed to decode param '/%PUBLIC_URL%/src/css/TagsCheck.css'
at decodeURIComponent (<anonymous>)
and this is my webpack.config.js:
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
var publicUrl = '/public';
module.exports = {
context: path.join(__dirname, "src"),
devtool: debug ? "inline-sourcemap" : false,
entry: "./index.js",
devServer: {
host: '0.0.0.0',
port: 8080,
inline: true
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0'],
plugins: ['react-html-attrs', 'transform-decorators-legacy', 'transform-class-properties'],
}
}
]
},
output: {
path: __dirname + "/src/",
filename: "client.min.js"
},
plugins: debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
// new HtmlWebpackPlugin({
// pkg: require("./package.json"),
// template: 'template.html',
// inject: false
// }),
// Makes the public URL available as %PUBLIC_URL% in index.html, e.g.:
// <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
new InterpolateHtmlPlugin({
PUBLIC_URL: publicUrl
// You can pass any key-value pairs, this was just an example.
// WHATEVER: 42 will replace %WHATEVER% with 42 in index.html.
}),
// Generates an `index.html` file with the <script> injected.
new HtmlWebpackPlugin({
inject: true,
template: path.resolve('public/index.html'),
}),
],
};
I want the value to be readable in my index file /%PUBLIC_URL%/
. What do I need to do to get my code running?
And I have another question ... I am using react and I am importing the native-native library, will I have some problem with var PUBLIC_URL
?
Can I make the application just import the library 'react-native'
?
Many thanks. Respectfully,
source to share
It may be related to whitespace encoding (ISO hex% 20) somewhere in your project, have a look at this comment on the Github issue: https://github.com/facebook/create-react-app/issues/4150#issuecomment- 379742880
source to share
Disclaimer: I am not familiar with how it works InterpolateHtmlPlugin()
, and the best practices associated with it. However, I think Babel is stumbling over %
char. What if you used the actual path instead. Maybe this answer will help you.
Another option is to include TagsCheck.css as part of HtmlWebpackPlugin({ ... })
your webpack config. This file will then be copied to your output directory and you %PUBLIC_URL%
no longer need to reference it, as it will be at the root of the file that references it.
You might also need to add another rule to your webpack.config.js :
//...
{
test: /\.css$/,
exclude: /node_modules/,
use: ['style-loader', 'css-loader']
// The filename should be preserved, if not then tack on ?name=[name].[ext] to either loader
// e.g. 'style-loader?name=[name].[ext]' ...
}
//...
Your setup is quite different from mine, I was unable to verify my suggestions Sorry if I missed something and I am far away. However, I hope they help someone!
source to share