Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BUG] Named export 'SyncOutlined' not found. #5931

Closed
bombillazo opened this issue May 8, 2024 · 19 comments · Fixed by #6369
Closed

[BUG] Named export 'SyncOutlined' not found. #5931

bombillazo opened this issue May 8, 2024 · 19 comments · Fixed by #6369
Labels
bug Something isn't working

Comments

@bombillazo
Copy link
Contributor

bombillazo commented May 8, 2024

Describe the bug

When building our app, we get this error:

Named export 'SyncOutlined' not found. The requested module '@ant-design/icons' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@ant-design/icons';

Steps To Reproduce

Install the latest refine packages and run the app.

Expected behavior

No error is given when building

Packages

"@refinedev/antd": "5.38.1"

Additional Context

No response

@bombillazo bombillazo added the bug Something isn't working label May 8, 2024
@aliemir
Copy link
Member

aliemir commented May 8, 2024

Hey @bombillazo, sorry for the issue 🙏 We had this release yesterday and it caused some errors with the type declarations in our packages. A new release is just on its way which addressess the type declaration issues. I'll ping here when the release is done and let's see if it fixes the issue you're having as well 🤔

@bombillazo
Copy link
Contributor Author

Ok thanks, looking much forward to it.

@aliemir
Copy link
Member

aliemir commented May 8, 2024

Now a patch is released for all packages. For @refinedev/antd the version is 5.38.1. Can you check if this fixes the issue? 🙏

@bombillazo
Copy link
Contributor Author

on it

@bombillazo
Copy link
Contributor Author

Hey, I still get the error...

SyntaxError: Named export 'SyncOutlined' not found. The requested module '@ant-design/icons' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@ant-design/icons';
const {value:o,configurable:!0});import et from"react";import{Form: ot}from"antd";import{useForm: rt}from"sunflower-antd";import{flattenObjectKeys: tt,propertyPathToArray: Xo}from"@refinedev/core";import{useForm: st,useWarnAboutChange: nt,pickNotDeprecated: Jo,useTranslate: at,useRefineContext: it}from"@refinedev/core";

@aliemir
Copy link
Member

aliemir commented May 8, 2024

@bombillazo, I've found an issue related to this in @ant-design/icons repo. Please check ant-design/ant-design-icons#605. Can you try downgrading @ant-design/icons to 5.1.4? If it's not installed can you try installing it with the specified version?

Please let us know if this resolves the issue 🙏

@bombillazo
Copy link
Contributor Author

I tried it but it doesnt fix the issue, currently, I've reverted to using "@refinedev/antd": "5.37.6" and it works

@aliemir
Copy link
Member

aliemir commented May 8, 2024

Can you also check for @ant-design/[email protected]? @refinedev/[email protected] had this version pinned down and the latest version removed that version lock 🤔

@bombillazo
Copy link
Contributor Author

bombillazo commented May 8, 2024

I fixed the version to ant-design/[email protected] but I still get the error when using @refinedev/[email protected]

@bombillazo
Copy link
Contributor Author

I see 5.38.1 still not locking antd 5.0.1 in the package.lock

  "node_modules/@refinedev/antd": {
      "version": "5.38.1",
      "resolved": "https://registry.npmjs.org/@refinedev/antd/-/antd-5.38.1.tgz",
      "integrity": "sha512-CFonTqYHV6wTEq3ofoFQ0XODW1DMcpuCP9ApPjPYQZ8ORY0pcudPf22L3RTeeyHodabdsSJ+C3bqeVLyg9+4Zw==",
      "dependencies": {
        "@ant-design/icons": "^5.0.1",
        "@ant-design/pro-layout": "7.17.12",
        "@refinedev/ui-types": "^1.22.7",
        "@tanstack/react-query": "^4.10.1",
        "antd": "5.16.5",
        "dayjs": "^1.10.7",
        "react-markdown": "^6.0.1",
        "remark-gfm": "^1.0.0",
        "sunflower-antd": "1.0.0-beta.3",
        "tslib": "^2.6.2"
      },

@bombillazo
Copy link
Contributor Author

I manually locked it to 5.0.1 in the package.lock file and reinstalled deps, ran it with 5.38.1 but the error persists.

@bombillazo
Copy link
Contributor Author

The current combination that works for me is this:

 "@ant-design/icons": "^5.3.7",
 "@refinedev/antd": "5.37.6",

@aliemir
Copy link
Member

aliemir commented May 8, 2024

Thank you for your help investigating the issue @bombillazo. I think we might need to re-apply the version pinning here for the @ant-design/icons. Do you want to open up the PR for this? While the PR might take some to be released, you may also check for options like package.json#overrides (or #resolutions for yarn) to pin down the version of @ant-design/icons in @refinedev/antd but I'm not sure if this is going to work 😅

You may try

{
  "overrides": {
    "@refinedev/antd": {
      "@ant-design/icons": "5.0.1"
    }
  }
}

@bombillazo
Copy link
Contributor Author

I tried that but it messes up my stylings for some reason. Ill keep using "@refinedev/antd": "5.37.6" for now.

@bombillazo
Copy link
Contributor Author

I would love to help with the PR but I'm not sure where the change is required in the repo, Im not familiar with the refine repo.

@aliemir
Copy link
Member

aliemir commented May 8, 2024

Check out this PR #5908, it looks like there are a lot of changes but most of them are from /examples using @ant-design/icons. We need to apply the same version pin to them as well but related changes in packages are at /packages/antd, /packages/inferencer and /packages/live-previews. You can check our Contributing guide to get start 🚀

@aliemir
Copy link
Member

aliemir commented Jun 11, 2024

Hey @bombillazo, can you confirm that this issue is resolved with the latest releases? 🙏

@aliemir
Copy link
Member

aliemir commented Jun 14, 2024

Closing this as completed with #5934

@aliemir aliemir closed this as completed Jun 14, 2024
@bombillazo
Copy link
Contributor Author

Hey, seems like its not giving any more issues, confirmed it today. Thanks!

BatuhanW pushed a commit that referenced this issue Nov 7, 2024
- chore(chakra-ui): fix broken tsdoc links #6429 
- feat: export useInvalidateAuthStore hook #6405 Resolves #6341  
- feat(core): add `<MetaContext />` #6435 
- chore(antd): update @ant-design/icons and @ant-design/pro-layout dependencies #6369 Resolves #6363, #5931 
- feat(core,antd,mui,mantine,chakra-ui): add new prop to auth-page to p… #6432  Resolves #6431 
- fix(core): link component overrides to instead of go #6462 Resolves #6461 
- fix(react-hook-form): onChange handler autoSave check in useForm #6459 Resolves #6458 
- fix(core): link component ref type is too restrictive (#6464) Resolves #6463
BatuhanW added a commit that referenced this issue Nov 7, 2024
- chore(chakra-ui): fix broken tsdoc links #6429 
- feat: export useInvalidateAuthStore hook #6405 Resolves #6341  
- feat(core): add `<MetaContext />` #6435 
- chore(antd): update @ant-design/icons and @ant-design/pro-layout dependencies #6369 Resolves #6363, #5931 
- feat(core,antd,mui,mantine,chakra-ui): add new prop to auth-page to p… #6432  Resolves #6431 
- fix(core): link component overrides to instead of go #6462 Resolves #6461 
- fix(react-hook-form): onChange handler autoSave check in useForm #6459 Resolves #6458 
- fix(core): link component ref type is too restrictive (#6464) Resolves #6463
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants