I am working on a project under CMS, I do not have any access to server.
so I downloaded below 4 files
browser.min.js jquery.min.js react.js react-dom.js
remarkable.min.js
and loaded on the html page. Everything works fine before I use import.
import { sample } from './sample';
Makes Uncaught ReferenceError: require is not defined on React
I am not able to install weback or Browserify on the server, so have to load from somewhere.
Anyone has got a solution for this?
This might be what you're looking for.
<head>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-
dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-
core/5.8.23/browser.min.js"></script>
</head>
Related
i built a Homepage using the Django templating engine and on one page is a js application i wrote. Now i moved to a Frontend <-> Backend architecture with React and Django-rest-framework.
The Application i had in Django was served as a .html file with <script> tags for the js part.
Now i moved to React and i'm serving the html elements through a React component and through React-helmet i'm adding the <script> tags for this specific page. The actual .js files reside in the /public folder of react.
I thought i can replicate this way the old structure. But now i get Errors that the .js files can't import classes from the first external script.
What could be the difference in this setup ?
Django:
<script type="text/javascript" defer src="https://unpkg.com/quantum-circuit"></script>
<script defer src="{% static 'path/to/file.js' %}"></script>
...
React:
<script type="text/javascript" defer src="https://unpkg.com/quantum-circuit"></script>
<script defer src={process.env.PUBLIC_URL + 'path/to/file.js' }></script>
...
The Error Message at React is that my file.js can't find the import from the first <script>. But in Django there is no problem.
the import statement in file.js is:
import { QuantumCircuit } from "quantum-circuit";
Thank you in advance for every answer :)
It seems that the first external script is not ready when my custom scripts are trying to call it.
I fixed the issue using the useEffect hook. It calls the external script and if it's ready i'm calling my custom scripts.
Despite i was able to resolve this issue, i'm wondering why this hasn't happend in Django before.
i have created a application using create-react-app now i need to include some of the script which i have like bootstap.min.js , jquery.min.js ,script.js ,
i have placed these files inside app/styles/js ans referencing them in index.html using script tag but if i do so i am getting Uncaught SyntaxError: Unexpected token < error in the console.
i have tried these solutions ,
ReactJS: "Uncaught SyntaxError: Unexpected token <",
if i reference using CDN it works fine but script.js is the custom create hense CDN is not available
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="../src/Styles/js/script.js"></script> //error here
</body>
Create a js folder into public folder and put all your js file's into that js folder. And you can include that js file like,
<script src="%PUBLIC_URL%/js/script.js"></script>
I am new to TypeScript and thought I would tray the product List demo from ReactJS website with it. I have got so far, but currently getting
external "React":1 Uncaught ReferenceError: React is not defined
at Object.react (external "React":1)
at __webpack_require__ (bootstrap:19)
at Object../src/client/app/index.tsx (index.tsx:1)
at __webpack_require__ (bootstrap:19)
at bootstrap:83
at bootstrap:83
and I am not too sure why, if I include it as an external in my webpack.config.js it works fine, but I am wanting to bundle it with the rest of the src ready for intranet applications that dont have access to the big bad world.
Any help would be appreciated.
I am importing thus import * as React from 'react';
webpack throws no errors
INDEX.TSX
import * as React from 'react';
var ReactDOM = require('react-dom');
import FilterableProductTable from './components/FilterableProductTable';
import Basket from './components/Basket';
ReactDOM.render(
<div>
<FilterableProductTable />
<Basket />
</div>,
document.getElementById('app')
);
I've been having this issue too. After googling the error for a day or so, I stumbled across this page.
Following the link provided by octavioccl in the comments - (http://www.typescriptlang.org/docs/handbook/react-&-webpack.html).
I swear I've read this page a dozen or so times, and roughly tried following it while I've been converting my project across to TypeScript. Anyways, what helped me what this section here:
"We’ll also need a page to display our Hello component. Create a file at the root of proj named index.html with the following contents:"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
</head>
<body>
<div id="example"></div>
<!-- Dependencies -->
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
<!-- Main -->
<script src="./dist/bundle.js"></script>
</body>
</html>
"Notice that we’re including files from within node_modules. React and React-DOM’s npm packages include standalone .js files that you can include in a web page, and we’re referencing them directly to get things moving faster. Feel free to copy these files to another directory, or alternatively, host them on a content delivery network (CDN). Facebook makes CDN-hosted versions of React available..."
I added the Dependancies to my index.html file and it sorted this issue.
Hopefully that helps someone else who stumbles across this.
I am trying to require a react React module on plnkr in the script.jsx file using :
var AptList = require('./AptList');
Which is giving a "require is not defined" error.
I would like to know how to require modules on plnkr ?
You are not using any bundler, everything is in the browser, so you have to first include the script for that AptList component in your index.html:
<script src="AptList.js"></script>
<script src="script.jsx"></script>
That will already include the definition for that component. You need not (and cannot) use require there.
In AptList.js you need not have module.exports = AptList; because it will already have been imported using the script tag above. Also, you should remove the require inside script.jsx.
Now, the other big issue is you are using JSX, which is not supported natively by the browser. For that, you will need Babel, so add the following the scripts in index.html:
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.js"></script>
Then, you have to add the following type to each script tag at the bottom, before the end of body:
<script type="text/babel" src="..."></script>
That will allow you to use ES6 syntax and JSX.
Here is the link to the plunk with everything working.
I have included the following scripts in my web application. But I get the error Backbone is undefined when I browse the page.
<script src="Scripts/modernizr-2.6.2.js"></script>
<script src="Scripts/jquery-1.9.1.js"></script>
<script src="Scripts/backbone.js"></script>
<script src="Scripts/underscore.js"></script>
<script src="Scripts/index.js"></script>
What is the problem?
The error “Backbone is undefined” suggests that somewhere in the JavaScript on the page, you’ve attempted to access the global variable Backbone before it’s defined.
Presumably, index.js is the file that contains the JavaScript you‘ve written, and contains the references to Backbone. As it’s included on the page after backbone.js, Backbone should be defined.
The Backbone documentation does describe underscore.js as a “hard dependency”, and the example application there includes underscore.js before backbone.js. So maybe it’ll work if you reverse the order of underscore.js and backbone.js:
<script src="Scripts/underscore.js"></script>
<script src="Scripts/backbone.js"></script>