repetere/jsonx

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

ericclemmons opened this issue · 7 comments

ericclemmons commented 
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

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

yawetse commented

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

  • are you using this directly in the browser, in a SPA, or server-side?
  • do you have the option of using typescript/babel? If so, this would probably be the easier way to fix it.

The issue is the default export format is ESNext

ericclemmons commented 
node --version
v14.16.0

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

yawetse commented

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

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

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

  • iife dist/index.web.core-legacy.js
  • iffe dist/index.web.core-legacy-min.js
  • umd dist/index.umd.core-legacy.js
  • umd dist/index.umd.core-legacy-min.js