I've duplicated a projects .eslintrc and package.json files, and only the first project gets linting. The second project doesn't show any errors.
I'm using sublime-linter, with the eslint mod.
I've set the syntax the same in both projects.
I've done an npm isntall
I've tried restarting sublime
on doing a comparison of the node_modules folders there is one descrepency, estravers-fb is installed in the project that works.
why would this not be installed in the other projects?
is there another command to properly install dev-dependancies other than npm isntall?
heres my package.json :
{
"name": "Read-hapi",
"version": "1.0.0",
"description": "learning the hapi framework",
"repository": "https://github.com/Pushplaybang/learning-hapi.git",
"main": "server.js",
"dependencies": {
"blipp": "^2.3.0",
"boom": "^3.1.2",
"cheerio": "^0.20.0",
"good": "^6.6.0",
"good-console": "^5.3.1",
"handlebars": "^4.0.5",
"hapi": "^13.0.0",
"inert": "^3.2.0",
"joi": "^8.0.3",
"reading-time": "^1.0.2",
"request-promise": "^2.0.1",
"text-stats": "0.0.3",
"valid-url": "^1.0.9",
"vision": "^4.0.1"
},
"devDependencies": {
"babel-eslint": "^5.0.0",
"eslint": "^2.3.0",
"eslint-config-airbnb": "^6.1.0",
"eslint-plugin-react": "^4.2.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Paul van Zyl",
"license": "ISC"
}
and heres my .eslintrc
{
"parser": "babel-eslint",
"extends": "airbnb",
"env": {
"browser": true,
"node": true,
},
"rules": {
"no-unused-vars": 0,
"no-undef": 0,
}
}
any help would be appreciated.
Try downgrading ESLint to ~2.2.0 in your package.json or using the default Espree parser instead of babel-eslint. There's an incompatibility right now between ESLint 2.3.0 and babel-eslint. We're tracking progress in eslint/eslint#5476, and you can subscribe to that issue for updates.
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'm writing a game in JavaScript/ Redux. I'm unable to configure my .eslintrc.json file so that it supports the latest JavaScript syntax - I get a message saying
"Import and export declarations are not supported yet" eslint(node/no-unsupported-features/es-syntax).
I've read the official configuration docs for ESLint and tried (I thought all) combinations over the past few hours (changing environments, ecmaVersions, parsers and parser options).
The latest thing I've tried is to install a babel-eslint parser and so at the moment my .eslintrc.json looks like this:
{
"extends": ["airbnb-base", "prettier", "plugin:node/recommended"],
"plugins": ["prettier"],
"env": {
"es2020": true
},
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 2020,
"sourceType": "module"
},
"rules": {
"prettier/prettier": "error"
}
}
And my package.json:
{
"name": "astroman-game",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"build": "webpack",
"start": "webpack-dev-server --open",
"eslint": "eslint ./"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.5.5",
"#babel/preset-env": "^7.5.5",
"babel-eslint": "^10.0.3",
"babel-loader": "^8.0.6",
"eslint": "^6.1.0",
"eslint-config-airbnb-base": "^14.0.0",
"eslint-config-node": "^4.0.0",
"eslint-config-prettier": "^6.10.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-node": "^11.0.0",
"eslint-plugin-prettier": "^3.1.2",
"prettier": "^1.19.1",
"webpack": "^4.39.3",
"webpack-cli": "^3.3.7",
"webpack-dev-server": "^3.8.0"
},
"dependencies": {
"redux-starter-kit": "^0.6.3"
}
}
But it also didn't solve the problem.
I appreciate your help!
You are extending from plugin:node/recommended which is for NodeJS. Node only supports require() which are CommonJS-style imports. There is no reason for your frontend application to be using this set of recommendations.
Remove plugin:node/recommended from the extends list
"extends": ["airbnb-base", "prettier"],
I am seeing the same issue with importing all of the plugins.
ErrorScreenShot
Verified that they are not working as expected in the browser return for the file upload. I am trying to encode the photo for upload to MongoDB Atlas.
File Request Response
This appears to be some sort of TypeScript issue. I have been unable to track down a solution. Using VS Code with React.
Tried so far...
Reinstalling all plugins with Yarn vs NPM and adding #type/ in front of package
I created a declarations.d.ts file to declare(as suggested).Placed in the /src root as well as filepond/types/. Maybe needs to be placed in another directory?
declare module 'FilePondPluginImageResize';
declare module 'FilePondPluginFileEncode';
declare module 'FilePondPluginImageExifOrientation';
declare module 'FilePondPluginImagePreview';
declare module 'FilePondPluginImageTransform';
remove '.js' from the filepond plugin package.json "main": "dist/filepond-plugin-file-encode.js",
Tried import FilePondPluginFileEncode from '/fullpath/filepond-plugin-file-encode.js';
Removing both FilePond and FilePond-React and reinstalled.
I have not found any issues with the code below, with the exception that the response was not encoded. Therefore the plugin declaration must be somehow broken.
import React, { Component } from 'react';
// Import React FilePond
import { FilePond, registerPlugin } from 'react-filepond';
// import * as FilePond from 'react-filepond';
// Import FilePond styles
import "filepond/dist/filepond.min.css";
// Import the Image EXIF Orientation and Image Preview plugins
// Note: These need to be installed separately
import FilePondPluginImageResize from 'filepond-plugin-image-resize';
import FilePondPluginFileEncode from 'filepond-plugin-file-encode';
import FilePondPluginImageExifOrientation from "filepond-plugin-image-exif-orientation";
import FilePondPluginImagePreview from "filepond-plugin-image-preview";
import FilePondPluginImageTransform from 'filepond-plugin-image-transform';
import "filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css";
// Register the plugins
registerPlugin(FilePondPluginFileEncode, FilePondPluginImageExifOrientation, FilePondPluginImagePreview, FilePondPluginImagePreview, FilePondPluginImageResize, FilePondPluginImageTransform);
// Our app
export default class ImageHandler extends Component {
constructor(props) {
super(props);
this.state = {
// Set initial files, type 'local' means this is a file
// that has already been uploaded to the server (see docs)
files: [
{
id: "",
name: "",
type: "",
size: 0,
metadata: {
resize: {
mode: "",
size: {
width: 0,
height: 0
}
},
crop: {
rect: {
x: 0,
y: 0,
width: 0,
height: 0
},
aspectRatio: 1
}
},
data: ""
}
],
fileUploaded: false
};
}
handleInit() {
console.log("FilePond instance has initialized", this.pond);
console.log(this.state.files);
}
uploadFiles() {
this.props.parentFileCallback(this.state.files)
this.setState({fileUploaded:true})
}
render() {
return (
<div className="App">
<FilePond
ref={ref => (this.pond = ref)}
files={this.state.files}
allowMultiple={true}
allowImageExifOrientation={true}
allowImageTransform={true}
allowImageResize={true}
allowReorder={true}
allowFileEncode={true}
imageEditInstantEdit={true}
imageResizeMode={'cover'}
imageResizeTargetWidth={800}
imageResizeTargetHeight={null}
instantUpload={false}
maxFiles={5}
oninit={() => this.handleInit()}
onupdatefiles={fileItems => {
// Set currently active file objects to this.state
this.setState({
files: fileItems.map(fileItem => fileItem)
});
this.uploadFiles();
console.log(`photo files ${this.state.files[0]}`)
console.log(`uploaded? ${this.state.fileUploaded}`)
}}
/>
</div>
);
}
}
Here is the filepond package.json...
"name": "filepond",
"version": "4.9.5",
"description": "FilePond, Where files go to stretch their bits.",
"license": "MIT",
"author": {
"name": "PQINA",
"url": "https://pqina.nl/"
},
"homepage": "https://pqina.nl/filepond/",
"repository": "pqina/filepond",
"main": "dist/filepond.js",
"browser": "dist/filepond.js",
"module": "dist/filepond.esm.js",
"keywords": [
"javascript",
"file",
"upload",
"drag",
"drop",
"browse",
"paste",
"image",
"preview"
],
"browserslist": [
"last 1 version and not Explorer 10",
"Explorer 11",
"iOS >= 9",
"Android >= 4.4"
],
"files": [
"dist",
"types/*.d.ts"
],
"types": "types/index.d.ts",
"scripts": {
"test": "npx jest",
"start": "npx rollup -c -w",
"build": "npm run scripts | npm run styles",
"scripts": "npx rollup -c",
"styles": "npm run styles:pretty && npm run styles:nano",
"styles:pretty": "cat src/css/* | npx node-sass | npx postcss --no-map --use autoprefixer | npx prettier --single-quote --parser css | node banner-cli.js FilePond > dist/filepond.css",
"styles:nano": "cat src/css/* | npx node-sass | npx postcss --no-map --use autoprefixer --use cssnano | node banner-cli.js FilePond > dist/filepond.min.css",
"dtslint": "dtslint types"
},
"devDependencies": {
"#babel/core": "^7.5.5",
"#babel/plugin-proposal-object-rest-spread": "^7.5.5",
"#babel/plugin-transform-template-literals": "^7.4.4",
"#babel/preset-env": "^7.5.5",
"autoprefixer": "^9.6.1",
"babel-jest": "^24.8.0",
"cssnano": "^4.1.10",
"dtslint": "^0.9.3",
"jest": "^24.8.0",
"node-sass": "^4.12.0",
"postcss-cli": "^6.1.3",
"prettier": "^1.18.2",
"rollup": "^1.17.0",
"rollup-plugin-babel": "^4.3.3",
"rollup-plugin-commonjs": "^9.3.4",
"rollup-plugin-license": "^0.8.1",
"rollup-plugin-node-resolve": "^4.2.4",
"rollup-plugin-prettier": "^0.6.0",
"rollup-plugin-terser": "^4.0.4",
"typescript": "^3.6.2"
}
}
the filepond-react package.json
{
"name": "react-filepond",
"version": "7.0.1",
"description": "A handy FilePond adapter component for React",
"homepage": "https://pqina.nl/filepond",
"license": "MIT",
"repository": "pqina/react-filepond",
"main": "dist/react-filepond.js",
"browser": "dist/react-filepond.js",
"module": "dist/react-filepond.esm.js",
"keywords": [
"react",
"reactjs",
"filepond",
"file",
"upload",
"drag",
"drop",
"browse",
"image",
"preview"
],
"author": {
"name": "PQINA",
"url": "https://pqina.nl"
},
"scripts": {
"start": "npm run build:watch",
"build": "mkdirp dist && npm run build:browser && npm run build:module",
"build:browser": "babel lib | bannerjs -m > dist/react-filepond.js",
"build:module": "minicat lib/index.js | bannerjs -m > dist/react-filepond.esm.js",
"build:watch": "nodemon --watch lib -x \"npm run build\"",
"prepare": "npm run build"
},
"peerDependencies": {
"react-dom": "^16.0.0",
"react": "^16.0.0",
"filepond": ">=3.7.x <5.x"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"bannerjs": "^1.0.5",
"minicat": "^1.0.0",
"mkdirp": "^0.5.1",
"nodemon": "^1.17.3"
}
}
the filepond-plugin-file-encode package.json
{
"name": "filepond-plugin-file-encode",
"version": "2.1.4",
"description": "File Encoding Plugin for FilePond",
"license": "MIT",
"author": {
"name": "PQINA",
"url": "https://pqina.nl/"
},
"homepage": "https://pqina.nl/filepond/",
"repository": "pqina/filepond-plugin-file-encode",
"main": "dist/filepond-plugin-file-encode.js",
"browser": "dist/filepond-plugin-file-encode.js",
"module": "dist/filepond-plugin-file-encode.esm.js",
"browserslist": [
"last 1 version and not Explorer 10",
"Explorer 11",
"iOS >= 9",
"Android >= 4.4"
],
"files": [
"dist"
and the project package.json...
{
"name": "travel-diary",
"version": "0.1.0",
"private": true,
"dependencies": {
"#loadable/component": "^5.12.0",
"#material-ui/core": "^4.8.3",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.4.0",
"#testing-library/user-event": "^7.2.0",
"axios": "^0.19.1",
"babel": "^6.23.0",
"babel-eslint": "^10.0.3",
"body-parser": "^1.19.0",
"bootstrap": "^4.4.1",
"cors": "^2.8.5",
"crypto": "^1.0.1",
"express": "^4.17.1",
"filepond": "^4.9.4",
"filepond-plugin-file-encode": "^2.1.4",
"filepond-plugin-image-exif-orientation": "^1.0.6",
"filepond-plugin-image-preview": "^4.6.0",
"filepond-plugin-image-resize": "^2.0.4",
"filepond-plugin-image-transform": "^3.7.0",
"global": "^4.4.0",
"google-maps-react": "^2.0.2",
"method-override": "^3.0.0",
"moment": "^2.24.0",
"mongodb": "^3.4.1",
"mongoose": "^5.8.4",
"morgan": "^1.9.1",
"path": "^0.12.7",
"prop-types": "^15.7.2",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-filepond": "^7.0.1",
"react-hot-loader": "^4.12.18",
"react-router-dom": "^5.1.2",
"react-scripts": "3.3.0",
"react-stylesheet": "^2.2.2",
"reactstrap": "^8.2.0",
"redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.3.0",
"styled-components": "^4.4.1",
"webpack": "4.41.2",
"yarn": "^1.21.1"
},
It's a typescript error, and the #types for the file encode plugin don't exist yet.
Create a type declartion in your declaration.d.ts file, but instead of
declare module 'FilePondPluginFileEncode';
try
declare module 'filepond-plugin-file-encode';
and that fixed it for me.
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).
I'm getting some errors module eslint-config-airbnb not found, when run command eslint **/*.jsx.
package.json file
{
"name": "reactapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"precommit": "npm test",
"start": "webpack-dev-server --hot"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"husky": "^0.14.3",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"webpack": "^3.5.5",
"webpack-dev-server": "^2.7.1"
},
"devDependencies": {
"eslint-config-airbnb": "^15.1.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^5.1.1",
"eslint-plugin-react": "^7.3.0"
}
}
eslintrc file
{
"extends": "airbnb"
}
Check to see if your eslint has been installed / installed correctly.
Also reinstall your node_modules folder as well, if eslint has been configured.
Since eslint isn't in your devDependencies, I assumed you've got it set up globally?
I've copied your package.json set up, but tested it with a local eslint and it's working for me.
"scripts":
{
"precommit": "npm test",
"start": "webpack-dev-server --hot",
"lint": "eslint **/*.jsx --fix"
}
...
"devDependencies":
{
"eslint": "^4.5.0",
"eslint-config-airbnb": "^15.1.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^5.1.1",
"eslint-plugin-react": "^7.3.0"
}
npm install -D rimraf prettier babel-eslint eslint-plugin-react eslint-plugin-jsx-a11y eslint-plugin-import eslint-config-prettier eslint-config-airbnb eslint-plugin-react-hooks
npm run build
Try running this, worked for me.