search

Shopify / shopify-app-bridge

https://shopify.dev/docs/api/app-bridge
82 stars 9 forks source link

App-Bridge failed to initialize web-vitals TypeError: web_vitals_1.onLCP is not a function #287

Closed vinodlait closed 4 months ago

vinodlait commented 4 months ago

Getting error while implementing scanner using @shopify/app-bridge :- 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

mesija commented 4 months ago

We solved this prolem by using the Craco builder since the default builder does not support some extensions.

We just added the craco package to the dependencies, added the craco.config.ts (since we use TypeScript on the front end) file and built it through craco build

here is the content of the configuration file

  webpack: {
    configure: (config: any) => ({
      ...config,
      module: {
        ...config.module,
        rules: config.module.rules.map((rule: any) => {
          if (rule.oneOf instanceof Array) {
            rule.oneOf[rule.oneOf.length - 1].exclude = [/\.(js|mjs|jsx|cjs|ts|tsx)$/, /\.html$/, /\.json$/];
          }
          return rule;
        }),
      },
    }),
  },
};
iwoodruff commented 4 months ago

great to hear you fixed the issue. we're aware that some bundlers do not playing well with web vitals. If you fetch app bridge via CDN, it might avoid issues with your bundler as well. i'm going to close this ticket since you found a fix

<head>
  <meta name="shopify-api-key" content="%SHOPIFY_API_KEY%" />
  <script src="https://cdn.shopify.com/shopifycloud/app-bridge.js"></script>
</head>