Menu
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
270
js # Use named exports to export multiple components in React, e.g. export function A() {} and export function B() {} . The exported components can be imported by using a named import as import {A, B} from './another-file' .
Use named exports to export a component in React, e.g. export function Button() {} . The exported component can be imported by using a named import as import {Button} from './another-file. js' . You can use as many named exports as necessary in a file.
The React. js "Attempted import error 'X' is not exported from" occurs when we try to import a named import that is not present in the specified file. To solve the error, make sure the module has a named export and you aren't mixing up named and default exports and imports.
For passing the data from the child component to the parent component, we have to create a callback function in the parent component and then pass the callback function to the child component as a prop. This callback function will retrieve the data from the child component.
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";
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;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
