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

12,518

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

Share:
12,518

Related videos on Youtube

Pablo Alejandro
Author by

Pablo Alejandro

Updated on August 22, 2022

Comments

  • Pablo Alejandro
    Pablo Alejandro about 1 year

    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,