Handlebars precompiled template returning error - javascript

I've created a js file from the following handlebars template:
<script id="profile-details-template" type="text/x-handlebars-template">
<h4>{{name}}</h4>
<p>{{{blurb}}}</p>
</script>
It's compile just fine. Unfortunately, when I try to load it into an html file. I get the following error:
Uncaught SyntaxError: Unexpected token (
Tried with an number of templates, but always get the same result.

Related

Generating file throws error: Unexpected token '&'

In a Nuxt project the files are compiled strangely. This leads to error messages in the console and in my case affects the tracking.
The following Console.log error message comes up:
"Uncaught SyntaxError: Unexpected token '&'".
That is the part which occurs the console error:
<script data-n-head="1" data-hid="tealium" type="text/javascript">
(function(a,b,c,d){a='//tags.tiqcdn.com/utag/tr //etc... </script>
I expect: a='//tags.tiqcdn...
The relevant nuxt.config.js part
{
hid: `tealium
innerHTML: `
(function(a,b,c,d){a='//tags.tiqcdn.com/utag/../utag.js';b=document;c='script';d=b. createElement(c);d.src=a;d.type='text/java'+c;d.async=true;a=b.getElementsByTagName(c)[0];a.parentNode.insertBefore(d,a);})();
`,
I use to build node v16.14.0 and npm 8.3.1.
What I have already tried:
I add nuxt-charset-module
https://www.npmjs.com/package/nuxt-charset-module to push the
<meta charset> to first of <head>.

I cannot find a way to use 'require' in html

I am now developing JS in html, but I'd got following error: Uncaught (in promise) ReferenceError: require is not defined.
The code is just simple subs = require("./subscriptions.json").subs;.
To solve this problem, I first tried module with import and got another errors.
<script type="module" src="subscribe.js"></script>
import { subs as subs } from "./subscriptions.json"; → Uncaught SyntaxError: Unexpected token '{'
import subs from "./subscriptions.json"; → Uncaught SyntaxError: Unexpected identifier
import * from "./subscriptions.json"; → Uncaught SyntaxError: Unexpected token '*'
import "./subscriptions.json"; → Uncaught SyntaxError: Unexpected string
This was same with "fs", a JS module, so I gave it up and tried to use require.js(2.3.6). But similarly, it threw errors.
<script data-main="subscribe.js" src="require.js"></script>
require(["./subscriptions.json"]); → Uncaught Error: Script error for "subscriptions.json"
require(["json!./subscriptions.json"]); → Uncaught Error: Script error for "json", needed by: json!subscriptions.json_unnormalized2 , Uncaught Error: Script error for "subscriptions.json" , Uncaught Error: Load timeout for modules: json!subscriptions.json_unnormalized2
require(["fs"]); → Uncaught Error: Script error for "fs"
What could be the problem in my code? When needed, I can share my full code.
ps. Actually I don't need to require or import something. I just want my independent JS files to share a json data. If there is a better way, share yours please. Thank you.
You can't use require in es6 modules. require is used in node.js and to read a json file in your browser side javascript you can use the fetch api in your javascript file and can get data from .json file and use it in HTML
fetch("test.json")
.then(response => response.json())
.then(json => console.log(json));

How to get rid of "Uncaught SyntaxError: Unexpected token <" in ReactJs?

Just started my ReactJS and stuck at my very first try. I have a very basic code that throws "Uncaught SyntaxError: Unexpected token <".
index.html
<!doctype html>
<head>
<title>My first ReactJs</title>
</head>
<body>
<div id="container"></div>
<script src="react.js"></script>
<script src="script.jsx"></script>
</body>
</html>
script.jsx
var MessageButton = React.createClass({
render: function(){
return (
<button>Hello World</button>
);
}
});
React.render(<MessageButton/>, document.getElementById("container"));
Assuming that it could be missing JSX transformer library, I searched for it but couldn't find download anywhere. I work offline most of the time, so I do not wish to use plunkr or jsbin. Could do with some help.
First: Specify the type attribute of your JSX scripts so the browser doesn't try to execute them as JavaScript.
<script type="text/jsx" src="script.jsx"></script>
Second:
Either:
Load the JSXTransformer script (which requires an older version of React)
or
Compile the JSX using Babel:
Example taken from the docs:
babel --presets react src --watch --out-dir build

When Loading html file with require.js error with extension

I have file
reg.html
<label>Name:</label>
in require.config :
requirejs.config({
paths: {
reg:"/templates/reg.html"
}
})
When i try load template :
define('ng_start',["angular","jquery","reg"],function(An,$,template){
....
})
GET /templates/registry.html.js?bust=1417489939824228.12310815788805
require.js:166 Uncaught Error: Script error for: registry
http://requirejs.org/docs/errors.html#scripterror
How deleted js extension from registry.html.js ?
You need to state that your "reg" module is to be loaded as text and not as a JavaScript module. See the following for details:
https://github.com/requirejs/text
Your specific code should read:
define('ng_start',["angular","jquery","text!reg"],function(An,$,template){
....
})
note: the addition of text! in the module definition requirements for reg.

How to execute javascript in django 1.6.5

I have defined class Media as:
class LtAdmin(admin.ModelAdmin):
form = LtForm
class Media:
js = ('javascript/lt/showhid_follow_up.js',)
This javascript code lies in django project folder:
/home/myself/mysite/static/javascript/lt/showhid_follow_up.js
settings.py contains:
STATIC_URL = '/static/'
Javascript is as follows:
jQuery(document).ready(function($){
alert('Hi');
});
Do I have to define MEDIA_URL to use this? Do I have to have a src in the javascript? If I add and , it displays error:
Uncaught SyntaxError: Unexpected token <
On removing this, error I get:
Uncaught TypeError: Property 'jQuery' of object [object Object] is not
a function
How do I resolve this problem? I have tried using FireFox as well as Chrome browsers
Am I missing some other settings?
jQuery is included already in Django admin, it's just under the django namespace. Passing in django.jQuery using an immediately invoking function allows you to use the more familiar $ shortcut instead of having to write django.jQuery all the time.
(function($) {
$(function() {
alert('Hi');
});
})(django.jQuery);

Categories

Resources