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.
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'm using react with their CDN scripts (as well as react-dom and babel-standalone) that I've saved out to some files due to security practices with network connectivity, and am trying to figure out code organization.
Disclaimer: I'm aware that I need webpack or something to compile to get access to require or normal imports. I'm wondering if there's a way to organize my components without having to add a script tag in my main html for every single file.
The error that I'm getting is Uncaught ReferenceError: require is not defined. The research that I've done is saying that I need to add each file used by my other javascript with a tag in the html. This is cumbersome especially if I have a large(ish) project. It's not scalable. How can I organize the various components that I have without having to have a massive head section with all of the wonderful script tags?
I've seen some hacks, but they're older and with the advent of new react versions and browser capabilities, so I thought I'd try and see what is being used out there to solve this problem now.
p.s. this is the first experience I have with React CDN, but I've written apps in RN before.
My code is:
<html>
<head>
<script src="react.js" />
<script src="react-dom.js" />
<script src="babel.js" />
<script type="text/jsx" src="app.js" />
</head>
<body>
<div id="root" />
</body>
</html>
app.js
import Greeting from './greeting';
const App = () => {
return (
<Greeting text='Hello World' />
);
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
greeting.js
const Greeting = ({ text }) => {
return (
<h1>{text}</h1>
);
}
export default Greeting;
You cannot use React or JSX in the browser without some sort of build step. React only distributes CJS, no ESM, so it needs build tooling. Babel is used to transpile, though I'm not entirely sure it makes sense to use in this context. It's a lot of overhead.
Take a look at https://blog.jim-nielsen.com/2020/react-without-build-tools/ if you want to go the no-build tools route.
You'll have to use alternative versions of React as well as alternative syntax to JSX.
Try this
NOTE: Only when you proper setup of webpack and babel. require is required of cjs modules.
if you have done your setup try following.
1. const module = require('modulename') only when module is exports as modules.export = modulename
2. Try adding this plugin babel-plugin-import in your babel config
Importing greatings.js in app.js won't work. Instead, you import all the javascript files that you are using in the HTML file only then it would work.
<script type="text/babel" src="greatings.js"></script>
in the HTML file.
Hi I downloaded react from node and deleted everything in src, then I created 3 files. Index.html, index. js and styles.css. I then select the src folder and opened it as a brackets project. I import React and ReactDOM. Then on the node terminal I did npm run and the header element in the js file showed up. Then I added a header element in the HTML. On the live preview on brackets only the HTML header shows up and on the React window only the react header shows up. Does anyone understand what is going on, because I have spent hours trying to sort this out. There is a script reference in the HTML.
EDIT: I put the HTML file in the public folder and have type="text/jsx" references in the html but when I do live preview (not from localhost) only the html shows up. Is this normal? Also nothing is auto updating, I have to save for the changes to show... When I enter in localhost then all the html and react headers are visible. I have been working on this all day and I feel like there is a simple fix that I am not seeing.
Edit 2 : Added code
import React from "react"
import ReactDOM from "react-dom"
ReactDOM.render(<h1>this is REACT</h1>, document.getElementById("root"))
<!DOCTYPE html>
<html lang="en">
<head>
<link type="text/css" href="../src/styles.css" rel="stylesheet">
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>this is header text from html...................</h1>
<h1>this is another headerfrom html</h1>
<div id="root"></div>
<script type="text/jsx" src="../src/App.js"></script>
<script type="text/jsx" src="../src/index.js"></script>
</body>
your src folder should have index.js and App.js and other JS and CSS files but not HTML file, the HTML file should be inside your public folder. similar to the picture
This will help you to install / setup react in your local with your preferred text editor.
link: https://reactjs.org/tutorial/tutorial.html#setup-option-2-local-development-environment
I have a Django project and I want to use React on it. I have already created my own components and this works, but I dont know how to import third-party components from CDN.
To do this, I did:
Import React (develop or production version) in the base template:
<!-- baseTemplate.html -->
{# ReactJs#}
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
Also import the file where I create my components
<!-- baseTemplate.html -->
<script src="/one_directory/my_react.jsx" type="text/babel"></script>
and create the tag where it will be rendered.
<!-- template.html -->
<div id="container"></div>
And finally render my React components:
<!-- my_react.jsx -->
ReactDOM.render(
<App />,
document.getElementById('container')
);
This works correctly :)
Now, I want to import a third-party component (specifically, it's React Bootstrap Slider) from CDN, but I dont know how.
Maybe this is not possible, I dont know. How could I do it?
Thank you very much :]
I think you want a CDN from this npm package https://www.npmjs.com/package/react-bootstrap-slider (version 2.1.3)
There is a CDN at https://unpkg.com/react-bootstrap-slider
You can explore files for that at https://unpkg.com/react-bootstrap-slider/
However I could not get it to work as I get Component not found error.
In the github project https://github.com/brownieboy/react-bootstrap-slider it says
The control is implemented in UMD format, so should also work for
AMD/RequireJS, but I've not tested that. You can also add it as a
script tag.
If you want a CDN I you suggest to inform the owner to fix it or you can fork the project and generate a CDN-friendly file and host it yourself.
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>