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>
Related
When I build a project made in create-react-app and
He generates a html file with a path without the dot.
This is problematic because I have a blank page because of it.
I get an html file with an example of loading js
<script type="text/javascript" src="/static/js/mainsddss23ds.js"
but i need path with DOT, for example
<script type="text/javascript" src="./static/js/mainsddss23ds.js"
Set "homepage": ".", in package.json.
The build (npm run build) will output <script src="./static/js/mains*.js" />
The local dev server will still have <script src="/static/js/mains*.js" />
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.
[W][webpackJsonp]
Unlikely returned an reference error "WebpackJsonp not defined" in error popup.
I found one of Stackoverflow answered to put your vendor.js before main.js but unfortunately it's not work in my case.
Breaking Changes
This means that src/index.html must be modified to include a new vendor script tag . This new script tag must be placed above the main.js script tag. For exampl
<!-- Ionic's root component and where the app will load -->
<ion-app></ion-app>
<script src="cordova.js"></script>
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
<!-- all code from node_modules directory is here -->
<script src="build/vendor.js"></script>
<!-- The bundle js is generated during the build process -->
<script src="build/main.js"></script>
I am using dropwizard along with webjars to package my web dependencies. Relatively new to using dropwizard.
In my initialize() method in the Bootstrap application, I am loading my asset and web bundles as below
bootstrap.addBundle(new AssetsBundle("/webapp", "/ui", "index.html"));
bootstrap.addBundle(new WebJarBundle("org.webjars.bower", "org.webjars"));
In my index.html file I refer to my js dependencies as below
<!-- Third Party -->
<script src="/webjars/jquery/jquery.js"></script>
<script src="/webjars/angular/angular.js"></script>
<script src="/webjars/angular-ui-router/release/angular-ui-router.js"></script>
<script src="/webjars/lodash/dist/lodash.js"></script>
<script src="/webjars/bootstrap/js/bootstrap.js"></script>
<script src="/webjars/tether/tether.js"></script>
<script src="/webjars/devextreme/js/dx.all.js"></script>
<script src="/webjars/ngstorage/ngStorage.js"></script>
<!-- App Configuration -->
<script src="ui/app/app.module.js"></script>
<script src="ui/app/app.routing.js"></script>
<script src="ui/app/app.constants.js"></script>
<script src="ui/app/app.run.js"></script>
How do I find out the exact path to provide in index.html to refer to the js files. I tried unzipping the dependency jars but could not find any information to identify the path. For example angular-ui-router is under release folder while the other js files aren't.
I have included bootstrap version 4.0.0-alpha.6-1 and that required tether which I have also include in my pom.xml . I presume I am not referring the path for tether.js correctly in index.html. I see both the dependencies available in my fat jar. What should be the correct path, may be answer to #1 will help me resolve this question.
org.webjars tether 1.4.0
org.webjars bootstrap 4.0.0-alpha.6-1
**Error**
Uncaught Error: Bootstrap tooltips require Tether (http://tether.io/)
at bootstrap.js:2749
at bootstrap.js:3350
at bootstrap.js:3535
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>