Unexpected token in jsdom when used with babel and npx - javascript

I want to do some tests on canvas purely in node.js.
This is my package.json
{
"name": "test",
"description": "Test",
"version": "0.1.0",
"author": "anthony#work",
"dependencies": {
"canvas": "^1.6.7",
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-stage-0": "^6.24.1",
"jsdom": "^11.3.0"
}
}
This is my .babelrc
{
"presets": ["env", "stage-0"]
}
This is my test javascript (a.js)
const { jsdom } = require('jsdom');
// main
jsdom();
console.log('done')
When I run the script, however,
npx babel a.js | nodejs -- -
I get this error:
/work/node_modules/jsdom/lib/api.js:10
const { URL } = require("whatwg-url");
^
SyntaxError: Unexpected token {
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:374:25)
at Object.Module._extensions..js (module.js:417:10)
at Module.load (module.js:344:32)
at Function.Module._load (module.js:301:12)
at Module.require (module.js:354:17)
at require (internal/module.js:12:17)
at [stdin]:3:16
at Object.exports.runInThisContext (vm.js:54:17)
at Object.<anonymous> ([stdin]-wrapper:6:22)
What causes this error? How can I fix this error?
Version information:
Node.js: v4.2.6
OS: Ubuntu 16.04

You are running an incompatible node version with jsdom.
jsdom#10 requires nodejs v6. So either upgrade Node or downgrade jsdom.
Found info about that here: https://github.com/tmpvar/jsdom#jsdom

Related

remark-cli "Cannot use import statement outside a module"

I'm creating a documentation project which I npm init'd. This is the relevant part of my package.json
"scripts": {
"lint": "remark --quiet --frail ."
},
"type": "module",
"dependencies": {
"remark-cli": "^10.0.0",
"remark-preset-lint-markdown-style-guide": "^5.0.0"
},
I would now like to lint the Markdown files with remark-cli:
`remark --quiet --frail .`
This is the error I'm getting:
<...>/node_modules/remark-cli/cli.js:2
import {createRequire} from 'node:module'
^^^^^^
SyntaxError: Cannot use import statement outside a module
at Module._compile (internal/modules/cjs/loader.js:895:18)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
at Module.load (internal/modules/cjs/loader.js:815:32)
at Function.Module._load (internal/modules/cjs/loader.js:727:14)
at Function.Module.runMain (internal/modules/cjs/loader.js:1047:10)
at internal/main/run_main_module.js:17:11
I thought adding "type": "module" to package.json would solve this but no luck.
What am I doing wrong here?

Uncaught ReferenceError: require is not defined at Object.url Electron-React-Typescrypt

How to properly use import statement?
This is my very basic electron-react starter :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
Using node Chrome and Electron
</body>
</html>
package.json :
{
"name": "react-ggc",
"version": "1.0.0",
"main": "main.js",
"license": "MIT",
"devDependencies": {
"electron": "^10.1.2",
"typescript": "^4.0.3"
},
"scripts": {
"start": "electron ."
},
"dependencies": {
"react": "^16.13.1"
}
}
main.js :
const {app, BrowserWindow} = require('electron')
//import { app, BrowserWindow } from 'electron'
async function createWindow () {
// Create the browser window
win = new BrowserWindow({width: 800, height: 600})
// and load the index.html of the app.
win.loadURL ('http://localhost:3000/')
win.webContents.openDevTools()
}
app.on('ready', createWindow)
Running yarn electron . I have no problems at all :
(base) marco#pc01:~/webMatters/electronMatters/react-ggc$ yarn electron .
yarn run v1.22.5
$ /home/marco/webMatters/electronMatters/react-ggc/node_modules/.bin/electron .
But when I add "type": "module" to package.json which, based on what I read around, should indicate that every .js files are considered modules, and modify in main.js the way of importing :
package.json :
{
"type": "module",
"name": "react-ggc",
"version": "1.0.0",
"main": "main.js",
"license": "MIT",
"devDependencies": {
"electron": "^10.1.2",
"typescript": "^4.0.3"
},
"scripts": {
"start": "electron ."
},
"dependencies": {
"react": "^16.13.1"
}
}
main.js :
//const {app, BrowserWindow} = require('electron')
import { app, BrowserWindow } from 'electron'
I get this error:
(base) marco#pc01:~/webMatters/electronMatters/react-ggc$ yarn electron .
yarn run v1.22.5
$ /home/marco/webMatters/electronMatters/react-ggc/node_modules/.bin/electron .
App threw an error during load
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /home/marco/webMatters
/electronMatters/react-ggc/main.js
require() of ES modules is not supported.
require() of /home/marco/webMatters/electronMatters/react-ggc/main.js from /home/marco
/webMatters/electronMatters/react-ggc/node_modules/electron/dist/resources/default_app.asar
/main.js is an ES module file as it is a .js file whose nearest parent
package.json contains "type": "module" which defines all .js files in
that package scope as ES modules.
Instead rename /home/marco/webMatters/electronMatters/react-
ggc/main.js to end in .cjs, change the requiring code to use import(),
or remove "type": "module" from /home/marco/webMatters/electronMatters
/react-ggc/package.json.
at Object.Module._extensions..js (internal/modules
/cjs/loader.js:1162:13)
at Module.load (internal/modules/cjs/loader.js:981:32)
at Module._load (internal/modules/cjs/loader.js:881:14)
at Function.Module._load (electron/js2c/asar.js:769:28)
at loadApplicationPackage (/home/marco/webMatters/electronMatters
/react-ggc/node_modules/electron/dist/resources/default_app.asar
/main.js:109:16)
at Object.<anonymous> (/home/marco/webMatters/electronMatters
/react-ggc/node_modules/electron/dist/resources/default_app.asar
/main.js:155:9)
at Module._compile (internal/modules/cjs/loader.js:1145:30)
at Object.Module._extensions..js (internal/modules
/cjs/loader.js:1166:10)
at Module.load (internal/modules/cjs/loader.js:981:32)
at Module._load (internal/modules/cjs/loader.js:881:14)
A JavaScript error occurred in the main process
Uncaught Exception:
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module:
/home/marco/webMatters/electronMatters/react-ggc/main.js
require() of ES modules is not supported.
require() of /home/marco/webMatters/electronMatters/react-ggc/main.js
from /home/marco/webMatters/electronMatters/react-ggc/node_modules
/electron/dist/resources/default_app.asar/main.js is an ES module file
as it is a .js file whose nearest parent package.json contains "type":
"module" which defines all .js files in that package scope as ES
modules.
Instead rename /home/marco/webMatters/electronMatters/react-
ggc/main.js to end in .cjs,
change the requiring code to use import(), or remove "type":
"module" from /home/marco
/webMatters/electronMatters/react-ggc/package.json.
at Object.Module._extensions..js (internal/modules
/cjs/loader.js:1162:13)
at Module.load (internal/modules/cjs/loader.js:981:32)
at Module._load (internal/modules/cjs/loader.js:881:14)
at Function.Module._load (electron/js2c/asar.js:769:28)
at loadApplicationPackage (/home/marco/webMatters
/electronMatters/react-ggc/node_modules
/electron/dist/resources/default_app.asar/main.js:109:16)
at Object.<anonymous> (/home/marco/webMatters/electronMatters
/react-ggc/node_modules
/electron/dist/resources/default_app.asar/main.js:155:9)
at Module._compile (internal/modules/cjs/loader.js:1145:30)
at Object.Module._extensions..js (internal/modules
/cjs/loader.js:1166:10)
at Module.load (internal/modules/cjs/loader.js:981:32)
at Module._load (internal/modules/cjs/loader.js:881:14)
node version: v14.5.0
How to solve the problem?
for this you need to add webPreferences for creating window.
app.on('ready', () => {
window = new BrowserWindow({
width: 900,
height: 680,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
}
});
});

webpack and babel configuration for normal javascript project is failing

I'm doing this simple setup with webpack and Babel for simple javascript project. I've tried so many examples but nothing is working.
These are my settings :
{
"name": "webpack_babel-prac",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --config webpack.config.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.0.4",
"babel-preset-env": "^1.7.0",
"webpack": "^4.27.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
}
}
CONFIGURATION FILE
const path = require('path');
module.exports={
entry:{
app:'./src/app.js'
},
output:{
path:path.resolve(__dirname,'build'),
filename:'bundle.js'
},
mode:'development',
module:{
rules:[{
test:/\.js?$/,
exclude:/node_modules/,
loader:'babel-loader',
options:{
presets:['babel-preset-env ']
}
}]
}
}
I'm getting this error while i'm running the npm run build command:
ERROR in ./src/app.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '#babel/core'
babel-loader#8 requires Babel 7.x (the package '#babel/core'). If you'd
like
to use Babel 6.x ('babel-core'), you should install 'babel-loader#7'.
at Function.Module._resolveFilename (module.js:548:15)
at Function.Module._load (module.js:475:25)
at Module.require (module.js:597:17)
at require (C:\Users\ABCD\Music\Webpack_Babel prac\node_modules\v8-compile-
cache\v8-compile-cache.js:159:20)
at Object.<anonymous> (C:\Users\ABCD\Music\Webpack_Babel
prac\node_modules\babel-loader\lib\index.js:10:11)
at Module._compile (C:\Users\ABCD\Music\Webpack_Babel prac\node_modules\v8-
compile-cache\v8-compile-cache.js:178:30)
at Object.Module._extensions..js (module.js:664:10)
at Module.load (module.js:566:32)
at tryModuleLoad (module.js:506:12)
at Function.Module._load (module.js:498:3)
at Module.require (module.js:597:17)
I've gone through so many tutorials and also tried this medium article but nothing is working. https://medium.com/#jeffrey.allen.lewis/the-ultimate-2018-webpack-4-and-babel-setup-guide-npm-yarn-dependencies-compared-entry-points-866b577da6a

TypeError: firebase.auth(...).onAuthStateChanged is not a function

I am trying to use the onAuthStateChanged trigger but I am getting "is not a function" when using "firebase deploy".
when executing :
firebase deploy
I got the following error:
Error: Error occurred while parsing your function triggers.
TypeError: firebase.auth(...).onAuthStateChanged is not a function
at Object.<anonymous> (/home/ihab/Desktop/BlueDot/bluedot/functions/index.js:33:17)
at Module._compile (module.js:643:30)
at Object.Module._extensions..js (module.js:654:10)
at Module.load (module.js:556:32)
at tryModuleLoad (module.js:499:12)
at Function.Module._load (module.js:491:3)
at Module.require (module.js:587:17)
at require (internal/module.js:11:18)
at /usr/lib/node_modules/firebase-tools/lib/triggerParser.js:18:11
at Object.<anonymous> (/usr/lib/node_modules/firebase-tools/lib>/triggerParser.js:38:3)
at Module._compile (module.js:643:30)
at Object.Module._extensions..js (module.js:654:10)
at Module.load (module.js:556:32)
at tryModuleLoad (module.js:499:12)
at Function.Module._load (module.js:491:3)
at Function.Module.runMain (module.js:684:10)
I have also tried firebase.default.auth.onAuthStateChanged as mentionned in the solution posted by Joao Lopes in this question ut it gave the same error!
I have already my domain added Firebase project>Authentication>Sign-In Method>Authorized Domains.
I am using:Ubuntu 16.04,npm 5.6.0,Firebase Spark.
Here is my package.json:
{
"name": "functions",
"description": "Cloud Functions for Firebase",
"scripts": {
"serve": "firebase serve --only functions",
"shell": "firebase experimental:functions:shell",
"start": "npm run shell",
"deploy": "firebase deploy --only functions",
"logs": "firebase functions:log"
},
"dependencies": {
"consolidate": "^0.15.0",
"express": "^4.16.2",
"firebase-admin": "^5.8.2",
"firebase-functions": "^0.8.1",
"handlebars": "^4.0.11"
},
"private": true
}
and my index.js:
const functions = require('firebase-functions');
const firebase=require('firebase-admin');
const express=require('express');
const engines=require('consolidate');
firebase.initializeApp(functions.config().firebase);
const app=express();
app.engine('hbs',engines.handlebars);
app.set('views','./views');
app.set('view engine','hbs');
app.get('/',(req,res)=>{
res.render('index',{Loginsignup:"LoginSignup"});
});
/*Here is the probleme*/
firebase.auth().onAuthStateChanged(function(user) {
user.sendEmailVerification();
if(!auth.currentUser.emailVerified){
user.sendEmailVerification();
console.log('signed in');
}
});
/********************/
exports.app = functions.https.onRequest(app);
So what am I missing?
There is no onAuthStateChanged function in the firebase-admin SDK. This function is available only in the client-side package.
Firebase Admin Auth Reference: https://firebase.google.com/docs/reference/admin/node/admin.auth.Auth
Firebase Javascript Auth Reference: https://firebase.google.com/docs/reference/js/firebase.auth.Auth
You're trying to login with the admin SDK.
onAuthStateChanged dosen't reside here. https://firebase.google.com/docs/reference/admin/node/admin.auth
Start by adding the firebase client package to your project.
$ npm install firebase --save
and change const firebase=require('firebase-admin'); => const firebase=require('firebase');
That might be sufficient. Not sure if you need to pass diffrent credentials to initializeApp() once it's on the client side.
Here's the authoriziation in the client documentation.
https://firebase.google.com/docs/reference/node/firebase.auth.Auth

React Native unit testing with ava

I've tried following the simple setup from here regarding unit testing js code with AVA, but I am doing something wrong because the setup doesn't seem to be taken into consideration.
Exception:
ReferenceError: __DEV__ is not defined
at Object.<anonymous> (D:\Vs\app\node_modules\react-native\Libraries\react-native\react-native.js:15:5)
at Module._compile (module.js:409:26)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
I have a tests folder in the root of my RN project.
My _Setup.js file looks like this:
import mockery from 'mockery'
// inject __DEV__
global.__DEV__ = true
__DEV__ = true
// We enable mockery and leave it on.
mockery.enable()
// Silence mockery's warnings as we'll opt-in to mocks instead
mockery.warnOnUnregistered(false)
My relevant part of package.json looks like
"ava": {
"babel": "inherit",
"files": [
"tests/**/*.js"
],
"require": [
"babel-register",
"babel-polyfill",
"react-native-mock/mock"
]
},
"devDependencies": {
"ava": "^0.15.2",
"babel-polyfill": "^6.9.1",
"babel-register": "^6.9.0",
"enzyme": "^2.4.1",
"mockery": "^1.7.0",
"nyc": "^7.0.0",
"react-addons-test-utils": "^15.2.1",
"react-dom": "^15.2.1",
"react-native-mock": "^0.2.4"
}
Test file:
import test from 'ava'
import smth from '../app/components/LoadingSpinner'
test('returns 1', t => {
t.is(1, smth())
})
.babelrc only has
{
"presets" : ["react-native"]
}
Any hints are appreciated! Thanks :D!
The whole problem was solved once I updated my node to 6.x.x
This aspect is now mentioned in the article :)

Categories