Confusing documentation on use of import statement about dataformsjs

[ConradSollitt]

Hi @m1sta

Thanks for the demo! That helps and I was able to quickly re-create it on the DataFormsJS playground site https://dataformsjs.com/en/playground

I added working code to your demo:
https://gist.github.com/m1sta/63c9525297092df8ac78c85d31477c52?permalink_comment_id=4499648#gistcomment-4499648

For the documentation I updated the import comments because they were not clear that it only imports regular JavaScript files. For dynamic JSX I published a custom component <LazyLoad> that can be used.

jsxLoader is designed to load files in the order specified so I'm a little surprised its not working but I do I recall this issue from a earlier development where the main code should be inline and then modules can be in any order. It see it's not in the documentation so I will review comments and other demos this week and see if I can get it working since it works with Babel Standalone. At the very least I will update the docs in more detail for this.

Here is the largest React demo published on the main site. If you view the source (either in the browser or 2nd link below) you can see that it loads the first page and then all other pages for the SPA come from other files. Some are loaded when the page first loads and some are using <LazyLoad>.

https://dataformsjs.com/examples/places-demo-react.htm#/en/

https://github.com/dataformsjs/dataformsjs/blob/master/examples/places-demo-react.htm

[ConradSollitt]

Hi,

Sorry for the delay. Which example from the homepage are you referring to?

import is not shown on the main site at https://dataformsjs.com/en/ and for examples on https://awesome-web-react.js.org/ you have to view the source to see import statements.

See this topic for the main jsxLoader documentation:
https://github.com/dataformsjs/dataformsjs/blob/master/docs/jsx-loader.md#handling-node-importexport-statements-and-browser-exportsrequire

And also the topic on Code Splitting: https://github.com/dataformsjs/dataformsjs/blob/master/docs/jsx-loader.md#code-splitting-%EF%B8%8F

Basically, jsxLoader if you had a standard JS file then import Component from './file.js' would work, but to handle JSX code or components then a few lines of config are typically needed. Many examples exist on this site if you view the source code: https://awesome-web-react.js.org/

Is this a popular third-party library that you are trying to include or something that you wrote yourself?

[m1sta]

I was looking at this "example" from the homepage

<!--
    If a script uses `import` or requires other features on available with
    JavaScript Modules you can specify [data-type="module"] so that the compiled
    script will be added to the page as <script type="module">.

    [data-type="module"] is also supported by Babel Standalone.
-->
<script type="text/babel" data-type="module">
    import { object } from 'library'
</script>

I'm just trying to get one jsx file I wrote myself to import another jsx file I wrote myself, but I want to do everything in the browser.

Better example of what I'm trying to do is here (I'd prefer to use import statements and use jsxLoader but i've failed to work out how to do that) https://gist.github.com/m1sta/63c9525297092df8ac78c85d31477c52

[m1sta]

@ConradSollitt any advice?

[ConradSollitt]

Hi @m1sta

Sorry for the long delay in this issue.

In case you are still doing Web Based React Development I just published a new version to fix the issue. I also gave you credit for finding the error and opening the issue in the Change Log.

The errors would occur when the page downloaded an earlier JSX file before a later one and added it to the page first. All JSX files were downloaded, compiled, and added to the page asynchronously. At times it would work but at times there would be an error. Previously I had always used the <LazyLoad> Component I developed to work around the issue.

Now I only download the JSX source asynchronously and then once all JSX files are downloaded (or error with 404, etc) then they are compiled and added to the page in the expected order. This allowed for the update without having any performance impact.

[ConradSollitt]

Also, if you are still using it or plan to and need more help feel free to ask and I'll try to respond much faster next time.

I was working 2 jobs recently so it was taking a lot of my time but now I'm down to mostly one job so I have free time again.