Can't export reducer with Babel

Question

This is most likely some typo but I've been trying to fix it for the last hour and came up with nothing.

I have a file called app/reducers/index.js:

export viewportSize from "./viewportSize";

app/reducers/viewportSize.js is simply:

export default function viewportSize (state = {}) {
  return state;
}

And in app/app.js I do:

import reducers from "./reducers";

Babel is giving me back this error

ERROR in ./app/reducers/index.js
1:8  error  Parsing error: Unexpected token viewportSize

I have other import and export in the project but this one doesn't want to work.

This is my .babelrc file:

{
  "presets": ["es2015", "react", "stage-2"]
}

Update

These are my dependencies

  "devDependencies": {
    "babel-core": "6.5.2",
    "babel-loader": "6.2.3",
    "babel-preset-es2015": "6.5.0",
    "babel-preset-react": "6.5.0",
    "babel-preset-stage-2": "6.5.0",
    "eslint": "2.2.0",
    "eslint-loader": "1.3.0",
    "eslint-plugin-react": "4.1.0",
    "file-loader": "0.8.5",
    "react-hot-loader": "1.3.0",
    "webpack": "1.12.14",
    "webpack-dev-server": "1.14.1"
  },
  "dependencies": {
    "babel-preset-stage-0": "6.5.0",
    "immutable": "3.7.6",
    "react": "0.14.7",
    "react-dom": "0.14.7",
    "react-redux": "4.4.0",
    "react-router": "2.0.0",
    "react-router-redux": "4.0.0",
    "redux": "3.3.1"
  }

Update

This is my webpack config file

var webpack = require("webpack");

module.exports = {
  context: __dirname + "/app",
  entry: {
    javascript: "./app.js",
    html: "./index.html",
    css: "./style.css",
  },

  output: {
    filename: "app.js",
    path: __dirname + "/dist",
  },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
  ],

  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        include: __dirname,
        loaders: ["react-hot", "babel-loader", "eslint-loader"],
      },
      {
        test: /\.html$/,
        loader: "file?name=[name].[ext]",
      },
      {
        test: /\.css$/,
        loader: "file?name=[name].[ext]",
      },
    ],
  },
};

Johnathanjohnathon

What is your babel version? – Fawn

6.5.2 I've update my question with all the dependencies I'm using – Johnathanjohnathon

You're using webpack? Please post webpack config. – Fawn

I noticed that if I do export { viewportSize } from "./viewportSize"; it does not complain – Johnathanjohnathon

I've just run this test: gist.github.com/srounce/cb12a1af6c3b8dd848da Everything works as expected. I'm thinkin it's a webpack issue. – Fawn

Also, if you use destructuring assignment export { viewportSize } from "./viewportSize";, it will not receive the named function viewportSize you have passed as the default export from viewportSize.js, as it will be trying to pull the named export viewportSize. – Fawn

If I do export { default as viewportSize } from "./viewportSize"; it works. I'll keep it like that for the moment and try to fix later. – Johnathanjohnathon

It seems like you want import * as reducers from './reducers'; because you're not using a default. But there's no point in reducers/index.js anyway. You'll need to create a rootReducer that composes the other reducers together. – Protege

@naomik I refactored my code to create a rootReducer this way it's more elegant. Still it's strange that my approach didn't work – Johnathanjohnathon