[SOLVED] Webpack not compiling code

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?

try including a test for the first rule. maybe a test: /\.jsx?$/

Made no difference :confused:

and babel presets are set?

What’s that? What you see is what I have.

aha! ok, create a file called .babelrc with:

{
  presets: ['es2015','react']
}

and try again.

This is what I did…

Anyone around who knows webpack?

I can’t exactly tell what you are doing wrong in this instance, but i highly recommend using Creat-React-App in the future so you don’t have to worry about any of this webpack BS.

And what is Create-React-App?

I agree with create-react-app. use it with npm install in your local dev environment. you can basically just install it and you have a fully configured sample app running with hot reloading and a working index page.

npm install -g create-react-app 
create-react-app my-app

cd into directory

npm start

ONce you have your app working you have the option of breaking it out and configuring webpack yourself, but for these projects you don’t need to, at least I havn’t yet.

I built all of my small react projects with create react app so far, using Andrew Farmers “Your first react app” tutorial.

https://adventurebear.github.io/recipe-box/

https://adventurebear.github.io/game-of-life/

https://adventurebear.github.io/react-race-search/

https://adventurebear.github.io/swim-calculator/

(These apps still have some logic flaws but are all functional for hte most part, and you can check my git hub repos if you want to actually look at the webpack files.

1 Like

I was missing some options in webpack (note, I switched back to webpack v1.15.0)

 module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015','stage-1']       
                }
      }
      ,{ test: /\.css$/, loader: 'style-loader!css-loader'}
1 Like