URIError: Failed to decode param '/%PUBLIC_URL%/ WEBPACK

Question

I have a problem running my react application with webpack, 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 that in my index file can read the value of /%PUBLIC_URL%/. What I have to do to make running my code?

And I have another question... I am using react and I am importing the library react-native, Will I have some problem with the var PUBLIC_URL?

I can make the app easly only importing the 'react-native' library?

Thanks so much. Regards,

Answer 1

It could be related to encoding of spaces (ISO hex %20) somewhere in your project, take a look at this Github issue comment: https://github.com/facebook/create-react-app/issues/4150#issuecomment-379742880