search

repetere / jsonx

JSONX - Create React Elements, JSX and HTML from JSON
https://repetere.github.io/jsonx/
MIT License
171 stars 17 forks source link

Fails on create-react-app (CRA) due to optional chaining syntax #127

Closed ericclemmons closed 3 years ago

ericclemmons commented 3 years ago 
Failed to compile.

./node_modules/jsonx/dist/index.umd.js 53630:28
Module parse failed: Unexpected token (53630:28)
File was processed with these loaders:
 * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|       }, {
|         FormComponent: FormComponent.bind(this)
>       }, componentMap, this?.reactComponents);
|       const reactComponents = boundedComponents.length ? getBoundedComponents.call(this, {
|         boundedComponents,

Any recommendations on how to resolve this?

yawetse commented 3 years ago

Do you mind letting me know which version of Node you're using?

yawetse commented 3 years ago

also, if you have any more information about the usage context that would be great:

The issue is the default export format is ESNext

ericclemmons commented 3 years ago 
node --version
v14.16.0

This is being ran via https://create-react-app.dev/, so in the browser, no SSR.

yawetse commented 3 years ago

what version of jsonx?

also can you try openingnode_modules/jsonx/src/examples/component-simple_syntax.html in your browser and see if it works?

also can you include maybe a snippet of the usage?

yawetse commented 3 years ago

try this in your browser:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>SIMPLE SYNTAX TEST</title>
    <script  src="https://unpkg.com/react@17.0.2/umd/react.production.min.js" type="text/javascript"></script>
    <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js" type="text/javascript"></script>
    <script src="https://unpkg.com/jsonx/dist/index.umd.core-min.js" type="text/javascript" ></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/javascript">
      const JXM = {
        div:{
          children:[
            { p:'super short'},
            { ul:[{li:'first'},{li:'second'}]},
          ]
        }
      }
      const boundConfig = {
      };
      jsonx.jsonxRender.call(boundConfig,{ 
        jsonx: JXM, 
        querySelector:'#root', });
    </script>
  </body>
</html>

should render this image

yawetse commented 3 years ago

if you're still having issues, I just pushed out a new UMDs that has legacy ES5 syntax

ericclemmons commented 3 years ago

Looks like that fixed it! Thank you!

https://codesandbox.io/s/jsonx-cra-2o6fq?file=/src/App.js:100-266