Can't import the named export 'ScrollMenu'

[ShumiGupta]

Hi! 👋

Firstly, thanks for great library! 🙂

We are importing react-horizontal-scrolling-menu in our React App. While using v4.0.3 I see below error where as everything seems to work fine with v4.0.1

React version: 18.2.0

Import Code: import { ScrollMenu } from "react-horizontal-scrolling-menu";

Error: Can't import the named export 'ScrollMenu' (imported as 'ScrollMenu') from default-exporting module (only default export is available)

[asmyshlyaev177]

Hi, can you please post more info about your environment, e.g. CRA/NextJS|webpack and version.

Also post output of

import * as Menu from "react-horizontal-scrolling-menu"
console.log(Menu)

If you using CRA it will be a good idea to use craco for customize config and add rule for mjs files motiondivision/motion#1307 (comment)
CRA issue, problems with many libraries facebook/create-react-app#10356

Or you can use 4.0.1 for now (e.g. yarn add react-horizontal-scrolling-menu@4.0.1), anyway there is no new features in 4.0.3, i need some time to figure out this import/export puzzle.

Also can try import like

import * as Menu from "react-horizontal-scrolling-menu";
...
<Menu.ScollMenu />
// or 
const { ScollMenu } = Menu

[barry-genies]

I also meet the same issue even if my react-horizontal-scrolling-menu is 4.0.1. but import VisibilityContext works. I just update many dependencies under my project so I guess it's because of one of them...
some of dependency version in my project:

"typescript": "^4.9.3",
"react-scripts": "^5.0.1",
"eslint": "^8.15.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"webpack": "5.79.0"

can be solved through:

import { VisibilityContext } from "react-horizontal-scrolling-menu";
import Menu from "react-horizontal-scrolling-menu";

<Menu.ScrollMenu onWheel={onWheel}>
    {children}
</Menu.ScrollMenu>

but if I try this:import * as Menu from "react-horizontal-scrolling-menu";, console will show error: Can't import the named export 'ScrollMenu' (imported as 'Menu') from default-exporting module (only default export is available)

the print result of Menu is:
/static/media/index.e9788367c27c37b8cbd5.cjs

[nickkim1090]

I'm having a weird issue where my scroll isn't being implemented - I've bypassed the bug of the can't import the named export...but my scroll is just not working horizontally for some reason?

I've tried importing the CSS you recommended, but when I do that it cuts off and only shows a portion of the day that I want to see and isn't scrollable

[asmyshlyaev177]

I'm having a weird issue where my scroll isn't being implemented - I've bypassed the bug of the can't import the named export...but my scroll is just not working horizontally for some reason?

I've tried importing the CSS you recommended, but when I do that it cuts off and only shows a portion of the day that I want to see and isn't scrollable

Let's keep it 1 issue 1 problem, and better to have examples to reproduce bugs.

[percy507]

Same problem. I am using vite@2.9.5.

# error log
Uncaught SyntaxError: The requested module '/node_modules/.pnpm/react-horizontal-scrolling-menu@4.0.3_react@18.2.0/node_modules/react-horizontal-scrolling-menu/dist/index.cjs?import' does not provide an export named 'ScrollMenu' 

Switch to v4.0.1, works fine.

[asmyshlyaev177]

Released 4.0.4 , check if it works properly.

[barry-genies]

Released 4.0.4 , check if it works properly.

upgrading to 4.0.4 works for me:) thx for quick fixing