After spending days on this, am throwing this up for help.
Trying to compile webpack 3.5.5 and react-hot-loader 1.3.1 and getting these errors:
ERROR in multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server babel-polyfill react-hot-loader/patch ./src/entry.js Module not found: Error: Can't resolve 'react-hot-loader/patch' in '/home/terry/myProjects/PWA/apps-dev' @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server babel-polyfill react-hot-loader/patch ./src/entry.js
ERROR in multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server babel-polyfill react-hot-loader/patch ./src/entry.js Module not found: Error: Can't resolve 'react-hot-loader/webpack' in '/home/terry/myProjects/PWA/apps-dev' @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server babel-polyfill react-hot-loader/patch ./src/entry.js
I've been following instructions (or so I thought) online to set up following config file:
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const sourcePath = path.join(__dirname, './src');
const publicPath = path.join(__dirname, './public')
const distPath = path.join(__dirname, './public/dist/');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
//for the code shared amongst modules
const extractCommons = new webpack.optimize.CommonsChunkPlugin({
names: ['vendor', 'manifest'], //specify the common bundle's name
minChunks: function (module) { //accept only vendor libraries
// this assumes your vendor imports exist in the node_modules directory
return module.context && module.context.indexOf('node_modules') !== -1;
}
});
module.exports = env => {
const isProd = env.prod ? true : false;
return {
cache: false,
entry: [
'babel-polyfill',
'react-hot-loader/patch',
// 'webpack-dev-server/client?http://localhost:3000',
// 'webpack/hot/only-dev-server',
sourcePath + '/entry.js'
],
output: {
filename: '[name].js', //don't use hash in dev
path: publicPath, //where to store the bundled files
publicPath: '/'
},
devtool: 'inline-source-map',
module: {
rules: [
{
test: /(\.js|\.jsx)$/,
loaders: ['react-hot-loader/webpack', 'babel'],
exclude: /node_modules/
},
{
test: /\.html$/,
exclude: /node_modules/,
loader: 'file-loader',
query: {
name: '[name].[ext]'
}
},
{
test: /\.svg/,
use: {
loader: 'svg-url-loader',
options: {}
}
},
{
test: /\.(jpg|png)$/,
loader: 'url-loader',
options: {
limit: 25000,
},
},
{
test: /(\.scss|\.css)$/,
loader: ExtractTextPlugin.extract({fallback: 'style-loader', use: 'css-loader?sourceMap!resolve-url-loader!sass-loader?sourceMap'})
}
]
},
resolve: {
alias: {
components: path.resolve(__dirname, 'src', 'components'),
navigation: path.resolve(__dirname, 'src', 'navigation'),
reducers: path.resolve(__dirname, 'src', 'reducers'),
actions: path.resolve(__dirname, 'src', 'actions'),
routes: path.resolve(__dirname, 'src', 'routes'),
utils: path.resolve(__dirname, 'src', 'utils'),
styles: path.resolve(__dirname, 'src', 'styles'),
images: path.resolve(__dirname, 'public', 'images')
},
extensions: ['.webpack-loader.js', '.web-loader.js', '.loader.js', '.js', '.jsx'],
modules: [
path.resolve(__dirname, 'node_modules'),
sourcePath
]
},
devServer: {
host: 'localhost',
port: 3000,
contentBase: './public/',
historyApiFallback: true,
// respond to 404s with index.html
hot: true,
// enable HMR on the server
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
// enable HMR globally
new webpack.NamedModulesPlugin(),
// prints more readable module names in the browser console on HMR updates
new webpack.NoEmitOnErrorsPlugin(),
// do not emit compiled assets that include errors
extractCommons,
//css files
new ExtractTextPlugin('shared.css'),
new HtmlWebpackPlugin({
template: 'index.template.ejs',
inject: 'body',
})
],
}
}
Here is my .babelrc file:
{
"presets": [
[
"latest", {
"es2015": {
"modules": false
}
}
],
"react",
"stage-2"
],
"plugins": [
"transform-object-rest-spread",
"react-hot-loader/babel-loader"
]
}
and my entry file:
import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, compose } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly';
import { responsiveStoreEnhancer } from 'redux-responsive';
import reduxThunk from 'redux-thunk';
import reducers from './reducers';
import App from 'routes/App';
import injectTapEventPlugin from 'react-tap-event-plugin';
// Needed for onTouchTap
// http://stackoverflow.com/a/34015469/988941
injectTapEventPlugin();
const composeEnhancers = composeWithDevTools({});
const store = createStore(
reducers,
composeEnhancers(
responsiveStoreEnhancer,
applyMiddleware(
reduxThunk
))
);
ReactDOM.render(
<AppContainer>
<Provider store={store} >
<App />
</Provider>
</AppContainer>
, document.getElementById('root')
);
// Hot Module Replacement API
if (module.hot) {
module.hot.accept('routes/App', () => { render(
<AppContainer>
<Provider store={store} >
<App />
</Provider>
</AppContainer>)
})
}
The problem is that the docs online are skimpy because they are re-doing everything. Can anybody help me? I'm so confused now I don't know which way is up.
