web_vitals_1.onLCP is not a function

[mhaseebullah92]

Describe the bug

using the @3.7.7 version of @shopify/app-bridge-react, on initializing the app as Shopify Embedded APP throwing an error on the console web_vitals_1.onLCP is not a function.

To Reproduce

Steps to reproduce the behaviour:

Versions of libraries: @shopify/app-bridge-react @ ^3.7.7 @shopify/polaris @ ^10.49.1 react @ ^18.2.0

Expected behaviour

The APP should not throw a console error.

Contextual information

Packages and versions

Versions of libraries: @shopify/app-bridge-react @ ^3.7.7 @shopify/polaris @ ^10.49.1 react @ ^18.2.0

Platform

• OS: Windows
• OS Version: Windows 11
• App: Shopify Embedded APP

Additional context

Node.js 16, React app created using visual studio.

[rahul-adnabu]

@mhaseebullah92 i am also facing the same issue and because of my that i think my lcp and cls values on the app insights are also not updating, do you face the same ?

[bratsos]

Hi @mhaseebullah92 and @rahul-adnabu ! The console.error is just a reporting thing that we added recently to get more visibility on why web-vitals is failing to load. The fact that you get this error means that web-vitals was failing to load in older versions - we just didn't explicitly logged it.

Seeing the web_vitals_1.onLCP is not a function message makes me think that you fall into this issue - can you double check that and see if any of the workarounds actually fixes the issue?

Thanks, and keep us posted!

[rahul-adnabu]

Hey @bratsos , yes i am not getting the lcp cls data in partner dashboard as well, i tried reverting to 3.7.3 also still not getting. I upgraded react scripts to v5 and webpack to v5.

[bratsos]

The CRA5 issue that I linked here seems unresolved, so I doubt updating dependencies will fix this.

Have you tried implementing the workarounds I suggested? I see that some peeps had success with this by following my example on that issue.

[rahul-adnabu]

i tried that workaround today, stopped getting the errors but as the metrics would be shown tommorrow by shopify. Thanks for helping.

[zainakram99]

hi everyone i got this same kind of message yesterday "TypeError: o.onLCP is not a function ", my senior send me clone of shopify app , i have to do some changing and add some features in it , but when i start my app it did not show anything in front-end , then i open the console and i got there these two error "TypeError: o.onLCP is not a function " & " Uncaught TypeError: o.onLCP is not a function", plz help me if you can. i cannot go to my senior , because he also dont no about this error , so it on me now , i have trying for last 24 hours but still error is not handle.

[rahul-adnabu]

@19-05-1999 hey try this https://github.com/Shopify/shopify-app-bridge/issues/193, it worked for me

[vinodlait]

Getting same error :- App-Bridge failed to initialize web-vitals TypeError: web_vitals_1.onLCP is not a function

import camera from "../src/assets/camera.png";
import React, { useEffect } from 'react';
import createApp from '@shopify/app-bridge';
import { Group, Scanner, Features } from '@shopify/app-bridge/actions';
import {onLCP, onFID, onCLS} from 'web-vitals';

function BarCamera() {
  const config = {
    apiKey: "",
    host: new URLSearchParams(location.search).get("host"),
  };

  **const app = createApp(config);**
  const scanner = Scanner.create(app);

  // console.log('Scanner object:', scanner);
  useEffect(() => {

    async function captureBarcode() {
      try {
        // Ensure that `capture()` function is called correctly
        scanner.subscribe(Scanner.Action.CAPTURE, function(payload) {
          console.log('Scanner success', payload);
          // The payload will contain `scanData`, a string representation of the data scanned.
        });
      } catch (error) {
        console.error('Scanner error', error);
      }
    }
    captureBarcode();
  }, [scanner]);

  return (
    <div className="container">
      <img
        className="image-container"
        src={camera}
        alt="camera"
        width={300}
        height={300}
      />
    </div>
  );
}

export default BarCamera;

package.json

"dependencies": {
    "@shopify/app-bridge": "^3.7.10",
    "@shopify/app-bridge-core": "^1.1.1",
    "@shopify/app-bridge-react": "^3.7.10",
    "@shopify/polaris": "^12.15.0",
    "@shopify/shopify-api": "^9.2.0",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.6.7",
    "base64url": "^3.0.1",
    "i": "^0.3.7",
    "npm": "^10.4.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.22.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^3.5.2"
  },

Please advice

[henrytao-me]

This issue is resolved when includes latest App Bridge CDN. You can just include the CDN to your app to get this fix. It's not necessary to remove old app-bridge from npm but we recommend to migrate your app to use the new App Bridge.

Ref https://shopify.dev/docs/api/app-bridge-library#getting-started