Pls. can anyone help on this?
enter image description here
What is that two dots under require? and its not showing output result?
enter image description here
When trying to type in the output terminal, its not typing anything?
Thanks.
I am trying this code today and i could not give the user input.
When you bring your cursor to dots you can see message like this:
File is a CommonJS module; it may be converted to an ES module.
You can either use Quick Fix or change your import like this:
import readline from "readline";
Also, do not forget to add "type": "module", to your package.json
Edit
In your code you imported readline as rLine but while you are creating interface you used it as readline.createInterface() you should update your code like this:
import readline from "readline";
var rl = readline.createInterface(process.stdin, process.stdout);
rl.question("What is your name?\n", (answer) => {
console.log(answer);
});
Related
I am trying to upload an image for E2E testing but could succeed
First of all, I have installed
npm install --save-dev cypress-file-upload
and then using page object model
setting_page.js enter image description here
export class SettingPage {
doc_uploadImage=('#fileDocument')
uploadimage(){
cy.get(this.uploadimage).attachFile('D:\Cypress(Projects)\Agorz_Automation_Project\cypress\fixtures\images.jpg')}
}
Demo.js
import { SettingPage } from "./Pages/setting_page"
import 'cypress-file-upload'
const settingpage = new SettingPage()
it.only('upload file', function () {
settingpage.uploadimage()
})
Error message screen is attached hereenter image description here
I want to upload an image for testing purposes, you're help will be highly appreciated in this regard.
The error statement is clear which means that your given path is invalid.
Could you try moving the image file to your testing project instead like this?
.attachFile('images.jpg')}
cypress-file-upload "recognizes cy.fixture format, so usually this is just a file name." This means that anything that lives in your cypress/fixture directory can be referenced by a relative file path.
cy.get(this.uploadimage)
.attachFile('images.jpg');
If you are wanting to use the cypress-file-upload plugin to be uploading a file in cypress you should use the attachFile command provided by the plugin
Using it to upload an image would look something like this
const filePath = 'path/to/image.jpg';
cy.get('#fileInput').attachFile(filePath);
Also in your code you are trying to use the attachFile command on an element you are selecting using this.uploadimage but that is a string that corresponds to the selector #fileDocument but that is not valid for the attachFile command.
here is what you could try to fix this, you could use the cy.get command to select the file input, then use the attachFile command on it.
export class SettingPage {
doc_uploadImage = '#fileDocument';
uploadimage() { cy.get(this.doc_uploadImage).attachFile('D:\Cypress(Projects)\Agorz_Automation_Project\cypress\fixtures\images.jpg');
}
}
I'm using VSCode and trying to correct the way imports are written across multiple files in my project to a more performant format - does VSCode have functionality that would facilitate this? Could it be done with the built-in find and replace? Or is some other VSCode feature able to do this?
The imports I've got look like this (substance-ux is an obfuscated version of a real module name, as I don't want module specific answers):
import { Foo, Bar as BarBar } from '#substance-ux/glyphs';
Or maybe:
import {
GlyphWithLongName as LongName,
GlyphWithExtraLongName as ExtraLong
} from '#substance-ux/glyphs';
And I need to convert it into this style, matching imports elsewhere in our project:
import Foo from '#substance-ux/glyphs/Foo';
import BarBar from '#substance-ux/glyphs/Bar';
Or this:
import LongName from '#substance-ux/glyphs/GlyphWithLongName';
import ExtraLong from '#substance-ux/glyphs/GlyphWithExtraLongName';
(As an aside, the files like '#substance-ux/glyphs/GlyphWithExtraLongName' already exist and the docs for the package say that the #substance-ux/glyphs module runs a lot of code on import, which slows down development builds.)
Now if I know I have one format or the other, or I know how many then I'm ok to rely on find and replace, e.g. I can use a bit of regex (find: import \{ (.*), (.*) } from '(#substance-ux/glyphs)'; replace import $1 from '$3/$1';\nimport $2 from '$3/$2';) and the Find and Replace feature in VSCode.
But if I have variable number of imports, or mixed style (some 'as' some not) I become completely unstuck, if I try to do this in one go.
I know snippets can do regex capture and some clever replacing using TextMate syntax, but I don't think they can handle variable number of capture groups? Or can they?
Is this possible in VSCode without extensions etc?
Snippets can handle a variable number of arguments - I have answered a number of SO questions showing that - but I don't think they would work with your format where the arguments are already there rather than to be entered as part of the snippet. I really don't think there is a non-extension or non-script solution to your situation.
Using an extension that I wrote, Find and Transform, you can write javascript in a keybinding or a setting.
This keybinding - in your keybindings.json - will do what you want (it could also be a setting so that the command would appear in the Command Palette):
{
"key": "alt+f", // whatever keybinding you want
"command": "findInCurrentFile",
"args": {
"find": "(import\\s*{\\s*)([^}]+?)(\\s*}\\s*from\\s*')([^']+)';",
"replace": [
"$${",
"const from = `$4`;", // capture group 4 from the find
// using capture group 2 from the find regex
// note backticks around $2 below because it could contain newlines
"const splitImports = [...`$2`.matchAll(/(\\w+)(?:$|,)|(\\w+)\\s?as\\s?(\\w+)/g)];",
"let str = '';",
"splitImports.forEach((match, index) => { ",
// don't add a newline if last match
"let newline = '';",
"if (index < splitImports.length - 1) newline = '\\n';",
// note double-escapes necessary
"if (match[1]) str += `import ${match[1]} from \\'${from}/${match[1]}\\';${newline}`;",
"if (match[2]) str += `import ${match[3]} from \\'${from}/${match[2]}\\';${newline}`;",
"}); ",
"return str;",
"}$$"
],
"isRegex": true,
// "restrictFind": "line",
},
// "when": "editorLangId == javascript" // if you want it
}
This would work on the entire file as the demo shows. If you wanted to test it or just have it do the lines you select, enable "restrictFind": "line".
I don't understand what the vscode program has to do with your code.. The program won't actively change the structure of your code, you will have to do it manually:
You have this:
import { Foo, Bar as BarBar } from '#substance-ux/glyphs';
And you want this:
import Foo from '#substance-ux/glyphs/Foo';
import BarBar from '#substance-ux/glyphs/Bar';
The #substance-ux/glyphs file is having inside it multiple named exports, so
if you want to split things, you will need to create dedicated files which
exports default, so create a Foo.js file which export default Foo; and more all the code from #substance-ux/glyphs which is relevant to Foo to the new file, or just import from within Foo.js and re-expose as the default:
New Foo.js file:
import { Foo } from '#substance-ux/glyphs';
export default Foo;
New Bar.js file:
import { Bar } from '#substance-ux/glyphs';
export default Bar;
You can import any default exported thing by any name you wish:
import Banana from '#substance-ux/glyphs/Bar';
But I don't see why would you want to do this.. You didn't explain to us what is bad with importing multiple things from a single file. Treeshaking?
I have an API utils file React JS where i have list of endpoints declared like below-
File1.js-
export const api_endpoints = {
api1: ()=> '../data/user'
}
I want api1() from File1.js in my another file (File2.js) hence i am importing this like below-
import {api_endpoints} from '../File1';
const myObj = {
[api_endpoints.api1()]: '../data/user2'
}
This gives me error in File2 saying-
"cannot read property api1 of undefined"
I am not sure why api_endpoints comes as undefined in File2.js. The paths are correct. Can someone help me understand that.
Looks like you are importing from wrong path. Tried the above example and it is working fine for me..
https://codesandbox.io/s/objective-meninsky-7gbch?file=/src/File2.js
You might have just copied it wrong, but you imported {api1_endpoints}, but are asking for api_endpoints
Im working on a discord.js bot, and I have a var in on my code for one command, but the other command relies on that. It used to be all on one file so there was no problem, but recently I made a command handler and now the var is in a different file, and its broken. Any sugestions?
To export a variable, use:
export let varname;
And to import it from another file:
import varname from './path_to_the_file';
I wish it helps you. :)
You can use 'global' key word:
global.varName = 10
Use module.exports to export the variable from your file.
// File A
const fooVariable = 'foo';
module.exports = { varToExport: fooVariable };
// File B
const fooVariable = require('./fileA').varToExport;
Note
For more info check the Node.js documentation on modules.
I would like to use webpack 4's JSON tree-shaking feature but I am hitting a roadblock.
This is some working code:
import { accessibility_16 } from '#collab-ui/icons/data/iconsData.json';
console.log("accessibility_16:", accessibility_16);
iconsData.json is a HUGE file, but thanks to webpack I only get the code related to accessibility_16 in the final bundle (when using webpack -p). The issue is that some keys in the JSON file are not valid JavaScript identifiers, example: arrow-circle-down_16.
import { arrow-circle-down_16 } from '#collab-ui/icons/data/iconsData.json';
The code above is invalid.
How can I import arrow-circle-down_16 and still benefit from JSON tree-shaking?
Thanks!
I have found how to write code to do what I want thanks to this GitHub issue but I am not certain that it's future-proof:
import * as json from "#collab-ui/icons/data/iconsData.json";
const path = json["arrow-circle-down_16"];
console.log("arrow-circle-down_16:", path);