How to import Beta components in Polaris?

crossify
Shopify Partner
4 0 3

I have not been able to access the new Text component offered by the Shopify Polaris library. I am getting the following import error:

 

The requested module '/node_modules/.vite/deps/@shopify_polaris.js?v=e5492b37' does not provide an export named 'Text'

 

Any ideas on how to resolve this? The other text components are all deprecated and I'm using the latest version of Polaris.

Replies 4 (4)

EcomGraduates
Shopify Partner
588 48 79

Hello there  

 

Polaris is a design system and React component library provided by Shopify. To import beta components in Polaris, you can follow these steps:

  1. Install the latest version of the @Shopify/polaris package, which includes beta components:

 

npm install @Shopify/polaris

 

  1. In your React code, import the beta component you want to use from the @Shopify/polaris package. For example:

 

import { BetaBadge } from '@shopify/polaris';

 

 

  1. Use the beta component in your React code as you would any other component.

Note that beta components are not considered stable and may be subject to change. Therefore, it is recommended to use them with caution in production environments.

 

hope this helps!

felixmpaulus
Shopify Partner
53 0 19

Restarting the development server did it for me... 🙂

Add bullet points to your productpage with Bloom: Product Feature Bullets
Increase branding and conversion. Set your store apart.
❤️ Free Plan available. Exclusively 5-star reviews.

jasper91
Shopify Partner
9 0 4

I had this same issue. Previous answers did not help. There's not a special way to import beta components. You just need to make sure you are using the correct release, and then delete the node_modules because that is storing your old deps. Here's what worked for me:

 

  1. Open the web/frontend/package.json file in your project.

  2. Locate the @Shopify/polaris package under the dependencies section, and update its version to the latest available version. For example, you can update it to version 10.41.0 by changing the line to "@shopify/polaris": "^10.41.0".

  3. Save the changes to the package.json file.

  4. Delete the node_modules folder in your project.

  5. Restart your development server.

  6. Verify that the @Shopify/polaris package has been installed with the correct version by checking the package-lock.json file or running the npm list command.

Hope this helps!

Brandon-Flexi
Shopify Partner
9 0 5

This worked perfectly!

Important Steps:
1. Deleting the node_modules
2. Running npm install
3. Then restarting with "npm run dev -- --reset" did the trick 👍