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

user_4717331 0
Viewed 13219

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,

react-native webpack reactjs
2 Answers

Disclaimer: I'm not familiar with how InterpolateHtmlPlugin() works and the best practices associated with it. However, I think that Babel is tripping up on the % char. What if you used the actual path instead. Maybe this answer will be of some help.

Another option would be to include the TagsCheck.css as part of the HtmlWebpackPlugin({ ... }) in your webpack config. Then that file would be copied to your output directory and the %PUBLIC_URL% should no longer be necessary to reference it as it would be in the root relative to the file that references it.

It may also be necessary 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 different enough from mine I could not test my suggestions. Sorry if I missed something and am way off. However, I hope they help someone!

user_6738460
Related