Importing components in .mdx files error (react native)

[cristianpjensen]

Bug Report

Describe the bug

Docz cannot find exports to insert components in .mdx files.

To Reproduce

I am building a react native project with expo. I am also using TypeScript. I would like to integrate docz for documentation. However, I am not able to import components into my .mdx files. I had found an issue describing this same issue and that issue was resolved by adding

export default {
    typescript: true
}

to the doczrc.js. However, this does not work for me, because that produces another error, which has something to do with Webpack I think. This produces the following error when building the development server:

 ERROR #98123  WEBPACK

Generating development SSR bundle failed

Unexpected token (12:37)

File: ../node_modules/expo-asset/build/PlatformUtils.js:12:37

 ERROR #98123  WEBPACK

Generating development SSR bundle failed

Unexpected token (130:8)

File: ../node_modules/react-native-reanimated/lib/reanimated1/core/AnimatedBezier.js:130:8

 ERROR #98123  WEBPACK

Generating development SSR bundle failed

Unexpected token (13:44)

File: ../node_modules/expo-asset/build/EmbeddedAssets.js:13:44

 ERROR #98123  WEBPACK

Generating development SSR bundle failed

Unexpected token (13:7)

File: ../node_modules/react-native/Libraries/Image/AssetRegistry.js:13:7

 ERROR #98123  WEBPACK

Generating development SSR bundle failed

Unexpected token (13:7)

File: ../node_modules/react-native/Libraries/Image/AssetSourceResolver.js:13:7

 ERROR #98123  WEBPACK

Generating development SSR bundle failed

Unexpected token (13:7)

File: ../node_modules/react-native/index.js:13:7

 ERROR #98123  WEBPACK

Generating development SSR bundle failed

Unexpected token (14:11)

File: ../node_modules/react-native-reanimated/lib/reanimated1/core/AnimatedCall.js:14:11

 ERROR #98123  WEBPACK

Generating development SSR bundle failed

Unexpected token (18:12)

File: ../node_modules/react-native/Libraries/Image/resolveAssetSource.js:18:12

 ERROR #98123  WEBPACK

Generating development SSR bundle failed

Unexpected token (36:6)

File: ../node_modules/react-native-reanimated/lib/reanimated1/Transitioning.js:36:6

 ERROR #98123  WEBPACK

Generating development SSR bundle failed

Unexpected token (48:32)

File: ../node_modules/expo-constants/build/Constants.js:48:32

 ERROR #98123  WEBPACK

Generating development SSR bundle failed

Unexpected token (4:12)

File: ../node_modules/react-native-reanimated/lib/reanimated1/core/AnimatedClockTest.js:4:12

 ERROR #98123  WEBPACK

Generating development SSR bundle failed

Unexpected token (65:8)

File: ../node_modules/react-native-reanimated/lib/reanimated1/core/AnimatedOperator.js:65:8

 ERROR #98123  WEBPACK

Generating development SSR bundle failed

Unexpected token (69:40)

File: ../node_modules/react-native-reanimated/lib/createAnimatedComponent.js:69:40

 ERROR #98123  WEBPACK

Generating development SSR bundle failed

Unexpected token (6:16)

File: ../node_modules/react-native-reanimated/lib/reanimated1/core/AnimatedClock.js:6:16

 ERROR #98123  WEBPACK

Generating development SSR bundle failed

Unexpected token (6:7)

File: ../node_modules/react-native-reanimated/lib/reanimated1/core/AnimatedAlways.js:6:7

 ERROR #98123  WEBPACK

Generating development SSR bundle failed

Unexpected token (7:12)

File: ../node_modules/react-native-reanimated/lib/reanimated1/core/AnimatedCond.js:7:12

 ERROR #98123  WEBPACK

Generating development SSR bundle failed

Unexpected token (7:12)

File: ../node_modules/react-native-reanimated/lib/reanimated1/core/AnimatedStartClock.js:7:12

 ERROR #98123  WEBPACK

Generating development SSR bundle failed

Unexpected token (7:12)

File: ../node_modules/react-native-reanimated/lib/reanimated1/core/AnimatedStopClock.js:7:12

 ERROR #98123  WEBPACK

Generating development SSR bundle failed

Unexpected token (7:7)

File: ../node_modules/react-native-reanimated/lib/reanimated1/core/AnimatedSet.js:7:7

 ERROR #98123  WEBPACK

Generating development SSR bundle failed

Unexpected token (7:8)

File: ../node_modules/react-native-reanimated/lib/reanimated1/core/AnimatedBlock.js:7:8

 ERROR #98123  WEBPACK

Generating development SSR bundle failed

Unexpected token (83:10)

File: ../node_modules/react-native-reanimated/lib/reanimated1/core/AnimatedNode.js:83:10

 ERROR #98123  WEBPACK

Generating development SSR bundle failed

Unexpected token (8:7)

File: ../node_modules/react-native-reanimated/lib/reanimated1/core/AnimatedFunction.js:8:7

 ERROR #98123  WEBPACK

Generating development SSR bundle failed

Unexpected token (98:13)

File: ../node_modules/react-native-reanimated/lib/reanimated1/core/AnimatedEvent.js:98:13

 ERROR #98123  WEBPACK

Generating development SSR bundle failed

Unexpected token (9:10)

File: ../node_modules/react-native-reanimated/lib/reanimated1/core/AnimatedDebug.js:9:10

not finished Building development bundle - 5.390s

I do not know what to do about this error, since I cannot find anyone who has the same problem.

Expected behavior

I would expect the component to be imported in the .mdx files and working as it should.

Environment

• docz version: 2.3.1
• OS: MacOS Big Sur 11.2.3
• Node/npm version: Node v14.15.4, yarn 1.22.10

[renatobenks]

hey @cristianpjensen, thank you for reporting this! Try to do this following https://github.com/doczjs/docz/issues/1637#issuecomment-897427356, and let me know it goes.

As far we noticed, there are some quirks in react-native that we're still not supporting properly, but maybe this workaround will work for you.

[cristianpjensen]

Hello @renatobenks, thanks for your quick response. I tried your suggestion, however, it did not change the situation. I also tried your suggestion without typescript: true, however then it is not able to find any exports.

So, the situation is that whenever I remove typescript: true from doczrc.js, it cannot find any exports, but when I add it, some error occurs regarding webpack. I have no experience with webpack, so I do not know what it means.

[cristianpjensen]

After further investigation of the other error, I think it has something to do with it not installing my dependencies to the Gatsby website. When I add typescript: true, it is able to find the exports, but it cannot find the dependencies that those exports rely on. I think, but I am not sure if this should even produce a problem.

[renatobenks]

@cristianpjensen did you try to put the src option as well?

Well, based on the error shown above, the webpack has been unable to parse your dependency files to build the gatsby project, so I believe it's because docz is not properly configured, so try to follow this example to see what you got: https://github.com/doczjs/docz/blob/main/examples/react-native

[renatobenks]

how it worked for you @cristianpjensen, can we close this one?