Error: Serving JS files for studio and student

I have used ReactJS + webpack to take care of the JS fragment that we attach to xblocks.
The xblock installs successfully, but when try to access/edit the xblock in the studio view, it gives the following error in the chrome developer console.

VM60:22 ReferenceError: React is not defined
    at t.value (eval at globalEval (cms-base-vendor.7fdf2ee29320.js:486:5), <anonymous>:56:48675)
    at t.value (eval at globalEval (cms-base-vendor.7fdf2ee29320.js:486:5), <anonymous>:56:5653)
    at za (eval at globalEval (cms-base-vendor.7fdf2ee29320.js:486:5), <anonymous>:22:69873)
    at Fa (eval at globalEval (cms-base-vendor.7fdf2ee29320.js:486:5), <anonymous>:22:69668)
    at yl (eval at globalEval (cms-base-vendor.7fdf2ee29320.js:486:5), <anonymous>:22:105467)
    at cu (eval at globalEval (cms-base-vendor.7fdf2ee29320.js:486:5), <anonymous>:22:96714)
    at lu (eval at globalEval (cms-base-vendor.7fdf2ee29320.js:486:5), <anonymous>:22:96639)
    at Zl (eval at globalEval (cms-base-vendor.7fdf2ee29320.js:486:5), <anonymous>:22:93669)
    at Kl (eval at globalEval (cms-base-vendor.7fdf2ee29320.js:486:5), <anonymous>:22:90433)
    at Mu (eval at globalEval (cms-base-vendor.7fdf2ee29320.js:486:5), <anonymous>:22:111881)
  • Things that i have tried →

    1. I did try to provide the cdn links for react and react-dom in the html file that i attach to the xblock fragment, but that didn’t help, same error.
    2. I saw that a common.min.js file is being served in the sources, and i tried to download the cdn files and copy into the cms and lms docker containers, in the following directories (basically all directories i saw having common.js file)
      	./edx-platform/common/static/common/js/vendor/
      	./staticfiles/studio/common/js/vendor/
      	./staticfiles/studio-frontend/dist/
      	./staticfiles/common/js/vendor/
      	
      

    i then ran tutor local exec lms paver update_assets lms --settings=tutor.production and tutor local exec lms paver update_assets cms --settings=tutor.production, in an attempt to compile the static files, though the commands ran successfully, they didn’t serve the cdn files when editing in studio, and thus the same error.

Hi. I’m having a bit of trouble understanding your situation. When you first set up tutor, was everything working? And then, what changes did you make exactly? Are you trying to develop a new, React-based XBlock? What do you mean by “to take care of the JS fragment that we attach to xblocks”?

The other xblocks that are provided by default do work fine.

Yes, i am trying to develop a new React frontend based xblock.
I am using webpack, to compile my react app, and adding the compiled js, to the fragment like so.

frag = Fragment(html.format(self=self))
frag.add_css(self.resource_string(“static/css/myapp.css”, name))
frag.add_javascript(self.resource_string(“static/dist/myapp-lms.js”, name))

Now this compiled js file needs react.development.js, react.dom.development.js file to be provided by the ‘/static/common/js/vendor’ when the app loads.

I am having trouble figuring a way by which is can get those files to be provided in the said path during site load in both LMS and CMS.

Could you help me with any information you may have on serving ‘.js’ files in ‘/static/common/js/vendor’ when the xblock in loaded in CMS and LMS

Thanks :slight_smile:

I see. Thanks for the details.

I would suggest that you just use Webpack to bundle React into your JS bundle. It will make the JS file large, but won’t have any conflicts.

If that’s not acceptable to you, you can include a <script src="https://cdn.example.com/react.x.js"> in either your XBlock HTML or your “theme” HTML so that it will load React from a CDN.

But if you really want to go with the approach in your question, I believe what you’re missing is just the step of adding those files to the list of base_vendor_js.

1 Like

As you asked, i did include it in the ‘list of base_vendor_js’ and looked that the files are available in the directory.
Ran paver update_assets lms & cms, restarted, but it didn’t work.
It still isn’t served in Sources, is there a separate command to let openedx know, that those changes have been applied?

Alright, i run ‘tutor images build openedx’ command, and it served it finally.
@braden Thanks so much for assisting me trying to figure this out.
You’re a lifesaver.