0

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]",
      },
    ],
  },
};
Gio Polvara
  • 23,416
  • 10
  • 66
  • 62
  • What is your babel version? – rounce Feb 25 '16 at 10:24
  • `6.5.2` I've update my question with all the dependencies I'm using – Gio Polvara Feb 25 '16 at 10:25
  • You're using webpack? Please post webpack config. – rounce Feb 25 '16 at 10:27
  • I noticed that if I do `export { viewportSize } from "./viewportSize";` it does not complain – Gio Polvara Feb 25 '16 at 10:28
  • 1
    I've just run this test: https://gist.github.com/srounce/cb12a1af6c3b8dd848da Everything works as expected. I'm thinkin it's a webpack issue. – rounce Feb 25 '16 at 10:33
  • 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`. – rounce Feb 25 '16 at 10:40
  • 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. – Gio Polvara Feb 25 '16 at 10:46
  • 1
    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. – Mulan Feb 25 '16 at 16:53
  • @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 – Gio Polvara Feb 25 '16 at 17:53

0 Answers0