I want to compile JSX files using '#babel/preset-react on VScode extension API. While doing this I faced an error just like below. I have tried a few ways to install but still can't get any results. It works on a basic node application but it doesn't work on VScode extension API.
Error: Cannot find module '#babel/preset-react'
at webpackEmptyContext (c:\Users\PC\Desktop\type-svg\jsx-svg\dist\extension.js:56404:10)
at resolveStandardizedName (c:\Users\PC\Desktop\type-svg\jsx-svg\dist\extension.js:57964:7)
at resolvePreset (c:\Users\PC\Desktop\type-svg\jsx-svg\dist\extension.js:57912:10)
js:120:14)
c:\Users\PC\AppData\Local\Programs\Microsoft VS C
code blocks:
try {
let output = babel.transformSync("code", {
"presets": ["#babel/preset-react"]
});
console.log(output)
} catch (e) {
console.log(e)
}
package.json file:
{
"name": "jsx-svg",
"displayName": "",
"description": "jsx-svg",
"version": "0.0.1",
"engines": {
"vscode": "^1.55.0"
},
"categories": [
"Other"
],
"activationEvents": [
"onCommand:jsx-svg.helloWorld"
],
"main": "./dist/extension.js",
"contributes": {
"commands": [
{
"command": "jsx-svg.helloWorld",
"title": "Hello World"
}
]
},
"scripts": {
"vscode:prepublish": "yarn run package",
"compile": "webpack",
"watch": "webpack --watch",
"package": "webpack --mode production --devtool hidden-source-map",
"test-compile": "tsc -p ./",
"test-watch": "tsc -watch -p ./",
"pretest": "yarn run test-compile && yarn run lint",
"lint": "eslint src --ext ts",
"test": "node ./out/test/runTest.js"
},
"devDependencies": {
"#babel/core": "^7.14.0",
"#babel/plugin-syntax-jsx": "^7.12.13",
"#babel/plugin-transform-react-jsx": "^7.13.12",
"#babel/preset-react": "^7.13.13",
"#babel/template": "^7.12.13",
"#babel/traverse": "^7.14.0",
"#types/glob": "^7.1.3",
"#types/mocha": "^8.0.4",
"#types/node": "^12.11.7",
"#types/vscode": "^1.55.0",
"#typescript-eslint/eslint-plugin": "^4.14.1",
"#typescript-eslint/parser": "^4.14.1",
"eslint": "^7.19.0",
"glob": "^7.1.6",
"mocha": "^8.2.1",
"ts-loader": "^8.0.14",
"typescript": "^4.1.3",
"vscode-test": "^1.5.0",
"webpack": "^5.19.0",
"webpack-cli": "^4.4.0"
},
"dependencies": {
"#types/babel__core": "^7.1.14"
}
}
The biggest hint in that error is webpackEmptyContext. This isn't Node telling you that it failed to find #babel/preset-react" on the filesystem, it is Webpack telling you that it was unable to load #babel/preset-react" from it's bundle.
In the case of Babel, and anything with object-based config inputs, that is expected, because Webpack has no way to know that
let output = babel.transformSync("code", {
"presets": ["#babel/preset-react"]
});
will cause Babel to interally try to load "#babel/preset-react", and Babel can't preemptively tell Webpack what to bundle because it could be passed any set of options.
The way around this is to explicitly load the plugin and pass the already-loaded plugin to Babel like this:
let output = babel.transformSync("code", {
"presets": [require("#babel/preset-react")]
});
Related
I'm trying to implement the Allure reports in Playwright with Cucumber. I'm running the features in the next way:
npm run test -- --tags "#Something"
After an execution I type: npm run allure generate but the browser displays an Allure Report Unknown NaN%
This is my package.json file:
{
"name": "playwright",
"version": "1.0.0",
"description": "E2E Automation Framework",
"main": "index.js",
"type": "module",
"scripts": {
"allure:generate": "npx allure generate ./allure-results --clean",
"allure:open": "npx allure open ./allure-report",
"allure:serve": "npx allure serve",
"test": "./node_modules/.bin/cucumber-js --require cucumber.cjs --require step-definitions/**/*.cjs --require features/**/*.js",
"allure-reports": "node_modules/.bin/allure generate ./reports/allure/allure-results/ -o ./reports/allure/allure-report/ --clean && allure open ./reports/allure/allure-report",
"posttest": "npm run allure:generate",
"allure": "allure serve reports/allure-results"
},
"author": "X",
"license": "ISC",
"dependencies": {
"#cucumber/cucumber": "^8.7.0",
"chai": "^4.3.6",
"prettier": "^2.7.1",
"ts-jest": "^29.0.3"
},
"jest": {
"verbose": true,
"moduleDirectories": [
"node_modules",
"src"
],
"preset": "ts-jest/presets/js-with-ts",
"testEnvironment": "node",
"allowJs": true,
"transform": {
"^.+\\.jsx?$": "babel-jest"
},
"transformIgnorePatterns": [
"<rootDir>/node_modules/(?!variables/.*)"
]
},
"devDependencies": {
"#babel/core": "^7.19.6",
"#babel/preset-env": "^7.19.4",
"#babel/register": "^7.18.9",
"#jest/globals": "^29.3.0",
"#playwright/test": "^1.27.1",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"allure-commandline": "^2.18.1",
"allure-playwright": "^2.0.0-beta.19",
"babel-jest": "^29.2.2",
"experimental-allure-playwright": "^0.0.3",
"identity-obj-proxy": "^3.0.0",
"jest": "^29.2.2",
"playwright": "^1.27.1",
"react-test-renderer": "^18.2.0"
}
}
If anybody could help me with this? Thanks in advance.
I have something setup as below in package.json for Playwright-jest-allure.
{
"name": "playwright",
"version": "1.0.0",
"description": "Sab Playwright",
"main": "index.js",
"author": "Sab",
"license": "MIT",
"dependencies": {
"jest": "^27.5.1",
"jest-playwright-preset": "^1.7.0",
"playwright": "^1.20.2"
},
"scripts": {
"test": "jest"
},
"devDependencies": {
"jasmine-allure-reporter": "^1.0.2",
"jest-allure": "^0.1.3",
"jasmine":"^3.7.0",
"#wdio/allure-reporter": "^7.16.14",
"#wdio/cli": "^7.5.2",
"allure-commandline": "^2.17.2"
}
}
Below is the allure-results and allure-report , latter gets generated once run is successful and command - npx allure generate ./allure-results --clean
allure-results please make sure xmls' are generated here for the tests run
Allure report:
With cucumberjs, nothing much different other than hooks,cucumber config file. Still if you are facing issue, let me know. I can post the setup I have made on it.
What I discover is that you are executing the test cases with "test": "./node_modules/.bin/cucumber-js. That means that the configuration should be under your cucumber.js
// cucumber.js
let options = [
'--require-module ts-node/register', // Load Typescript module
'--require ./steps/**.ts', // Load steps
'--format progress', // Load custom formatter
'--format json:reports/cucumber_report.json', // JSON report
'--format html:reports/cucumber-report.html',
//'--format ./reporter.ts', // Allure report
'--publish-quiet',
'--tags #mytag',
'--parallel 2',
'--retry 0',
].join(' ')
let run_features = [
'./features/', // Specify our feature files location
options,
].join(' ')
module.exports = {
test_runner: run_features,
parallel: 2,
}
As you can see there is a commented line for allure. When we uncomment this line the reporter.js is going to be the report format, in my case I copied from here
And my scripts at the package.json are:
"scripts": {
"test": "cucumber-js -p test_runner",
"allure:generate": "npx allure generate ./allure-results --clean",
"allure:open": "allure open allure-report",
"all": "npm test && npm run allure:generate && npm run allure:open"
},
I am testing the sample code of javascript.
There is script like simple.js under demos directory.
I run demo by this command yarn build-demos && http-server demos/
simple.js is compiled to simple_bundle.js and server works.
However everytime I change simple.js, I need to restart server.
Is there any good short cut for this purpose??
I am not familiar with npm and webpack
Any help is appreciated.
My package.json is here below:
{
"name": "#magenta/sketch",
"version": "0.2.0",
"description": "Make sketches in the browser with machine learning.",
"main": "es5/index.js",
"types": "es5/index.d.ts",
"jsdelivr": "dist/magentasketch.js",
"unpkg": "dist/magentasketch.js",
"dependencies": {
"#tensorflow/tfjs": "^1.0.2"
},
"devDependencies": {
"#types/clone": "^0.1.30",
"#types/file-saver": "^1.3.0",
"#types/ndarray": "^1.0.6",
"#types/node": "^12.0.1",
"#types/tape": "^4.2.32",
"browserify": "^16.5.1",
"clang-format": "^1.2.3",
"clone": "^1.0.4",
"file-saver": "^1.3.8",
"file-saver-typescript": "^1.0.1",
"fs": "0.0.1-security",
"http-server": "^0.12.1",
"in-publish": "^2.0.0",
"minimist": "^1.2.5",
"path": "^0.12.7",
"tape": "^4.9.0",
"ts-loader": "^5.3.0",
"ts-node": "^5.0.1",
"tsify": "^3.0.4",
"tslint": "^5.9.1",
"typedoc": "^0.16.9",
"typedoc-plugin-sourcefile-url": "^1.0.3",
"typescript": "^3.3.3333",
"webpack": "^4.24.0",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.14"
},
"scripts": {
"prepublish": "yarn lint && yarn build && yarn bundle",
"build": "tsc",
"bundle": "webpack --config ./webpack/lib.config.ts",
"lint": "tslint -c ../tslint.json -p . -t verbose",
"test": "ts-node node_modules/tape/bin/tape src/**/*_test.ts",
"build-demos": "webpack --config ./webpack/demo.config.ts",
"run-demos": "yarn build-demos && http-server demos/",
"serve-demos": "http-server demos/",
"serve-dist": "http-server dist/",
"docs": "sh ../scripts/generate-docs.sh 'sketch'"
},
"author": "Magenta",
"license": "Apache-2.0",
"repository": {
"type": "git",
"url": "https://github.com/tensorflow/magenta-js.git"
}
}
You might need to use Nodemon.
You install nodemon by npm i nodemon
In package.json you add a script: "dev": "nodemon dist/index.js"
Execute the code in the console by adding npm run dev
It should work as you want
You may consider using Nodemon.
Jest is not finding all of my test files. It is ignoring a directory. When I run npm run jest:watch my tests in ./server and its subdirectories are tested but no tests are found in ./client
What I have tried
I have tried creating a generic test file and moving it around. I found it would work in the following circumstances.
I have also tried using a direct path to the file - which didn't work.
Possible causes
I think it may be something to do with the unusual directory structure I have
./client
./server
as opposed to
./server.js
./other server files..
./client/...client files
or it may be die to me trying to run jest from the node.js app and also have it look at files in the client directory (which contains an app written in React) - I don't care about running tests on react components (only modules). Alternatively it could be something to do with jest in the client directory messing things up.
filename
./server/middleware
./
./client
delete.test.js
found by jest
found by jest
not found
My setup
my folder structure looks like this
./
./client (react client app)
./client/package.json
./client/node_modules
package.json
node.modules
./server (node.js api app)
./server/package.json
my jest is running from the ./package.json file.
Other things I have tried
I have tried using direct paths for my file the below code works
"testMatch": ["<rootDir>/server/delete.test.js"],
but this code (in the folder I want) does not
"testMatch": ["<rootDir>/client/delete.test.js"],
code setup
./package.json
{
"name": "Infoshot",
"version": "0.0.4",
"description": "Research Tool",
"main": "cd ./server && server.js",
"scripts": {
"start": "cd ./server && node server.js",
"server": "cd ./server && nodemon server.js",
"client": "npm start --prefix ./client/",
"clientinstall": "npm install --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\"",
"heroku-postbuild": "cd ./client && NPM_CONFIG_PRODUCTION=false npm install && CI= npm run build",
"compile-saas": "node-sass ./client/src/scss/a_main.scss ./server/nodeClient/public/css/main.css -w",
"test": "jest",
"test:watch": "npm run test -- --watch"
},
"jest": {
"testEnvironment": "node",
"testPathIgnorePatterns": [
"./node_modules"
]
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^0.21.0",
"bcryptjs": "^2.4.3",
"config": "^3.2.2",
"dotenv": "^8.2.0",
"ejs": "^3.1.5",
"enzyme": "^3.11.0",
"express": "^4.17.1",
"express-validator": "^6.2.0",
"ijavascript": "^5.2.0",
"jest": "^26.6.3",
"jsonwebtoken": "^8.5.1",
"mongoose": "^5.7.0",
"nodemailer": "^6.4.14",
"nodemailer-sendgrid": "^1.0.3"
},
"devDependencies": {
"concurrently": "^4.1.2",
"node-sass": "^5.0.0",
"nodemon": "^1.19.2"
}
}
delete.test.json
describe.only('DELETE TEST: getDocument', () => {
test('Say Hi', async () => {
const bum = 'bum';
expect(bum).toBe(bum);
});
});
./client/package.json
As I said earlier I don't think this is relavant as it is not be run as I am running jest from ./server with npm run jest:watch
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.19.0",
"config": "^3.3.2",
"dotenv": "^8.2.0",
"enzyme-adapter-react-16": "^1.15.3",
"node-sass": "^4.14.1",
"react": "^16.9.0",
"react-beautiful-dnd": "^13.0.0",
"react-dom": "^16.9.0",
"react-router-dom": "^5.0.1",
"react-scripts": "^3.4.4",
"react-transition-group": "^4.3.0",
"serve": "^11.3.2",
"styled-components": "^5.1.1",
"uuid": "^3.3.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"previewProd": "react-scripts build && serve"
},
"jest": {
"collectCoverageFrom": [
"src/components/documentEditor/*.js",
"<rootDir>/server/",
"!<rootDir>/node_modules/",
"!<rootDir>/src/index.js",
"!<rootDir>/src/registerServiceWorker.js"
]
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"proxy": "http://localhost:5000",
"devDependencies": {
"#testing-library/react": "^10.4.9"
}
}
I found that if I removed all the mentions of jest in the ./client/package.json and also replaced the ./package.json with
"collectCoverageFrom": [
"**/*.{js,jsx}",
"!**/node_modules/**"
]
it worked.
I am relatively new to Node js and was working on .NET MVC. When I am trying to run it using command node index its giving me an below error.
H:\Services\src>node index
H:\Services\src\index.js:1
import app from './app';
^^^^^^
SyntaxError: Cannot use import statement outside a module
?[90m at Module._compile (internal/modules/cjs/loader.js:895:18)?[39m
?[90m at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)?[39m
?[90m at Module.load (internal/modules/cjs/loader.js:815:32)?[39m
?[90m at Function.Module._load (internal/modules/cjs/loader.js:727:14)?[39m
?[90m at Function.Module.runMain (internal/modules/cjs/loader.js:1047:10)?[39m
?[90m at internal/main/run_main_module.js:17:11?[39m
Below is my package.json file. It says it is using node version 8.0.0 and npm version 5.0.0. Bt I have installed node version is v12.14.0 and NPM installed version is 6.13.4.
{
"name": "core",
"version": "0.0.1",
"description": "Core",
"main": "dist/index.js",
"engines": {
"node": "8.0.0",
"npm": "5.0.0"
},
"scripts": {
"prestart": "npm run -s build",
"start": "node dist/index.js",
"dev": "nodemon src/index.js --exec \"node -r dotenv/config -r babel-register\" localdev",
"clean": "rimraf dist && rimraf -p",
"build": "npm run clean && mkdir -p dist && babel src -s -D -d dist",
"test": "jest --watch",
"lint": "esw -w src test"
},
"keywords": [
"express",
"babel",
"es6",
"es2015",
"es2016",
"es2017",
"eslint"
],
"author": "ABC",
"license": "UNLICENSED",
"dependencies": {
"babel-cli": "6.26.0",
"babel-plugin-transform-object-rest-spread": "6.26.0",
"babel-preset-env": "1.6.1",
"cors": "2.8.5",
"express": "4.16.4",
"js-yaml": "3.12.2",
"mssql": "5.0.0",
"winston": "3.1.0",
"winston-daily-rotate-file": "3.5.1"
},
"devDependencies": {
"babel-eslint": "7.2.3",
"babel-jest": "21.0.2",
"babel-register": "6.24.1",
"dotenv": "4.0.0",
"eslint": "4.10.0",
"eslint-config-airbnb-base": "12.1.0",
"eslint-plugin-import": "2.8.0",
"eslint-plugin-jest": "21.0.2",
"eslint-watch": "3.1.0",
"nodemon": "1.18.10",
"rimraf": "2.6.3"
},
"babel": {
"presets": [
[
"env",
{
"targets": {
"node": "current"
}
}
]
],
"plugins": [
"transform-object-rest-spread"
]
},
"eslintConfig": {
"parser": "babel-eslint",
"plugins": [
"import",
"jest"
],
"parserOptions": {
"ecmaVersion": 2017,
"sourceType": "module"
},
"env": {
"node": true,
"jest": true
},
"extends": [
"eslint:recommended"
]
}
}
I have tried different google solutions for above error but each time gets a diff error depending upon steps I am doing to fix the issue. I am just looking to run this code and test it locally.
Thanks in advance.
I've just checked a node.js web framework called feathers.js. I followed the example
``` bash
$ npm install -g #feathersjs/cli
$ mkdir my-new-app
$ cd my-new-app/
$ feathers generate app
$ npm start
In the example package.json file, I found a script look like this: "start": "node src/". I read through node.js cli options, I didn't found anything relate. So, I want to know how that script work, because normally node.js cli run by node foo.js
edit:
Folder structure
package.json file
{
"name": "feathersjsExplore",
"description": "",
"version": "0.0.0",
"homepage": "",
"main": "src",
"keywords": [
"feathers"
],
"author": {
"name": "",
"email": ""
},
"contributors": [],
"bugs": {},
"directories": {
"lib": "src",
"test": "test/"
},
"engines": {
"node": "^8.0.0",
"npm": ">= 3.0.0"
},
"scripts": {
"test": "npm run eslint && npm run mocha",
"eslint": "eslint src/. test/. --config .eslintrc.json",
"dev": "nodemon src/",
"start": "node src/",
"mocha": "mocha test/ --recursive --exit"
},
"dependencies": {
"#feathersjs/configuration": "^2.0.2",
"#feathersjs/errors": "^3.3.2",
"#feathersjs/express": "^1.2.5",
"#feathersjs/feathers": "^3.2.1",
"compression": "^1.7.3",
"cors": "^2.8.4",
"helmet": "^3.13.0",
"serve-favicon": "^2.5.0",
"winston": "^3.0.0"
},
"devDependencies": {
"eslint": "^5.5.0",
"mocha": "^5.2.0",
"nodemon": "^1.18.4",
"request": "^2.88.0",
"request-promise": "^4.2.2"
}
}
It will run the index.js file in that folder or whatever is specified in the folder's package.json main property (https://docs.npmjs.com/files/package.json#main).
If none of that can be found an Error: Cannot find module will be thrown.
This is a similar logic to require('folder/') (see https://nodejs.org/api/modules.html#modules_folders_as_modules).