How to import Beta components in Polaris?

Retired Boards Appdev Tools
1

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.

1 Like
2

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_77 /polaris package, which includes beta components:
npm install /polaris
  1. In your React code, import the beta component you want to use from the @Shopify_77 /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!

3

Restarting the development server did it for me… :slightly_smiling_face:

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_77 /polarispackage 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_77 /polarispackage has been installed with the correct version by checking the package-lock.json file or running the npm list command.

Hope this helps!

2 Likes
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 :+1: