partially going insane right now. I have been trying to fix this problem for over a week, but still can not seem to fix it.
Currently I am trying to make a React application that utilizes React-Router, however I am NOT using Redux or Flux. I took the code from the react-redux-starter-kit. I had experimented around with it a bit and all was working fine, but when I started changing things heavily is when I ran into issues.
The problem is, when the pages loads NOTHING is being displayed. When I say nothing I mean no HTML, JS, or CSS. All that is being displayed is the original base HTML file that consists of a <header> and <body> tag. When starting up the terminal I can see that the files are being loaded by webpack, here is what it looks like:
Server is now running at http://192.168.0.9:3000.
webpack built 928ca955f4efc3417ea7 in 11490ms
Hash: 928ca955f4efc3417ea7
Version: webpack 1.13.2
Time: 11490ms
Asset Size Chunks Chunk Names
2abdf22181eb309fd513564971a12163.png 70.2 kB [emitted]
148e6bc6eabab75f3e18eddc2d99a10f.png 34 kB [emitted]
app.928ca955f4efc3417ea7.js 1.04 MB 0 [emitted] app
1.charities.928ca955f4efc3417ea7.js 2.31 kB 1 [emitted] charities
vendor.928ca955f4efc3417ea7.js 405 kB 2 [emitted] vendor
app.928ca955f4efc3417ea7.js.map 1.29 MB 0 [emitted] app
1.charities.928ca955f4efc3417ea7.js.map 3.53 kB 1 [emitted] charities
vendor.928ca955f4efc3417ea7.js.map 487 kB 2 [emitted] vendor
favicon.ico 30.9 kB [emitted]
index.html 491 bytes [emitted]
Child html-webpack-plugin for "index.html":
Asset Size Chunks Chunk Names
index.html 565 kB 0
webpack: bundle is now VALID.
When I load the page though, none of those items are being displayed. I thought html-webpack-plugin was suppose to inject the necessary files, but it is not doing so. I can not figure out why none of the necessary files are being loaded in to my HTML file. My webpack config is as so:
import webpack from 'webpack'
import cssnano from 'cssnano'
import postcssNested from 'postcss-nested'
import postcssSimpleVars from 'postcss-simple-vars'
import HtmlWebpackPlugin from 'html-webpack-plugin'
import config from '../config'
const paths = config.utils_paths
const {__PROD__} = config.globals
const webpackConfig = {
name: 'client',
target: 'web',
devtool: config.compiler_devtool,
resolve: {
root: paths.client(),
extensions: ['', '.js', '.json']
},
module: {}
}
const APP_ENTRY_PATHS = [
'babel-polyfill',
paths.client('main.js'),
`webpack-hot-middleware/client?path=${config.compiler_public_path}__webpack_hmr`
]
webpackConfig.entry = {
app: APP_ENTRY_PATHS,
vendor: config.compiler_vendor
}
webpackConfig.output = {
filename: `[name].[${config.compiler_hash_type}].js`,
path: paths.dist(),
publicPath: config.compiler_public_path
}
webpackConfig.plugins = [
new webpack.DefinePlugin(config.globals),
new HtmlWebpackPlugin({
template: paths.client('index.html'),
hash: false,
favicon: paths.client('static/favicon.ico'),
filename: 'index.html',
inject: 'body',
minify: {
collapseWhitespace: true
}
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.optimize.CommonsChunkPlugin({
names: ['vendor']
})
]
if (__PROD__) {
webpackConfig.plugins.push(
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin({
compress: {
unused: true,
dead_code: true,
warnings: false
}
})
)
}
webpackConfig.module.loaders = [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
plugins: ['transform-runtime'],
presets: ['es2015', 'react', 'stage-1']
}
},
{
test: /\.json$/,
loader: 'json'
}
]
const BASE_CSS_LOADER = 'css?sourceMap&-minimize'
const cssModulesRegex = new RegExp(
`(${paths.client().replace(/[\^\$\.\*\+\-\?\=\!\:\|\\\/\(\)\[\]\{\}\,]/g, '\\$&')})`
)
const cssModulesLoader = [
BASE_CSS_LOADER,
'modules',
'importLoaders=1',
'localIdentName=[name]__[local]___[hash:base64:5]'
].join('&')
webpackConfig.module.loaders.push({
test: /\.css$/,
include: cssModulesRegex,
loaders: [
'style',
cssModulesLoader,
'postcss'
]
})
webpackConfig.module.loaders.push({
test: /\.css$/,
exclude: cssModulesRegex,
loaders: [
'style',
BASE_CSS_LOADER,
'postcss'
]
})
webpackConfig.postcss = [
cssnano({
autoprefixer: {
add: true,
remove: true,
browsers: ['last 2 versions']
},
discardComments: {
removeAll: true
},
discardUnused: false,
mergeIdents: false,
reduceIdents: false,
safe: true,
sourcemap: true
}),
postcssNested(),
postcssSimpleVars({
variables: function () {
return require(paths.client('styles/variables'));
}
})
]
webpackConfig.module.loaders.push(
{ test: /\.woff(\?.*)?$/, loader: 'url?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=application/font-woff' },
{ test: /\.woff2(\?.*)?$/, loader: 'url?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=application/font-woff2' },
{ test: /\.otf(\?.*)?$/, loader: 'file?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=font/opentype' },
{ test: /\.ttf(\?.*)?$/, loader: 'url?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=application/octet-stream' },
{ test: /\.eot(\?.*)?$/, loader: 'file?prefix=fonts/&name=[path][name].[ext]' },
{ test: /\.svg(\?.*)?$/, loader: 'url?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=image/svg+xml' },
{ test: /\.(png|jpg)$/, loader: 'url?limit=8192' }
)
export default webpackConfig
Please help me figure out why my index.html is not being injected with ANY of the files needed. All that is being displayed is the original index.html. If you would like all of the files I am currently using you can view them here. Thank you, please help!!
It looks like all that's being served is the fallback and static handlers you have configured in server/main.js
app.use(express.static(root));
app.use(fallback('index.html', { root }));
If you delete that the request hangs indefinitely. That's not the only necessary fix but that will hopefully help you get to the root of the problem.