We Keep Coding

Syntax error with multiple exports including a renamed HOC

I want to have multiple exports from the same file, one of them being a higher order component that is renamed as default, but I'm receiving a syntax error.
//Shape.js
import React, { createContext, memo } from "react";
const ResizeAPI = createContext();
const Shape = (props) => {
/* ... */
}
export {
memo(Shape) as default, // <-- Syntax/Parsing Error: Unexpected token, expected ","
ResizeAPI
};
If I don't wrap the Shape component there is no syntax error:
export {
Shape as default, // <-- This is fine
ResizeAPI
};
Also, if I export only the main component, even if it's wrapped, there is no syntax error:
export default memo(List); // <-- This is fine
How can I export a renamed HOC within a list of exports?

The problem is that you export an object without a valid key, but you also can't have a key with as default syntax, try something like:
// preferable
export default memo(Shape);
export { ResizeAPI };
// or
const MemoShape = memo(Shape);
export { MemoShape as default, ResizeAPI };

How to create static function outside a component in Next.js?

While I was reading article Persistent Layout Patterns in Next.js, there is a part that I can't get my head around.
// /pages/account-settings/basic-information.js
import SiteLayout from '../../components/SiteLayout'
import AccountSettingsLayout from '../../components/AccountSettingsLayout'
const AccountSettingsBasicInformation = () => <div>{/* ... */}</div>
AccountSettingsBasicInformation.getLayout = page => (
<SiteLayout>
<AccountSettingsLayout>{page}</AccountSettingsLayout>
</SiteLayout>
)
export default AccountSettingsBasicInformation
At Option 4, static function getLayout is added to AccountSettingsBasicInformation.
However AccountSettingsBasicInformation is a component not an object.
Is it possible to add static function in a component like this way?
Also I created Test component to test it but I got the typescript error saying
Property 'hello' does not exist on type 'FC'.
interface ITestProps {
hello: () => void;
}
const Test: React.FC<ITestProps> = () => {
return <TestFilter />;
};
Test.hello = () => { <div> this is a test </div> } // Test.hello occurs the error
export default Test;
I declared hello type at ITestProps but why I got the error?

anything other than basic types is object, including es6 classes and function.
but typescript has the ability to enforce what properties an object has,
so you can say AccountSettingsBasicInformation.getLayout because AccountSettingsBasicInformation has no type declaration, typescript considers it as any(which includes basic types and object with any properties)
but you declared Test as React.FC<ITestProps> so typescript enforces its properties to be same as React.FC<ITestProps>, so it prints out an error

get synatx error from writing javascript destructure with export function

I have a index.ts file for export libary, but I got error message like below, what's wrong overhere?, I thought it should work.
// components
import List from './components/List'
import Item from './components/Item'
// containers
import ListStackConatiner from './containers/ListStackConatiner'
const components = {
List,
Item
}
const containers = {
ListStackConatiner
}
export {
...components,
...containers
}
SyntaxError: /somepath/src/index.ts: Unexpected token (17:2)(line in ...components)

You can't do destructuring inside a named export natively - this answer explains why. Instead, you can use Object.assign:
export default Object.assign({}, components, containers);
You could also destructure into another variable, then just export that:
var exportObj = {
...components,
...containers
};
export default {exportObj};

Use
export = {
...components,
...containers
}
instead.

Es6 Destructuring

I have a file that is similar to this:
const COLORS = {
PRIMARY_COLOR: 'red',
SECONDARY_COLOR: 'green'
};
const APP = {
APP_COLOR: GRAY_DARK,
APP_FONT_SIZE: FONT_SIZE_NORMAL,
APP_FONT_WEIGHT: FONT_WEIGHT_NORMAL,
APP_SEPARATOR_COLOR: GRAY_LIGHT
};
export default {
...COLORS,
...APP
};
The issue is when I'm trying to destructure that object from another file, I get undefined values?
import theme, { PRIMARY_COLOR } from '../../../themes/default';
printing the theme object works fine
but printing PRIMARY_COLOR gets undefined
Any help?

The {} syntax in imports is for "named" imports and is not destructuring.
Just do this:
import theme from '../../../themes/default';
const { PRIMARY_COLOR } = theme;

To understand the difference, you first need to know the way they are exported.
In case of React, the export goes something like this
const Component = ...
...
...
export Component;
This becomes available under React.Component and you can import it like import { Component } from 'react';
The way these look under the microscope is:
default.Component
...
While everything else is just under the default object.
If you do a quick console.log of theme, you'll understand what I mean.
I hope this makes sense.
Let's go a little in depth.
Suppose you have the following bit of code:
const a = {
test: 'hello',
};
const b = {
foo: 'bar',
}
export default a;
Now, let's import that
import * as theme from './test.js'
When we do a console.log( theme ) we get
{ default: { test: 'hello' } }
What does this show? It means that the export object of a file contains a default property which is automatically loaded into memory when we do something like import theme from 'test'. However, if you have more than one export, the compiler gives you the option to pick and choose, but at the same time, provides you with a default object just for fall back.
In your case, you have exported everything under the default. When you do import theme from './theme' all works fine. However, when you do { PRIMARY_COLOR }... it tries to find something which was exported like
export PRIMARY_COLOR...
I hope this makes it clear! :)

export default arrow function cannot be imported

I'm using React, and I have something like this in my code:
renderDetails.js:
export default renderDetails = (details) => {
// function logic removed for brevity
}
Then, in the same folder, I have another source file from where I want to import it, and I do something like this:
businessDetails.js:
import renderDetails from './renderDetails';
// rest removed for brevity
But, I get an error message pointing to my renderDetails.js file and says: "rederDetails is not defined". Any ideas what the problem might be and how to fix it?

The problem is that even though you are exporting the component as default you are giving it a name which is not defined
You can either do
export default (details) => {
}
or
const renderDetails = (details) => {
}
export default renderDetails;
One more thing, when you are trying to render components, make sure that their name starts with a Uppercase character.

try that way.
functions.jsx
export function renderDetails(details) => {
// function logic removed for brevity
}
then import like,
import { renderDetails } from './functions';
P.S.
./ is for if both files a re in same namespace/folder.

You can also write them like this:
export const exampleFunctionOne = () => {}
export const exampleFunctionTwo = () => {}
Then import the individual functions you require from said file like this:
import { exampleFunctionOne, exampleFunctionTwo } from './exampleFile';
I like this approach when wanting to combine similar functions into one file such as validators or filters making them easy to import and use across your application.