Issue when using Gatsby and MDX

[KoLiBer]

Production build failed when using GatsbyJS and MDX

Hello guys, thanks for this awesome library, currently I'm trying to use @arwes with gatsby and MDX plugin, the project runs in debug mode successfully, but when I add mdx file and try to build in production mode I will get this error, It tells that the problem is related to Animator.component.js but I couldn't find the actual cause of the problem

To reproduce

Steps to reproduce the behavior:

1. run 'npm run build'

Additional context

 ERROR 

Page data from page-data.json for the failed page "/educations/kharazmi-en/": {
  "componentChunkName": "component---src-pages-mdx-slug-jsx",
  "path": "/educations/kharazmi-en/",
  "result": {
    "pageContext": {
      "id": "71aaed88-e6ec-5433-bc88-cad47e4d2d54",
      "slug": "educations/kharazmi.en",
      "__params": {
        "slug": "educations"
      }
    }
  },
  "staticQueryHashes": []
}

failed Building static HTML for pages - 0.584s

 ERROR #95313 

Building static HTML failed for path "/educations/kharazmi-en/"

See our docs page for more info on this error: https://gatsby.dev/debug-html


  36 |     enter: 100,
  37 |     exit: 100,
> 38 |     stagger: 25,
     | ^
  39 |     delay: 0,
  40 |     offset: 0
  41 | });


  WebpackError: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&a
  rgs[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
  
  - Animator.component.js:38 
    [koliber]/[@arwes]/animation/lib/Animator/Animator.component.js:38:1
  
  - Animator.component.js:34 
    [koliber]/[@arwes]/animation/lib/Animator/Animator.component.js:34:1
  
  - Animator.component.js:45 
    [koliber]/[@arwes]/animation/lib/Animator/Animator.component.js:45:1
  
  - static-entry.js:299 
    koliber/.cache/static-entry.js:299:22
  
  - Animator.component.js:151 
    [koliber]/[@arwes]/animation/lib/Animator/Animator.component.js:151:1
  

not finished Caching HTML renderer compilation - 0.666s

[Romel Perez]

Hello @ckoliber !

The error details are not enough to determine what is the cause.

The framework components have been used in Gatsby 3 with MDX pages and so far it has worked fine.

Let me know if you already found a solution.

[KoLiBer]

The problem detail is available here

https://github.com/ckoliber/ckoliber.github.io/runs/3718165267?check_suite_focus=true

This repository has the source code that builder tries to build

[Romel Perez]

I downloaded your repo and ran npm run build and I reproduced it. The error message details is at: https://reactjs.org/docs/error-decoder.html/?invariant=130&args[]=object&args[]=

It is not related to Arwes, but a component you are building with an incorrect type. For example:

React.createElement(type, props, children)

If you are provided a type as something different from string or function/class component, then you get that error.

It also can happen for some of Arwes components expecting one of those two. For example, the frame components such as the FrameBox component expect a property as to be a valid HTML tag string name.

[KoLiBer]

You are right, the problem is about incorrect type, but the error message Is related to Rendering of MDX file content/educations/kharazmi-en/ when I remove all the MDX files and related Content components the project will build successfully, do you have any example with Gatsby, MDX and Arwes ? I think I can compare those projects and It can help me to find the problem

[KoLiBer]

Oops, I've forgot to remove unused file {mdx.slug}.jsx, that causes this problem,
By removing this file problem solved, Thank you @romelperez
The site is now available at this