React - 无法从 index.js 导出多个文件

Question

I am creating a styled-components with Atomic Design and I want to separate styled files into one folder and have one index.js to export all files. I have found that can be done like this way: Splitting Styled-Components into multiple files but export them as one file but In my case when I want to export file inside index.js

export StyledClosestMeet from 'styledComponents/StyledClosestMeet.js';

I have error

Declaration or statement expected.ts(1128)

Inside styledComponents folder I have second file:

import styled from 'styled-components';
import variables from 'settings/variables';

const StyledClosestMeet = styled.div`
  color: ${variables.colorMain};
  font-size: 2rem;
  font-weight: bold;
  text-transform: uppercase;
`;

And later I want to import that file inside Atom file:

import React from 'react';
import {StyledClosestMeet} from 'styledComponents/StyledClosestMeet';

const ClosestMeet = () => {
  return <StyledClosestMeet>Najbliższe spotkanie</StyledClosestMeet>;
};

export default ClosestMeet;

I am using jsconfig "baseUrl": "./src"

Answer 1

You can create an index.js file to export both files like this:

export { default as Styled1 } from "./styled1";
export { default as Styled2 } from "./styled2";

and then import them like this:

import { Styled1, Styled2 } from "./styled/index";

Check out this example

Answer 2

You've to export StyledClosestMeet

import styled from 'styled-components';
import variables from 'settings/variables';

const StyledClosestMeet = styled.div`
  color: ${variables.colorMain};
  font-size: 2rem;
  font-weight: bold;
  text-transform: uppercase;
`;

export { StyledClosestMeet }

And you can export StyledClosestMeet like below.

export { StyledClosestMeet } from 'styledComponents/StyledClosestMeet.js';