[v2.5.2] ReferenceError: React is not defined at LineChartDataProvider for React Native Web

[jbagaresgaray]

System:
  OS: macOS 14.5
  CPU: (10) arm64 Apple M1 Pro
  Memory: 87.95 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.18.2
    path: ~/.nvm/versions/node/v18.18.2/bin/node
  Yarn:
    version: 1.22.22
    path: ~/.nvm/versions/node/v18.18.2/bin/yarn
  npm:
    version: 10.2.4
    path: ~/.nvm/versions/node/v18.18.2/bin/npm
  Watchman:
    version: 2024.01.22.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /opt/homebrew/bin/pod

IDEs:
  Android Studio: 2023.1 AI-231.9392.1.2311.11330709
  Xcode:
    version: 15.4/15F31d
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.9
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.73.6
    wanted: 0.73.6
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found

[mikeislearning]

I get the same issue

[PaulWareham2022]

me too

[mikeislearning]

I created a patch that fixes this, looks like a few files just forgot to add imports:

diff --git a/node_modules/react-native-wagmi-charts/lib/module/charts/line/Data.js b/node_modules/react-native-wagmi-charts/lib/module/charts/line/Data.js
index 1b6f9d0..50fce97 100644
--- a/node_modules/react-native-wagmi-charts/lib/module/charts/line/Data.js
+++ b/node_modules/react-native-wagmi-charts/lib/module/charts/line/Data.js
@@ -1,4 +1,4 @@
-import { createContext, useContext, useMemo } from 'react';
+import React, { createContext, useContext, useMemo } from 'react';
 export const DefaultLineChartId = '__LineChartData';
 const LineChartDataContext = /*#__PURE__*/createContext({
   [DefaultLineChartId]: []
diff --git a/node_modules/react-native-wagmi-charts/lib/module/charts/line/DatetimeText.js b/node_modules/react-native-wagmi-charts/lib/module/charts/line/DatetimeText.js
index e0ac259..f9fa3a4 100644
--- a/node_modules/react-native-wagmi-charts/lib/module/charts/line/DatetimeText.js
+++ b/node_modules/react-native-wagmi-charts/lib/module/charts/line/DatetimeText.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import { useLineChartDatetime } from './useDatetime';
 import { AnimatedText } from '../../components/AnimatedText';
 LineChartDatetimeText.displayName = 'LineChartDatetimeText';
diff --git a/node_modules/react-native-wagmi-charts/lib/module/charts/line/PriceText.js b/node_modules/react-native-wagmi-charts/lib/module/charts/line/PriceText.js
index 9551696..46d6936 100644
--- a/node_modules/react-native-wagmi-charts/lib/module/charts/line/PriceText.js
+++ b/node_modules/react-native-wagmi-charts/lib/module/charts/line/PriceText.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import { useLineChartPrice } from './usePrice';
 import { AnimatedText } from '../../components/AnimatedText';
 LineChartPriceText.displayName = 'LineChartPriceText';

[dlindenkreuz]

@honeybadger26 Looks like this PR made the entire library unusable on web: https://github.com/coinjar/react-native-wagmi-charts/pull/172

The compiled JS files don't auto-import react/jsx-runtime for some reason.

[honeybadger26]

Hi all. Thanks for reporting this. I've made a PR to resolve this and will try to get a release out soon.

We shouldn't have to import React since we're on version 18, but for whatever reason this doesn't work 🤷 I've brought back the imports so the compiled JS is correct.

[honeybadger26]

Fixed in v2.5.3