react js unexpected token export on export{default as Cards}

Question

on my freshly installed app i try to import my components like this:

import {Cards , Chart , CountryPicker} from  '../components'

and i made an index.js directory:

export  {default as Cards} from './Cards/Cards'
export  {default as Chart} from './Chart/Chart'
export  {default as CountryPicker} from './CountryPicker/CountryPicker'

but it return error:Uncaught SyntaxError: Unexpected token 'export'.

i am doing this trying to copy a tutorial and it looks like it works for the tutor but not me!

Answer 1

I think you should first define the components individually and each component should be exported at the bottom of the definition page like so...

import React from "react"

const Cards = () => {
//Helper functions here
return (
//Jsx here
  )
}

export default Cards

And then you can now import this component in your App.js component based on the relative path like so...

import Cards from "./components/Cards/Cards";

This is assuming Cards is 2 folders deep from your home directory.

Answer 2

This is the basic format for Reactjs .

for more you can Basic example here

//Card

import React from 'react';

const Card = (props) => {
  return (
       // JSX code
  )
}

export default Card;

//Chart
import React from 'react';

const Chart = (props) => {
  return (
       // JSX code
  )
}

export default Chart;

//CountryPicker
import React from 'react';

const CountryPicker = (props) => {
  return (
       // JSX code
  )
}

export default CountryPicker;

//index.JSX

import {Card} from './component/Card';
import {Chart} from './component/Chart';
import {CountryPicker} from './component/CountryPicker';

Answer 3

the problem was that i have not put my component folder inside the src folder. hence webpack did nothing about it and it was interpreted as a raw js file which resulted in the error. moving it to the src folder did the trick!