bug: Module parse failed: Shorthand property assignments are valid only in destructuring patterns

[DiegoCantu]

Describe the bug This seems a typescript error when you try to use a interface / type in a block.

To Reproduce Steps to reproduce the behavior: 1. import { For, block } from 'million/react' ( "million": "^2.4.8-beta.3") because if I try to use import { block } from "million/react-server"; I receive the next message: Cannot find module 'million/react-server' or its corresponding type declarations.

2. Create a type or interface:

type SidebarProps = {
    title: string;
    bannerImage: string;
    sidebarItems: any[];
    type: "flat" | "children"
    userName?: string;
    userImage?: string;
}

3. Use the type in the component: Component:

const Sidebar: React.FC<SidebarProps> = ({ title, bannerImage, sidebarItems, type = "flat", userName = "", userImage = "" }) => { 
....
};

4. Implement million block:

const BlockComponent = block<SidebarProps>(Sidebar);
export default BlockComponent;

Expected behavior The component should be displayed

Screenshots

Device (please complete the following information):

• Browser chrome, firefox, etc

Additional context Error message: (137:16) File was processed with these loaders:

./node_modules/next/dist/build/webpack/loaders/next-flight-client-module-loader.js ./node_modules/next/dist/build/webpack/loaders/next-swc-loader.js ./node_modules/unplugin/dist/webpack/loaders/transform.js You may need an additional loader to handle the result of these loaders. | bannerImage, | sidebarItems, type="flat", | userName="", | userImage=""

[tobySolutions]

Hey @DiegoCantu! Can you remove the block and send a reproduction so we can check it out?

[DiegoCantu]

https://github.com/aidenybai/million/assets/8170026/336af31f-67c1-48cc-bae9-6a709d52c9a9

[aidenybai]

Hold on, does this work without block? @DiegoCantu? Might be a conflict with react refresh

[tobySolutions]

Hold on, does this work without block? @DiegoCantu? Might be a conflict with react refresh

Hmm, the code looks kinda tricky to me too.

[DiegoCantu]

This works perfectly fine without million block, actually this is existing code that I try to add million , also after million is stable for next.js, I'll try to add millions to 60+ react components, which...also already existing and work correctly, but most of my components have props similar to those shown in the error so I can't continue if at least this error is not solved

[DiegoCantu]

I created this repo to reproduce the issue:

https://github.com/DiegoCantu/million-test https://github.com/DiegoCantu/million-test/blob/master/src/app/components/Sidebar.tsx

[aidenybai]

Seems it be an error for typescript parsing. If you remove block<Type>();

const BlockComponent = block<SidebarProps>(Sidebar);

to:

const BlockComponent = block(Sidebar);

@DiegoCantu

[DiegoCantu]

is the same issue without props in block:

[tobySolutions]

is the same issue without props in block:

Without props? Wait, why? Can you share your code?

[DiegoCantu]

without props to test that:

this is the repo: https://github.com/DiegoCantu/million-test/blob/master/src/app/components/Sidebar.tsx

[aidenybai]

Whoa, now that's weird. Let me get back to you soon

[tobySolutions]

Alright, thanks @aidenybai! We'll get back to you soon for sure @DiegoCantu.

[aidenybai]

@DiegoCantu can you test with the latest release?

[DiegoCantu]

Now this is the new issue, and obviously Sidebar is defined:

error src\app\components\Sidebar.tsx (57:23) @ _Sidebar

• error ReferenceError: _Sidebar is not defined at eval (./src/app/components/Sidebar.tsx:190:24) at (sc_client)/./src/app/components/Sidebar.tsx (C:\Users\diego\Desktop\RWB\Million\million-test.next\server\app\page.js:1800:1) at webpack_require (C:\Users\diego\Desktop\RWB\Million\million-test.next\server\webpack-runtime.js:33:42)

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs within the next 7 days.