React native web

[wojniemiec]

Hello.

This is a great library and I would like to use it in our production app. However, does it work on react-native-web? I've got following error after including component into my code: Support for the experimental syntax 'jsx' isn't currently enabled (144:31): Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.

I use standard react-native-web and babel-plugin-react-native-web.

Thanks for your help!

[abirchall]

Is it possible to add a .babelrc to the root of your repo (if one does not already exist) with the following preset:

{
  "presets": ["@babel/preset-react"]
}

[stnmonroe]

I added the presets, and the recommended plugin @babel/plugin-syntax-jsx and now I get the following error...

...AstRenderer.js 28:20
Module parse failed: Unexpected token (28:20)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.

Will continue to investigate and report back if I find anything.

[shawnmclean]

I'm running into this issue too:

 ⨯ ../../node_modules/react-native-markdown-display/src/index.js
Module parse failed: Unexpected token (144:30)
|     onLinkPress,
|     maxTopLevelChildren = null,
>     topLevelMaxExceededItem = <Text key="dotdotdot">...</Text>,
|     allowedImageHandlers = [
|       'data:image/png;base64',

Stack is nextjs with react-native-web.

[thetaungg]

I got it working with Nextjs. You just have to put react-native-markdown-display in transpilePackages array next.config.js

This is an example with Next.js 14+

With Next.js 13, you have to use 'next-transpile-modules' but you probably have it setup already if you're already using react-native with Nextjs.

const { withExpo } = require('@expo/next-adapter');
const webpack = require('webpack');

/** @type {import('next').NextConfig} */
const nextConfig = withExpo({
    transpilePackages: [
        'react-native-markdown-display',
        // Add more React Native/Expo packages here...
    ],
});
module.exports = nextConfig;