Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

historyApiFallback doesn't work, for scripts, if you're nested multiple path sections deep #216

Closed
ryancole opened this issue Jul 16, 2015 · 10 comments

Comments

@ryancole
Copy link

ryancole commented Jul 16, 2015

I'm using historyApiFallback so that my react application can use the newer client-side routing / HTML 5 history. I've set historyApiFallback to true. This works when the client-side route is something like /users or /home, etc. This does not seem to work if the client-side route is something like /users/1, though. It tries to look for scripts within my HTML file relative to /users. Even if my HTML script is like ...

<script type="text/javascript" src="./static/app.js"></script>

it looks for that at /users/static/app.js.

@ryancole
Copy link
Author

ryancole commented Jul 16, 2015

Actually, if I change ./static/app.js to just /static/app.js it works. Not sure which form is correct. I've been using that period-prefixed form for years. D:

@adamworrall
Copy link

adamworrall commented Jul 23, 2015

@ryancole I'm having the same problem, but changing the HTML script tag to match your example doesn't seem to solve it. Any way you could post your dev server config?

@ryancole
Copy link
Author

ryancole commented Jul 23, 2015

Sure. My repository is here. A paste of the webpack config is ...

'use strict';

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: [
    'webpack-dev-server/client?http://localhost:8081',
    'webpack/hot/only-dev-server',
    path.resolve(__dirname, 'src', 'App.js')
  ],
  plugins: [
    new webpack.HotModuleReplacementPlugin,
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    })
  ],
  output: {
    path: process.env.NODE_ENV === 'production' ?
          path.resolve(__dirname, 'build', 'release', 'static') :
          path.resolve(__dirname, 'build', 'debug', 'static'),
    filename: 'app.js',
    publicPath: '/static/'
  },
  resolve: {
    alias: {
      'bootstrap': 'bootstrap/dist'
    }
  },
  devtool: 'source-map',
  devServer: {
    hot: true,
    port: 8081,
    colors: true,
    publicPath: '/static/',
    historyApiFallback: true
  },
  module: {
    preLoaders: [
      {
        test: /\.js$/,
        loader: "eslint-loader",
        include: path.resolve(__dirname, 'src')
      }
    ],
    loaders: [
      {
        test: /\.js$/,
        loaders: [
          'react-hot',
          'babel'
        ],
        include: path.resolve(__dirname, 'src')
      },
      {
        test: /\.json$/,
        loader: 'json',
        exclude: /node_modules/
      },
      {
        test: /\.css/,
        loaders: [
          'style',
          'css'
        ]
      },
      {
        test: /\.woff2?$/,
        loader: "url-loader?limit=10000&mimetype=application/font-woff"
      },
      {
        test: /(\.ttf|\.eot|\.svg)$/,
        loader: "file-loader"
      }
    ]
  }
};

@adamworrall
Copy link

adamworrall commented Jul 24, 2015

@ryancole perfect, thanks!

@drhayes
Copy link

drhayes commented Dec 2, 2015

I'm having this issue as well.

When my app is deployed to production, its basename will be "/eyeglass". Thus, I've told webpack to generate with a public path of "/eyeglass". In my single index.html file, all my resources are homed at "/eyeglass", e.g. "/eyeglass/styles.css", "/eyeglass/app.js" and so on.

Locally, I'm starting the webpack-dev-server like this: webpack-dev-server --content-base build/ -d --progress --history-api-fallback

If I navigate to "localhost:8080/eyeglass" my index.html is served up as expected.

If I navigate directly to a deep URL, like "localhost:8080/eyeglass/reviews" the webpack-dev-server returns a 404.

Any ideas?

Here's the main snippet of my config:

var config = {
  target: 'web',
  resolve: {
    extensions: ['', '.jsx', '.scss', '.js', '.json']
  },
  module: {
    loaders: [{
      test: /index\.html$/,
      loader: 'file?name=[path][name].[ext]&context=./src'
    }, {
      test: /\.json$/,
      loader: 'json'
    }, {
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['react', 'es2015'],
        plugins: ['transform-es2015-spread', 'transform-object-rest-spread', 'transform-class-properties']
      }
    }, {
      test: /\.jpe?g$|\.gif$|\.png$/,
      loader: 'url!image'
    }, {
      test: /\.css$/,
      loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]')
    }, {
      test: /\.scss$/,
      loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!sass')
    }],
  },
  entry: {
    app: './src/index.js',
    vendor: ['react', 'react-dom', 'react-redux', 'redux', 'redux-devtools']
  },
  output: {
    path: path.resolve('./dist'),
    publicPath: '/eyeglass',
    filename: 'app.js',
    sourceMapFilename: '[file].map'
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js'),
    new ExtractTextPlugin('styles.css'),
    new webpack.DefinePlugin(definitions)
  ]
};

module.exports = config;

@chaoyangnz
Copy link

chaoyangnz commented Jun 26, 2016

+1

meghprkh added a commit to meghprkh/webpack-dev-server that referenced this issue Jun 30, 2016
Currently HistoryApiFallback does not work properly when publicPath as it redirects request to /index.html which gives as it does not exist, instead we should redirect to publicPath (which redirects to publicPath/index.html).

Fixes webpack#216
meghprkh added a commit to meghprkh/webpack-dev-server that referenced this issue Jun 30, 2016
Currently HistoryApiFallback does not work properly when publicPath as it redirects request to /index.html which gives as it does not exist, instead we should redirect to publicPath (which redirects to publicPath/index.html).

Fixes webpack#216
@aves84
Copy link
Contributor

aves84 commented Sep 8, 2016

@manekinekko #518 doesnt't fix this issue.

@anupambasak
Copy link

anupambasak commented Jun 19, 2017

Use:
devServer: { historyApiFallback: { index: '/your-public-path/' } }

@ghost
Copy link

ghost commented Oct 10, 2017

Setting the base tag with '/' as href in your index.html fixes it.

@mikeaustin
Copy link

mikeaustin commented Sep 29, 2019

Which is the "correct" solution?

Setting output.publicPath also solves it:

https://stackoverflow.com/questions/34620628/htmlwebpackplugin-injects-relative-path-files-which-breaks-when-loading-non-root

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants