I download this project:
https://github.com/Tasarinan/editor-framework
I follow all steps:
1) I install Polymer and Electron (and other: phyton, nodejs ecc.)
2) Run all commands:
sh utils/npm.sh install
bower install
gulp update-electron
sh utils/install-builtin.sh
sh demo.sh
The project run fine, but when I open the Grid Panel I have this error:
Uncaught SyntaxError: Unexpected token ) (line 1)
Uncaught SyntaxError: Unexpected token ) (line 28)
ecc.
(() => { // (line 1)
//*************************
Editor.polymerElement({
properties: {
debugInfo: {
type: Object,
value: () => { return { // (Line 28)
xAxisScale: 0,
xMinLevel: 0,
xMaxLevel: 0,
yAxisScale: 0,
yMinLevel: 0,
yMaxLevel: 0,
}; },
},
This is the link of the code:
https://github.com/cocos-creator-packages/ui-grid/blob/master/widget/pixi-grid.js
I don't understand these commands ()=>{} What library I have to add??
Sorry for my bad english and thanks for Help.
Code ()=>{} is from new version of Javascript (ES6) called arrow functions
() => {} == function() {}
Some of the browsers doesn't support new version of javascript and you have to use polyfills. For example if you are using IE you won't be able to see that page.
Polymer has Polymer-cli that has built-in Polymer build command which can transform code into older version of javascript so all browsers can read the code.
Try to open the project in Chrome (fastest browser for such things like HTML imports)
Related
When I use optional chain and set Electron 12.0.2 in .browserslistrc, the project will failed to build.
in ./src/views/reader/reader.ts
Module parse failed: Unexpected token (15:29)
File was processed with these loaders:
* ./node_modules/cache-loader/dist/cjs.js
* ./node_modules/ts-loader/index.js
* ./node_modules/eslint-loader/index.js
You may need an additional loader to handle the result of these loaders.
| if (imgElement.length > 0) {
| console.log('imgElement', imgElement);
> return imgElement[0]?.classList;
| }
| return null;
# ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/ts-loader??ref--13-1!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/views/reader/reader-container.vue?vue&type=script&lang=ts&setup=true 4:0-43 121:12-27
# ./src/views/reader/reader-container.vue?vue&type=script&lang=ts&setup=true
# ./src/views/reader/reader-container.vue
# ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/ts-loader??ref--13-1!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/reader.vue?vue&type=script&lang=ts
# ./src/reader.vue?vue&type=script&lang=ts
# ./src/reader.vue
# ./src/reader-main.ts
# multi (webpack)-dev-server/client?http://192.168.1.3:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/reader-main.ts
In reader.ts
export function getImgFromPoint(container: HTMLDivElement, selector: string) {
const imgElement = document
.elementsFromPoint(container.getBoundingClientRect().width / 2, 100)
.filter((e) => {
return e.matches(selector);
});
if (imgElement.length > 0) {
console.log('imgElement', imgElement);
return imgElement[0]?.classList;
}
return null;
}
When I set .browserslistrc to
> 1%
last 2 versions
not dead
the project can built successfully.
I think some loader can't resolve ?. syntax, so the building failed.
And when I set .browserslistrc to
> 1%
last 2 versions
not dead
I think babel will transpile the ?., so the loader can handle it. While I set .browserslistrc to to Electron 12.0.2, babel don't transpile it while Electron 12.0.2 support it.
And before build the project when you changed the .browserslistrc, you need del node_modules/.cache folder. Otherwise the change won't take effect.
Anyone know which loader caused the parse fail and how can I solve it?
Thanks!
The problem is not caused by any loader but directly by Webpack 4.x (the issue - Webpack is using old version of Acorn library (to parse the code) which does not work with optional chaining or null coalescing syntax)
If you are not using Vue CLI you can upgrade to Webpack 5 to solve this. If you are using Vue CLI, upgrading to Webpack 5 "by hand" is not an option. You must upgrade to Vue CLI 5 (which is currently in the beta)
If you want (or have) to stay on Webpack 4, you have two options:
Configure Babel to use #babel/plugin-proposal-optional-chaining and #babel/plugin-proposal-nullish-coalescing-operator plugins
// babel.config.js
module.exports = {
presets: [
'#vue/cli-plugin-babel/preset',
],
plugins: [
'#babel/plugin-proposal-nullish-coalescing-operator',
'#babel/plugin-proposal-optional-chaining'
],
}
If you are using TypeScript, do not upgrade to version 3.8 or set compiler option target to es2019
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.
This morning i got an error with my NodeJS and babel configuration and i have already find the solution but i would like to understand why it happen ?
After building my app with "babel ./src -d ./lib" and then running it with "node lib/index.js" i got this error:
ReferenceError: regeneratorRuntime is not defined
I have found where is the probleme, this is about how i declared a new function:
async function loopIntercom (conversationId, splited) {
// code..
}
After changing the declaration for this new one:
const loopIntercom = async (conversationId, splited) => {
// code..
}
Everything working fine, but why is there a problem with the first method ?
Running mocha tests in node I'm getting the following syntax errors.
String Template: this one worked on 4.4, but is failing on 6.2.
/home/ubuntu/workspace/lib/admin.js:18
ROOT: `${homeDir}/.config`,
^
SyntaxError: Unexpected token ILLEGAL
full code:
var homeDir = os.homedir(),
configLocations = {
ROOT: `${homeDir}/.config`,
BASE: `${homeDir}/.config/nobjs`,
FILE: `${homeDir}/.config/nobjs/nobjs_config.json`
};
Default Parameter:
/home/ubuntu/workspace/lib/nobutil.js:4
function splitStringToArray(str, seperator = ','){
^
SyntaxError: Unexpected token =
These fail when I try to run mocha tests.
These seem to be supported.
All simple contrived examples seem to be working in the console. Is mocha the problem?
Thanks to #robertklep 's tip, it is a path problem, global mocha running the tests using system installed node on cloud9.
by installing mocha locally and prefixing my path so that mocha is resolved first, mocha calls my default nvm installed node.
export PATH=/home/ubuntu/workspace/node_modules/mocha/bin:$PATH
I'm trying to debug a React Native iOS project in Chrome, and I get a stack trace stating document is not defined. When I disable chrome debugging, the app works fine. I'm using react-native 0.14.2 in my package.json. When I try to enable debugging for any of the sample apps, I get the same error in chrome. I simply checked out the react framework from github, so I'm not using the 'react native' commands. Any ideas what could be wrong here? Below is the red box for how my screen looks when 'Chrome Debugging' is enabled. React redbox image below. Thanks!
When I check the the stack trace in chrome debugging this is the line it throws up on:
require("react-native/Examples/ViroSample/ViroSampleApp.ios.js");
Here is the full stack trace:
Document is not definedhandle Exception # ExceptionsManager.js:63
handleError #InitializeJavaScriptAppEngine.js:80
ErrorUtils.reportFatalError # error-guard.js:28
requireImpl # require.js:31
require # require.js:21
(anonymousfunction)#ViroSampleApp.ios.js.js:1
messageHandlers.executeApplicationScript # debuggerWorker.js:18
onmessage # debuggerWorker.js:42
Update
The offending code seems to be the following in ReactErrorUtils.js that is part of the react-haste module:
if (__DEV__) {
/**
* To help development we can get better devtools integration by simulating a
* real browser event.
*/
if (typeof window !== 'undefined' &&
typeof window.dispatchEvent === 'function' &&
typeof Event === 'function') {
var fakeNode = document.createElement('react');
ReactErrorUtils.invokeGuardedCallback = function(name, func, a, b) {
var boundFunc = func.bind(null, a, b);
fakeNode.addEventListener(name, boundFunc, false);
fakeNode.dispatchEvent(new Event(name));
fakeNode.removeEventListener(name, boundFunc, false);
};
}
}
This was a known bug in former (pre 0.14.2) react-native versions, if you recently updated reinstalling the node modules (rm -rf node_modules && npm install) and cleaning the haste cache (rm -rf $TMPDIR/react-*) should fix this.