Error on exporting React Components in index.js file

Question

At one point I was able to create an index.js file in all my directories (components, stores, etc) that exported all my components similar to this, for easy access:

export ComponentA from './ComponentA/ComponentA';
export ComponentB from './ComponentB/ComponentB';
export ComponentC from './ComponentC/ComponentC';

Then I would import only those classes that I needed from another file like this

import { ComponentA, ComponentC } from './components';

For some reason, now I am getting an error now, and not sure why

ERROR in ./app/containers/index.js
Module build failed: SyntaxError: /Users/abritez/Documents/Projects/React-LTI-Toolprovider/app/containers/index.js: Unexpected token (1:7)
> 1 | export Widgets from './Widgets/Widgets';
    |        ^
  2 | 
    at Parser.pp.raise (/Users/abritez/Documents/Projects/React-LTI-Toolprovider/node_modules/babel-loader/node_modules/babel-core/node_modules/babylon/lib/parser/location.js:24:13)
    at Parser.pp.unexpected (/Users/abritez/Documents/Projects/React-LTI-Toolprovider/node_modules/babel-loader/node_modules/babel-core/node_modules/babylon/lib/parser/util.js:82:8)
    at Parser.pp.expect (/Users/abritez/Documents/Projects/React-LTI-Toolprovider/node_modules/babel-loader/node_modules/babel-core/node_modules/babylon/lib/parser/util.js:76:33)
    at Parser.pp.parseExportSpecifiers (/Users/abritez/Documents/Projects/React-LTI-Toolprovider/node_modules/babel-loader/node_modules/babel-core/node_modules/babylon/lib/parser/statement.js:766:8)
    at Parser.pp.parseExport (/Users/abritez/Documents/Projects/React-LTI-Toolprovider/node_modules/babel-loader/node_modules/babel-core/node_modules/babylon/lib/parser/statement.js:701:28)
    at Parser.parseExport (/Users/abritez/Documents/Projects/React-LTI-Toolprovider/node_modules/babel-loader/node_modules/babel-core/node_modules/babylon/lib/plugins/flow.js:679:20)
    at Parser.pp.parseStatement (/Users/abritez/Documents/Projects/React-LTI-Toolprovider/node_modules/babel-loader/node_modules/babel-core/node_modules/babylon/lib/parser/statement.js:115:90)
    at Parser.parseStatement (/Users/abritez/Documents/Projects/React-LTI-Toolprovider/node_modules/babel-loader/node_modules/babel-core/node_modules/babylon/lib/plugins/flow.js:621:22)
    at Parser.pp.parseTopLevel (/Users/abritez/Documents/Projects/React-LTI-Toolprovider/node_modules/babel-loader/node_modules/babel-core/node_modules/babylon/lib/parser/statement.js:30:21)
    at Parser.parse (/Users/abritez/Documents/Projects/React-LTI-Toolprovider/node_modules/babel-loader/node_modules/babel-core/node_modules/babylon/lib/parser/index.js:70:17)
    at Object.parse (/Users/abritez/Documents/Projects/React-LTI-Toolprovider/node_modules/babel-loader/node_modules/babel-core/node_modules/babylon/lib/index.js:45:50)
    at Object.exports.default (/Users/abritez/Documents/Projects/React-LTI-Toolprovider/node_modules/babel-loader/node_modules/babel-core/lib/helpers/parse.js:36:18)
    at File.parse (/Users/abritez/Documents/Projects/React-LTI-Toolprovider/node_modules/babel-loader/node_modules/babel-core/lib/transformation/file/index.js:574:40)
    at File.parseCode (/Users/abritez/Documents/Projects/React-LTI-Toolprovider/node_modules/babel-loader/node_modules/babel-core/lib/transformation/file/index.js:691:20)
    at /Users/abritez/Documents/Projects/React-LTI-Toolprovider/node_modules/babel-loader/node_modules/babel-core/lib/transformation/pipeline.js:167:12
    at File.wrap (/Users/abritez/Documents/Projects/React-LTI-Toolprovider/node_modules/babel-loader/node_modules/babel-core/lib/transformation/file/index.js:639:16)
 @ ./app/routes.js 27:18-41

I am seeing the same thing... `Unexpected token` on `export`, but not on `import`... — Stijn de Witt, Dec 21 '15 at 17:58
I'm having the same issue http://stackoverflow.com/questions/35624221/cant-export-reducer-with-babel did you find a solution? — Gio Polvara, Feb 25 '16 at 10:39

score 6 · Answer 1 · answered Oct 29 '17 at 11:25

When creating an index file to make importing components easier you should export your files using this syntax:

index file:

export { default as ComponentA } from "./ComponentA";

ComponentA file has one export

export default ComponentA;

if you have a file MultiComponents with multiple exports, for example:

export { ComponentB, ComponentC };

in your index file you should use this syntax:

export { ComponentB, ComponentC } from "./MultiComponents";

score 3 · Answer 2 · answered Nov 29 '15 at 04:14

3

Might have to do with it not being a default export, or the way your code is being transpiled?

If only exporting the single Widgets, try:

import Widgets from './Widgets/Widgets';
export default Widgets;

answered Nov 29 '15 at 04:14

enjoylife

3,801
1
24
33

1

Yup, I had the same issue and this solved my problem. – Vlady Veselinov May 16 '16 at 22:02

Error on exporting React Components in index.js file

2 Answers2