I'm working with javascript file that has no window or document.
I have package.json file that calls another Javascript file task.js
package.json:
{
"name": "mytask",
"version": "1.0.0",
"description": "mytask TFS Build",
"main": "scripts/mytask.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"install": "npm install"
},
"repository": {},
"author": "OST",
"license": "ISC",
"dependencies": {
"https-proxy-agent": "1.0.0",
"jquery": "3.3.1",
"jsdom": "13.0.0",
"load-json-file": "^2.0.0",
"moment": "^2.22.2",
"object.values": "^1.0.4",
"request": "2.81.0",
"vso-node-api": "^5.1.2",
"vss-web-extension-sdk": "5.141.0",
"vsts-task-lib": "1.1.0"
}
}
TFS call javascript file exist in package.json "main" option.
package.json call mytask.js via "main" option and this javascript file will run as a task in TFS and print things to console.
Basically my issue that there's no HTML page or document so I cannot load javascript file through or document.addElement...
I need to load javascript file (VSS.SDK.js from vss-web-extension-sdk) to mytask.js.
I'm new in javascript so I don't really know what I'm doing wrong.
After long searching, I found "jsdom" which creates a global document. But still didn't know how to load VSS.SDK.js script.
mytask.js:
const jsdom = require("jsdom");
const { JSDOM } = jsdom;
const { window } = new JSDOM(`<!DOCTYPE html>`);
var jQuery = require("jquery")(window);
// Option 1
jQuery.loadScript = function (url, callback) {
jQuery.ajax({
url: url,
dataType: 'script',
success: callback,
fail: callback,
async: false
});
}
jQuery.loadScript('vss-web-extension-sdk/lib/VSS.SDK.js', function(){console.log("loaded!!!!!!!!!!!!!!!!!!!!")});
// Option 2
jQuery.getScript('vss-web-extension-sdk/lib/VSS.SDK.js').done(function(){console.log("loaded!!!!!!!!!!!!!")}).fail(function(){console.log("failed!!!!!!!!!!!!!!")});
// Option 3
jQuery.getScript('vss-web-extension-sdk/lib/VSS.SDK.js', function() {
VSS.init({explicitNotifyLoaded: true, usePlatformScripts: true, usePlatformStyles: false});
var serverContext = VSS.getWebContext();
});
I tried these three options but it didn't work! nothing was printed.
I use VSS.SDK to load webContext.
any ideas?
Related
My nodejs script was working perfectly fine the other day and now I'm getting this abort signal error below. The code is literally copied verbatim from the serpapi site. I had my own code that's slightly different but I get the same error even when just using the site's sample code. https://serpapi.com/google-lens-api. It seems to be a local issue because when I ran it standalone on Replit it seemed to be fine. My package json is below as well.
import { getJson } from "serpapi";
const params = {
url: "https://i.imgur.com/HBrB8p0.png",
api_key: "{xxx}"
};
// Show result as JSON
const response = await getJson("google_lens", params);
console.log(response["visual_matches"]);
"name": "cheerio",
"version": "1.0.0",
"description": "",
"main": "index.js",
"type": "module",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"#google-cloud/vision": "^3.1.1",
"axios": "^1.3.2",
"cheerio": "^1.0.0-rc.12",
"jimp": "^0.22.4",
"node-fetch": "^3.3.0",
"openai": "^3.1.0",
"serpapi": "^1.1.0"
signal: AbortSignal.timeout(timeout),
^
ReferenceError: AbortSignal is not defined
I am trying to load the Css, Images and fonts using the webpack. Here is my webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
mode: 'development',
output: {
filename: "main.js",
path: path.resolve(__dirname,"dist")
},
module:{
rules:[
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: "asset/resource",
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
type: "asset/resource",
},
],
},
};
This is my package.json
{
"name": "restaurant-page",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --watch",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^6.2.0",
"style-loader": "^3.2.1",
"webpack": "^5.51.1",
"webpack-cli": "^4.8.0"
},
"dependencies": {}
}
This is my index.js. When I uncomment the ./styles.css import I get the
main.js:290 Uncaught Error: Automatic publicPath is not supported in this browser in chrome console and my js imports doesn't work but it dosen't throw me error while building project when I run npm run build commmand in terminal. I tried using css import in each js module-- in home.js etc--file but that also doesn't work.
// import './style.css';
import { homeContent, removeIntroContent } from './Modules/home.js';
import { aboutContent, removeAboutContent } from './Modules/about.js';
import { reviewsContent, removeReviewContent } from './Modules/reviews.js';
const home = document.getElementById("home-btn");
const review = document.getElementById("review-btn");
const about = document.getElementById("about-btn");
homeContent();
home.addEventListener("click",()=>{
removeReviewContent();
removeAboutContent();
const id = document.getElementById("intro-content");
if(id != null) return;
homeContent();
});
review.addEventListener("click",()=>{
removeAboutContent();
removeIntroContent();
const id = document.getElementById("reviews");
if(id != null) return;
reviewsContent();
});
about.addEventListener("click",()=>{
removeReviewContent();
removeIntroContent();
const id = document.getElementById("about");
if(id != null) return;
aboutContent()
});
I have pushed the code to github if anyone want to look at file structure
Here is the link
ps: If I use the link tag to add css to html it works exactly as I want it to but that defeats the purpose of using webpack
I am having trouble with Webpack as well and I came across your question. I don't have a sure solution to your problem, but I hope to steer you in the right direction.
At first glance, I am wondering if editing your package.json file to use your webpack-config when you run 'npm run build' instead of the default webpack config. This could help activate the loaders you are trying to use, or atleast populate error messages that would allow you to investigate further. Editing your package.json would look like:
"scripts": {
"test": "echo \\\"Error: no test specified\\\" && exit 1",
"watch": "webpack --watch",
"build": "webpack --config ./webpack-config.js"
}
Your dependencies make sense and your file path for style.css seems correct, so I am wondering if Webpack does not know how to load your styles, fonts, images without your config file.
Can read more about Webpack configuration here.
https://webpack.js.org/configuration/
Hope I was able to help, good luck! If you have any further questions I'd be happy to help, as I'm learning Webpack too.
I have 3 'cdn' files.
Eg.
http://www.cdn.com/js/script1.js (size: 10KB)
http://www.cdn.com/js/script2.js (size: 2KB)
http://www.cdn.com/js/script3.js (size: 15KB)
I need to download the above 3 files & concat to 'script.js'.
By running gulp command i had created the 'script.js'.
But the first file(script1.js) is missing in 'script.js'. Other two files are there.
I had changed the order
i.e.
download(
[
"http://www.cdn.com/js/script2.js",(size: 2KB)
"http://www.cdn.com/js/script3.js",(size: 15KB)
"http://www.cdn.com/js/script1.js",(size: 10KB)
])
This time script3.js is missing, but script1.js is there.
My 'gulp.js' file
var gulp = require('gulp');
var del = require('del');
var download = require("gulp-download-stream");
var concat = require('gulp-concat');
var FileSystem = require('fs');
var PackageJSON = JSON.parse(FileSystem.readFileSync('package.json'));
var Destination = "cdn/"+PackageJSON.version;
gulp.task('clean', function()
{
return del([Destination]);
});
gulp.task('js', function()
{
download(
[
"http://www.cdn.com/js/script1.js",
"http://www.cdn.com/js/script2.js",
"http://www.cdn.com/js/script3.js",
])
.pipe(gulp.dest("temp/"));
return gulp.src("temp/*.js")
.pipe(concat('script.js'))
.pipe(gulp.dest(Destination+"/"));
});
gulp.task('default', ['clean','js']);
'package.json'
{
"name": "",
"version": "4.0.0",
"description": "",
"main": "",
"dependencies":
{
"gulp": "^3.9.1"
},
"devDependencies":
{
"del": "^3.0.0",
"gulp": "^3.9.1",
"gulp-concat": "^2.6.1",
"gulp-download-stream":"^0.0.1"
},
"scripts":
{
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Thanks in advance
You may have had this originally, but watch your trailing commas in the array:
download(
[
"http://www.cdn.com/js/script1.js",
"http://www.cdn.com/js/script2.js",
"http://www.cdn.com/js/script3.js"
])
I removed the last comma. Perhaps that is mucking up your download call.
I'm having some issues while trying to glue together this two things.
Let me give you some context: I'm trying to build a desktop application based on a web application that I've developed in react and it's fully operative and the build process of react is done without any errors nor issues. The problem comes when I try to glue Electron + a React Built Project.
I'm having the following structure:
/ dist
/ node_modules
/ react-mobx-router
/ build
/ static
/ js
main.05ef4655.js
/ css
main.9d8efafe.css
index.html
index.js
At the index.js i have the following code that's basically the sample boilerplate code from electron demo app:
'use strict';
const electron = require('electron');
const app = electron.app;
// adds debug features like hotkeys for triggering dev tools and reload
require('electron-debug')();
// prevent window being garbage collected
let mainWindow;
function onClosed() {
// dereference the window
// for multiple windows store them in an array
mainWindow = null;
}
function createMainWindow() {
const win = new electron.BrowserWindow({
width: 1280,
height: 720,
minWidth: 1280,
minHeight: 720
});
win.loadURL(`file://${__dirname}/react-mobx-router/build/index.html`);
//win.loadURL(`http://localhost:3000`);
win.on('closed', onClosed);
return win;
}
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (!mainWindow) {
mainWindow = createMainWindow();
}
});
app.on('ready', () => {
mainWindow = createMainWindow();
});
I also have to manually change some paths at the react built index.html so it will look like:
<link href="./static/css/main.9d8efafe.css" rel="stylesheet">
instead of:
<link href="/static/css/main.9d8efafe.css" rel="stylesheet">
The second one get's the following errors:
file:///D:/static/css/main.9d8efafe.css Failed to load resource: net::ERR_FILE_NOT_FOUND
main.05ef4655.js Failed to load resource: net::ERR_FILE_NOT_FOUND
The point is that, when I launch the Electron app with yarn start (changing the paths I've told you previously) it launches without any error nor issue but only a blank screen, if I go to the files and look for them, they are correct and the code is inside, bundled and all that react-create-app stuff does.
This is the default configuration of the package.json that comes with Electron and I haven't modified:
{
"name": "app",
"productName": "App",
"version": "0.0.0",
"description": "",
"license": "MIT",
"repository": "user/repo",
"author": {
"name": "",
"email": "",
"url": ""
},
"scripts": {
"test": "xo",
"start": "electron .",
"build": "electron-packager . --out=dist --asar --overwrite --all"
},
"files": [
"index.js",
"index.html",
"index.css"
],
"keywords": [
"electron-app",
"electron"
],
"dependencies": {
"electron-debug": "^1.0.0"
},
"devDependencies": {
"devtron": "^1.1.0",
"electron-packager": "^8.0.0",
"electron": "^1.0.1",
"xo": "^0.16.0"
},
"xo": {
"esnext": true,
"envs": [
"node",
"browser"
]
}
}
Also this is the package.json of my React Project:
{
"name": "react-mobx",
"version": "0.1.0",
"private": true,
"devDependencies": {
"custom-react-scripts": "0.0.23",
"mobx-react-devtools": "^4.2.11"
},
"dependencies": {
"mobx": "^3.1.4",
"mobx-react": "^4.1.2",
"mobx-react-router": "latest",
"react": "^15.4.2",
"react-dom": "^15.4.2",
"react-router": "latest"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Note that the React App is fully functional if I don't make use of Electron.
That's why I ask for your wisdom, mates. I need some light here so I can keep moving on with this project. Hope you can help me with this issue and I've provided you with enough information. If you need more info, just let me know.
Warm regards,
Alex.
I'm no React hero (by a long chalk) but I am able to run, hot reload and release build using the schema set out by this boilerplate: electron-es6-react. I added some conditional code to main.js (below) for builds. There are no doubt much better solutions.
You definitely need to merge your React package.json with Electron's.
var isDev = process.env.APP_DEV ? (process.env.APP_DEV.trim() == "true") : false;
if (isDev) {
// only add this during development
require('electron-reload')(__dirname, {
electron: path.join(__dirname, 'node_modules', '.bin', 'electron')
});
}
package.json
{
"name": "electron-es6-react",
"version": "0.1.0",
"description": "template",
"license": "MIT",
"production": false,
"version-string": {
"CompanyName": "Cool Co.",
"FileDescription": "template",
"OriginalFilename": "template",
"ProductName": "template",
"InternalName": "template"
},
"main": "main.js",
"scripts": {
"start": "APP_DEV=true electron -r babel-register .",
"package-mac": "electron-packager . --overwrite --tmpdir=false --platform=darwin --arch=x64 --prune=true --out=release-builds",
"package-win": "electron-packager . --overwrite --tmpdir=false --asar=true --platform=win32 --arch=ia32 --prune=true --out=release-builds"
},
"dependencies": {
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-register": "^6.3.13",
"fs-jetpack": "^0.12.0",
"react": "^15.3.2",
"react-dom": "^15.3.2",
"react-images": "^0.5.2"
},
"devDependencies": {
"electron": "^1.4.3",
"electron-packager": "^8.5.2",
"electron-reload": "^1.1.0"
}
}
I'm new on using AVA for JS unit tests and I immediately hit a rock:
My situation is that I want to run a gulp task to run the AVA tests and watch the test files, and in the test file I wrote I need to include the js file that contains the code to test.
The problem is that the file with the code to test is an old js file with all global functions, so needs to be shimmed somehow into an AMD module, but how I can do this without changing the original file?
gulpfile.js
var gulp = require("gulp");
var ava = require("gulp-ava");
var srcUnitTestFiles = ["**/*.tests.js", "!node_modules/*.js"];
gulp.task("unit-tests-exec", () =>
gulp.src(srcUnitTestFiles)
// gulp-ava needs filepaths so you can't have any plugins before it
.pipe(ava({ verbose: true }))
);
gulp.task("unit-tests-watch", () =>
gulp.watch(srcUnitTestFiles, ["unit-tests-exec"])
);
package.json
{
"name": "name",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "ava"
},
"author": "",
"license": "ISC",
"devDependencies": {
"ava": "^0.16.0",
"gulp": "^3.9.1",
"gulp-ava": "^0.14.0",
"jsdom": "^9.4.2"
},
"ava": {
"require": [
"./test/helpers/setup-browser-env.js"
]
}
}
firstTest.tests.js
import test from "ava";
// I need to import the js file to test
test.before(t => {
});
test("foo", t => {
t.pass();
});
test('bar', async t => {
const bar = Promise.resolve('bar');
t.is(await bar, 'bar');
});
Thanks!
I think you mean UMD, not AMD. AMD wouldn't work.
I suggest you follow our recipe on browser testing with jsdom.
You could do the following at the top:
global.document = require('jsdom').jsdom('<body></body>');
global.window = document.defaultView;
require('./your-lib');
And then you can access your library on the window global:
window.yourLib();
With yourLib being the method you attached to window in your library.