search

conorhastings / react-native-syntax-highlighter

a syntax highlighter for react native using https://github.com/conorhastings/react-syntax-highlighter under the hood
MIT License
167 stars 25 forks source link

TypeError: can't access property "color" #28

Open tomByrer opened 3 years ago

tomByrer commented 3 years ago

Win10, both Expo targeting web & Next.js with React-Native-Web won't run your library. I used only the demo you have in README.

Unhandled Runtime Error

TypeError: can't access property "color", topLevel is undefined
Call Stack
generateNewStylesheet/<
file:/D:/doc/prog/learn/js/react/reactnative/test-highlight-nextjs/.next/static/webpack/pages/index.970e49074bdcb60232d4.hot-update.js (24175:9)
generateNewStylesheet
/_next/static/webpack/pages/index.970e49074bdcb60232d4.hot-update.js (24174:30)
NativeSyntaxHighlighter
file:/D:/doc/prog/learn/js/react/reactnative/test-highlight-nextjs/.next/static/webpack/pages/index.970e49074bdcb60232d4.hot-update.js (24284:52)
renderWithHooks
/_next/static/chunks/main.js (31890:27)
mountIndeterminateComponent
file:/D:/doc/prog/learn/js/react/reactnative/test-highlight-nextjs/.next/static/chunks/main.js (34569:13)
beginWork
/_next/static/chunks/main.js (35683:16)
callCallback
file:/D:/doc/prog/learn/js/react/reactnative/test-highlight-nextjs/.next/static/chunks/main.js (17275:14)
invokeGuardedCallbackDev
/_next/static/chunks/main.js (17324:16)
invokeGuardedCallback
file:/D:/doc/prog/learn/js/react/reactnative/test-highlight-nextjs/.next/static/chunks/main.js (17379:31)
beginWork$1
/_next/static/chunks/main.js (40290:28)
performUnitOfWork
file:/D:/doc/prog/learn/js/react/reactnative/test-highlight-nextjs/.next/static/chunks/main.js (39241:12)
workLoopSync
/_next/static/chunks/main.js (39217:22)
performSyncWorkOnRoot
file:/D:/doc/prog/learn/js/react/reactnative/test-highlight-nextjs/.next/static/chunks/main.js (38843:9)
flushSyncCallbackQueueImpl/<
/_next/static/chunks/main.js (28176:24)
unstable_runWithPriority
file:/D:/doc/prog/learn/js/react/reactnative/test-highlight-nextjs/.next/static/chunks/main.js (46080:12)
runWithPriority$1
/_next/static/chunks/main.js (28126:10)
flushSyncCallbackQueueImpl
file:/D:/doc/prog/learn/js/react/reactnative/test-highlight-nextjs/.next/static/chunks/main.js (28171:24)
flushSyncCallbackQueue
/_next/static/chunks/main.js (28159:3)
flushSync
file:/D:/doc/prog/learn/js/react/reactnative/test-highlight-nextjs/.next/static/chunks/main.js (39019:5)
scheduleRefresh
/_next/static/chunks/main.js (28713:14)
performReactRefresh/<
file:/D:/doc/prog/learn/js/react/reactnative/test-highlight-nextjs/.next/static/chunks/react-refresh.js (507:17)
performReactRefresh
/_next/static/chunks/react-refresh.js (496:26)
scheduleUpdate/<
file:/D:/doc/prog/learn/js/react/reactnative/test-highlight-nextjs/.next/static/chunks/react-refresh.js (135:35)
FlxEd commented 2 years ago

Had the same issue on Win10. Haven't tried on other OS. Workaround to still be able to use the library is to import another style mode from /prism instead of /hljs

The following code worked for me:

import SyntaxHighlighter from 'react-native-syntax-highlighter';
import { darcula } from 'react-syntax-highlighter/styles/prism'; // note the difference here

export default function App() {
  return (
    <View style={styles.container}>
      <SyntaxHighlighter
        language='javascript'
        style={darcula}
        highlighter={"prism" || "hljs"}
      >
        Hello World!
      </SyntaxHighlighter>
      <StatusBar style="auto" />
    </View>
  );
}