​

My Flows are not showing up in my app

If your Frigade components are not rendering as expected, there’s a few things you can check:

• Check the developer console: Open the developer console in your browser and look for any error messages.
• Check your API key: Make sure you have the correct API key in your <Frigade.Provider /> component. You can find your API key in the Frigade dashboard.
• Check your Flows: Make sure you have created Flows in the Frigade dashboard and that they are published. If you have not published your Flows, they will not be available in your app.
• Check your Environment: Make sure you are using the correct environment in your <Frigade.Provider /> component. Each environment has its own API key and Flows. If you are using the wrong environment, your Flows will not show up in your app.
• Enable debug mode: If you are still having issues, you can enable debug mode in Chrome Devtools (see guide).
• Ensure zIndex is set correctly: If your Flows are not showing up, it may be because they are being rendered behind other elements on the page. You can fix this by setting the zIndex on components such as Frigade.Tour or Frigade.Announcement to a higher value.

​

I have a bunch of guest users in my dashboard I do not recognize

If a userId is not available when Frigade is initialized via the <Frigade.Provider /> and/or the JS SDK, Frigade will automatically assign a guest user id to the user. This is to ensure that the user can still be tracked and that their data is not lost.

To avoid having guest users created while you’re still fetching the user id, you can wrap the <Frigade.Provider /> in a different component that fetches the user id and then renders the <Frigade.Provider /> with the user id as such:

function FrigadeProviderWrapper({ children }: { children: React.ReactNode }) {
  const { user } = useGetMyUser();

  if (!user || user.isLoading || !process.env.FRIGADE_PUBLIC_KEY) {
      return children;
  }

  return (
    <Frigade.Provider
      apiKey={process.env.FRIGADE_PUBLIC_KEY}
      userId={user.uid}
    >
      {children}
    </Frigade.Provider>
  );
}

​

Can’t import the named export from non EcmaScript module

If you into an error such as Can't import the named export 'Anchor' from non EcmaScript module (only default export is available), it is likely that you are using an older version of create-react-app.

There are two ways to fix this issue:

• Upgrade to the latest version of create-react-app (you need to be on version 5.0.0 or higher of react-scripts).
• Eject your app from create-react-app (if not already done) and manually configure your webpack to support ESM. This can be done by adding the following to your webpack config:

module.exports = {
  //...
  resolve: {
    extensions: ['.mjs', '.js', '.json'],
    mainFields: ['module', 'main'],
  },
  rules: [
    ///...
    { test: /\.mjs$/, include: /node_modules/, type: 'javascript/auto' }
  ],
  //...
};