How can I get react-bootstrap to load without breaking react-dom?
Question
I'm building an application using ReactBootstrap. I was having trouble figuring out how to place my code into separate files, so I started using require.js. I started a separate project as a playground to experiment with requiring the various modules I need in my bigger project.
I have been able to get react (and react-dom) working on its own. However, as soon as I perform a require() on react-bootstrap, I get the following error:
GET http://localhost:5000/static/react-dom.js require.js:1952
Uncaught Error: Script error for "react-dom" require.js:165
Please note that the above address is not the correct location for react-dom. I have no idea why it's looking for it in that location. This can be seen in my config.js file, which accurately depicts the location of my relevant JavaScript pre-requisite modules:
requirejs.config({
baseUrl: "/static",
paths: {
jquery: "vendors/jquery/dist/jquery",
jsx: "vendors/jsx-requirejs-plugins/js/jsx",
JSXTransformer: "vendors/jsx-requirejs-plugins/js/JSXTransformer",
react: "vendors/react/react-with-addons",
react_dom: "vendors/react/react-dom",
bootstrap: "vendors/bootstrap/dist/js/bootstrap",
react_bootstrap: "vendors/react-bootstrap/react-bootstrap",
text: "vendors/requirejs-text/text",
},
jsx: {
fileExtension: ".js"
},
});
At this point, I am not even rendering anything of interest (in the name of figuring this out). This can be seen by looking at my rather empty app.js file:
requirejs(
["jquery", "react", "react_dom", "react_bootstrap"],
function($, React, ReactDOM) {
});
There is no error when I change the above code to:
requirejs(
["jquery", "react", "react_dom"],
function($, React, ReactDOM) {
});
Adding bootstrap to the list does not help. It is also worth noting that JQuery is being correctly loaded from http://localhost:5000/static/vendors/jquery/dist/jquery.js
For context, my index.html file looks as below.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="/static/vendors/requirejs/require.js"></script>
<script src="/static/config.js"></script>
<script src="/static/app.js"></script>
</body>
</html>
To summarize: I get an error with a specific Library – in particular, it is being looked for in the wrong place – but that error only shows up when additionally requiring react-bootstrap.
What am I missing? Thanks!
1 answers
solution1
0 2016-03-16 21:25:43
The issue was that I took the liberty of naming, within config.js, react-dom as "react_dom", mostly to get around the fact that dashes don't work without encasing them in quotes. react-bootstrap was then specifically asking for react-dom, which is why the wrong URL was being hit.
Moving forward with the correct naming scheme, everything works smashingly!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.