I don’t have much of a clue here:
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import { Router, Route, IndexRoute, browserHistory } from 'react-router';
import reduxThunk from 'redux-thunk';
import '../style/style.scss'
import App from './components/app';
import Signin from './components/auth/signin';
import Signout from './components/auth/signout';
import Signup from './components/auth/signup';
import Feature from './components/feature';
import RequireAuth from './components/auth/require_auth';
import Welcome from './components/welcome';
import reducers from './reducers';
import { AUTH_USER } from './actions/types';
const createStoreWithMiddleware = applyMiddleware(reduxThunk)(createStore);
const store = createStoreWithMiddleware(reducers);
const token = localStorage.getItem('token');
// If we have a token, consider the user to be signed in
if (token) {
// we need to update application state
store.dispatch({ type: AUTH_USER });
}
ReactDOM.render(<Provider store={store}>
<Router history={browserHistory}>
<Route path="/" component={App}>
<IndexRoute component={Welcome} />
<Route path="signin" component={Signin} />
<Route path="signout" component={Signout} />
<Route path="signup" component={Signup} />
<Route path="feature" component={RequireAuth(Feature)} />
</Route>
</Router>
</Provider>
, document.querySelector('.container'));
The error given is the rather vague…
Asset Size Chunks Chunk Names
bundle.js 3.77 kB 0 [emitted] main
chunk {0} bundle.js (main) 1.05 kB [entry] [rendered]
[0] ./src/index.js 1.02 kB {0} [built] [failed] [1 error]
[1] multi ./src/index.js 28 bytes {0} [built]
ERROR in ./src/index.js
Module build failed: SyntaxError: Unexpected token (29:16)
27 | }
28 |
> 29 | ReactDOM.render(<Provider store={store}>
| ^
30 | <Router history={browserHistory}>
31 | <Route path="/" component={App}>
32 | <IndexRoute component={Welcome} />
@ multi ./src/index.js
webpack: Failed to compile.
I tried upgrading webpack so this is the resulting config file:
module.exports = {
entry: [
'./src/index.js'
],
output: {
path: __dirname,
publicPath: '/',
filename: 'bundle.js'
},
module: {
rules: [
{
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.scss$/, // regex to select only .css files
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
modules: true
}
},
{
loader:"sass-loader"
}
] // loader: 'style-loader!css-loader!sass-loader'
}
] // the sass-loader converts the sass into css, the css-loader puts that css into the JS, the style-loader puts the javascript into the DOM.
},
resolve: {
extensions: [ '.js', '.jsx', '.css'],
modules: [
"node_modules"
]
},
devServer: {
historyApiFallback: true,
contentBase: './'
}
};
so there is probably a mistake here somewhere.
Maybe someone has an example webpack config file I could compare?