Error: Serving JS files for studio and student

Development
1

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.

2

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ā€?

3

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:

4

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
5

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?

6

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.