Unable to run Jest tests. Getting Error unexpected token { - javascript

I am unable run tests using jest. Writing tests for react application. Getting following error :-
node_modules\bootstrap\dist\css\bootstrap.min.css:5
*//*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css
*/html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjus
t:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgrou
p,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{displa
y:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height
:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hove
r{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{fo
nt-style:italic}h1{margin:.67em 0;font-size:2em}mark{color:#000;background:#ff0}
small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertic
al-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){ov
erflow:hidden}figure{margin:1em 40px}hr{height:0;-webkit-box-sizing:content-box;
-moz-box-sizing
SyntaxError: Unexpected token {
at transformAndBuildScript (node_modules\jest-cli\node_modules\jest-runtim
e\build\transform.js:320:12)

Saroj,
You're getting the error: "Unexpected token {" because you have not closed the last curly brace in the sample you've provided. Simply add a curly brace at the end of your last css style on the element "hr" and you will no longer see this error.
hr {height:0;
-webkit-box-sizing:content-box;
-moz-box-sizing
}

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>.

Is there a way of ignoring errors for assets on Vue build?

I'm building a Vue project including some static files. For serving it locally, I've set this on package.json:
{
...
"eslintConfig": {
...
"ignorePatterns": [
"**/vendor/*.js"
]
}
...
}
and it works fine. But when I try to build it with npm run build, I get the following:
- Building for production...
[BABEL] Note: The code generator has deoptimised the styling of /app/src/assets/vendor/fontawesome-free-5.15.3-web/js/all.min.js as it exceeds the max of 500KB.
ERROR Failed to compile with 2 errors
error in ./src/assets/vendor/bootstrap-4.6.0/bootstrap.bundle.min.js
Module Error (from ./node_modules/thread-loader/dist/cjs.js):
/app/src/assets/vendor/bootstrap-4.6.0/bootstrap.bundle.min.js
6:144 error 'define' is not defined no-undef
6:157 error 'define' is not defined no-undef
6:234 error 'globalThis' is not defined no-undef
6:723 error 'a' is a function no-func-assign
6:27968 error Empty block statement no-empty
6:36778 error Unnecessary escape character: \- no-useless-escape
6:37519 error Unnecessary escape character: \- no-useless-escape
6:68065 error 'n' is defined but never used no-unused-vars
✖ 8 problems (8 errors, 0 warnings)
The 2 errors are for these assets, both are similar. Is there a way of skipping these errors on build? It seems like a linting issue only.
if your config file includes this statement, you can try to commend out this line:
"extends": "eslint:recommended"

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));

Tesseract.js spread syntax (ellipsis) error "Unexpected token ..."

I am trying to use the tesseract.js package in a node app. I am starting with a basic example from the documentation:
Tesseract = require("tesseract.js");
Tesseract.recognize(
'https://tesseract.projectnaptha.com/img/eng_bw.png',
'eng',
{ logger: m => console.log(m) }
).then(({ data: { text } }) => {
console.log(text);
})
However, running this app (in Heroku) yields the following error:
/app/node_modules/tesseract.js/src/index.js:24
...Tesseract,
^^^
SyntaxError: Unexpected token ...
at createScript (vm.js:56:10)
I am trying to resolve this error. There is a "..." in this index.js file in the package code - any ideas why this would be causing a problem? Not sure if I should submit an "issue" about it.
Duh, the problem seems to have been that my Heroku app was using a very outdated version of node, which I found by running
heroku run bash
node -v
I have updated it and everything works fine.

Is this $parse:syntax error coming from my code or the angular library?

The error message says: "Syntax Error: Token 'false' is an unexpected token at column 8 of the expression [return] starting at [{4}]."
But the stacktrace in the browser console shows this:
Error: [$parse:syntax] http://errors.angularjs.org/1.4.8/$parse/syntax?p0=false&p1=is%20an%20unexpected%20token&p2=8&p3=returnNaNalse%3B&p4=false%3B
at Error (native)
at http://localhost:34574/libraries/angular/1.4.8/angular.min.js:6:416
at Object.s.throwError (http://localhost:34574/libraries/angular/1.4.8/angular.min.js:210:32)
at Object.s.ast (http://localhost:34574/libraries/angular/1.4.8/angular.min.js:202:296)
at Object.rd.compile (http://localhost:34574/libraries/angular/1.4.8/angular.min.js:211:406)
at gc.parse (http://localhost:34574/libraries/angular/1.4.8/angular.min.js:238:281)
at http://localhost:34574/libraries/angular/1.4.8/angular.min.js:117:338
at Object.compile (http://localhost:34574/libraries/angular/1.4.8/angular.min.js:254:1)
at Z (http://localhost:34574/libraries/angular/1.4.8/angular.min.js:65:275)
at O (http://localhost:34574/libraries/angular/1.4.8/angular.min.js:55:235)
The stacktrace only makes references to angular.min.js and I'm not sure if this is because the error is really in the library file or if the error is somewhere else and just showing up in the library. If it's the latter, how do I debug this?
$parse is responsible for transforming expressions like {{obj[0]}} to javascript objects/functions.
This is quite usual type of error. It comes from your html template. Some expression has wrong syntax. I.e.:
ng-class="{{'a' : a}" will give same type of error.

Categories

Resources