ReactJS change beteween 15.x and 16.x cause error-CodePudding

My site works with react 15.6.2

when I update to 16.14.0

added also react-dom ....

it errors out

Per docs 15.x change to 16.x should work.

src/js/config.js 
//This script configures require js and bootstraps the application

//require.js will be concatenated with this file
//using the Makefile so that the resulting boot.js
//is the only JS file required to bootstrap the app.

require.config({
  paths: {
    "plugins" : 'empty:', //plugins are provided via Flask (see app.py)
    "env_settings" : 'empty:', //these settings get provided via Flask (see app.py)
    "text" : "../assets/js/text",
    "requirejs" : "../node_modules/requirejs/requirejs",
    "jquery" : "../node_modules/jquery/dist/jquery",
    "bootstrap" : "../node_modules/bootstrap/dist/js/bootstrap",
    "react-bootstrap" : "../node_modules/react-bootstrap",

    "moment" : "../node_modules/momentjs/moment",
    "director" : "../node_modules/director/build/director",
    "react": "../node_modules/react/react",
    "react-dom": "../node_modules/react-dom/react-dom",


    "codemirror" : "../node_modules/codemirror",
    "sprintf" :"../node_modules/sprintf/src/sprintf",
    "marked":"../node_modules/marked/lib/marked",
    "prism":"../node_modules/prism/prism",
    "prism-react":"../node_modules/prism-react/prism-react"
    //"object-assign":"../node_modules/object-assign/object-assign"



  },
  shim : {

    "director" : {
        exports : 'Router'
    },
    "bootstrap" : {
        deps : ['jquery'],
        exports : "Bootstrap",
    },
    "prism" : {
        exports : 'Prism'
    },
    "d3" : {
        exports : "d3"
    },
    "threejs" : {
        exports : "THREE"
    },
    "marked" : {
        exports : 'marked'
    }
  },
  baseUrl : "/static/js",
  urlArgs: "bust=BUILD_TIMESTAMP"
})

This is the error:

Uncaught Error: Module name "react" has not been loaded yet for context: _. Use require([])
http://requirejs.org/docs/errors.html#notloaded

This is produced boot.js (only file needed for the app with JS code)

https://www.topcodersonline.com/boot.js

What should I add, what could be missing?

What changed between 15.x and 16.x?

Here is the project code (ReactJS code):

https://github.com/marcinguy/betterscan-ce/tree/master/quantifiedcode/frontend

CodePudding user response：

It looks like the error is occurring because you are using the require function to try to import the react and react-dom modules, but those modules haven't been loaded yet. In order to fix this error, you can try importing the react and react-dom modules using the import keyword instead.

For example, you could try changing this code:

require.config({
  paths: {
    ...
    "react": "../node_modules/react/react",
    "react-dom": "../node_modules/react-dom/react-dom",
    ...
  },
  ...
})

to this:

import React from '../node_modules/react/react';
import ReactDOM from '../node_modules/react-dom/react-dom';

...

You might also need to update your code to use the new React 16.x syntax, since there are some changes between React 15.x and 16.x. For example, the React.createClass method was removed in React 16.x, so if you were using that method to create your React components, you will need to update your code to use the new class syntax instead.

I hope this helps!