question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Unable to import AntD widgets in new version [Typescript]

See original GitHub issue

Describe the bug I upgraded to 2.0.1 because of #187, and looked at TS example. When importing AntdConfig / Widgets i get a module not found error

Module not found: Can't resolve 'react-awesome-query-builder/components/widgets/antd' in '....\Web\wwwroot\src\queryBuilder\config'

If i change the imports to prefix /modules/ (before /components/) i get an unexpected token error

SyntaxError: ...\Web\wwwroot\node_modules\react-awesome-query-builder\modules\components\widgets\antd\index.js: Unexpected token (30:48)

  28 | 
  29 | import { ConfigProvider } from 'antd';
> 30 | export const Provider = ({config, children}) => <ConfigProvider locale={config.settings.locale.antd}>{children}</ConfigProvider>;
     |                                                 ^

To Reproduce

  • Update to ^2.0.1
  • Add
import AntdConfig from 'react-awesome-query-builder/config/antd';
import * as AntdWidgets from 'react-awesome-query-builder/components/widgets/antd';
  • Run yarn start

Expected behavior Being able to resolve the modules. Screenshots

image

Additional context Add any other context about the problem here.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:11
  • Comments:10 (2 by maintainers)

github_iconTop GitHub Comments

5reactions
TheLastSultancommented, Apr 23, 2020

Bumping this issue. This version is essentially broken without this fix ! Majority of users are not using BasicConfig

3reactions
bhupesh-sfcommented, Apr 21, 2020

Facing similar issue. I figured out modules thing but its giving syntax error now

./node_modules/react-awesome-query-builder/modules/config/antd.js SyntaxError: /opt/lampp/htdocs/bayview-ui/node_modules/react-awesome-query-builder/modules/config/antd.js: Unexpected token (38:26)

36 | …BasicConfig.settings, 37 | 38 | renderField: (props) => <FieldSelect {…props} />, | ^ 39 | // renderField: (props) => <FieldDropdown {…props} />, 40 | // renderField: (props) => <FieldCascader {…props} />, 41 | // renderField: (props) => <FieldTreeSelect {…props} />,

Read more comments on GitHub >

github_iconTop Results From Across the Web

Use in TypeScript
Let's create a TypeScript project by using create-react-app , then import antd step by step. We build antd based on latest stable version...
Read more >
Could not find a declaration file for module 'module-name'. ...
json I wrote "main": "dist/index.js" . In Node.js everything works fine, but TypeScript: import {Injector} from ...
Read more >
Create-React-App with TypeScript, ESLint, Prettier, and Github ...
This command will work for Yarn or NPM. npx install-peerdeps --dev eslint-config-airbnb. Update on the above command: See comment here on the latest...
Read more >
antd
Latest version : 5.1.1, last published: 4 days ago. ... antd. TypeScript icon, indicating that this package has built-in type declarations.
Read more >
How to implement ANT Design with React - wesionaryTEAM
So, now let's create a new react project named react-ant with typescript. ... Also import antd css to the index file, index.tsx. //src/index.tsximport...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found