I am trying to run the jQuery maphilight plugin demo via the Parcel script "scripts":{"start": "parcel docs/demo_world.html"} in the package.json file.
I am using the maphilight demo project downloaded from https://github.com/kemayo/maphilight which works fine using live server, but when I use the Parcel script above I get the following errors in dev tools:
I've just taken the maphilight demo in the link above, run npm i parcel-bundler --save-dev and added the scripts in the package.json file below.
Is this even going to be possible with Parcel? Any info would be greatly appreciated! Thank you.
The full package.json looks like:
{
"name": "maphilight",
"version": "1.4.2",
"title": "maphilight",
"author": {
"name": "David Lynch",
"email": "kemayo#gmail.com",
"url": "http://davidlynch.org"
},
"repository": "https://github.com/kemayo/maphilight.git",
"licenses": [
{
"type": "MIT",
"url": "MIT-LICENSE.txt"
}
],
"dependencies": {
"jquery": "^3.0.0"
},
"scripts": {
"start": "parcel docs/demo_world.html",
"build": "parcel build docs/demo_world.html --public-url.",
"build:archive": "ch5-cli archive -p npm_practice_v1 -d dist -o output"
},
"description": "a plugin that adds visual hilights to image maps",
"keywords": [
"map",
"imagemap",
"hilight",
"highlight",
"jquery-plugin",
"ecosystem:jquery"
],
"homepage": "https://github.com/kemayo/maphilight",
"main": "jquery.maphilight.min.js",
"devDependencies": {
"grunt": "^1.0.4",
"grunt-contrib-jshint": "^2.1.0",
"grunt-contrib-uglify": "^4.0.1",
"grunt-contrib-watch": "^1.1.0",
"parcel-bundler": "^1.12.5"
}
}
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery maphilight documentation</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../jquery.maphilight.min.js"></script>
<script type="text/javascript">$(function() {
$('.map').maphilight({fade: false});
});</script>
</head>
<body>...
</body>
</html>
Related
This is the file package.json:
{
"name": "resttest",
"version": "1.0.0",
"description": "",
"main": "index.js",
"type": "module",
"scripts": {
"start": "nodeman index.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.18.1"
},
"devDependencies": {
"nodeman": "^1.1.2"
}
}
This is the output when I run npm run start:
C:\Users\LENOVO\Desktop\Code Stuff\Api\RestTest>npm run start
> resttest#1.0.0 start
> nodeman index.js
/bin/bash: /C/Users/LENOVO/AppData/Local/Temp/start-c7145159.sh: No such file or directory
C:\Users\LENOVO\Desktop\Code Stuff\Api\RestTest>npm config set script-shell cmd.exe
C:\Users\LENOVO\Desktop\Code Stuff\Api\RestTest>npm run start
> resttest#1.0.0 start
> nodeman index.js
The system cannot find the path specified.
C:\Users\LENOVO\Desktop\Code Stuff\Api\RestTest>
I Have created the expo project with bare minimum for the project. I am using expo vector icons are specified in the document. So it is working well in the Browser and Android Emulator, this is fine. After that i have published the project to expo account by using command : "expo publish" and it has published successfully.So when i started scanning the resulted QR code into the mobile. it is not displaying the icons. Displaying some encoded string.
Syntax is have used :
import { Ionicons } from '#expo/vector-icons';
<Ionicons name="add" size={24} color="black" />
Package.json
{
"main": "index.js",
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"web": "expo start --web",
"start": "react-native start",
"test": "jest"
},
"dependencies": {
"#expo/vector-icons": "^12.0.4",
"#react-native-community/masked-view": "0.1.10",
"#react-navigation/material-bottom-tabs": "^5.3.14",
"#react-navigation/native": "^5.9.3",
"#react-navigation/stack": "^5.14.3",
"expo": "~40.0.0",
"expo-font": "~8.4.0",
"expo-linear-gradient": "~8.4.0",
"expo-splash-screen": "~0.8.0",
"expo-status-bar": "~1.0.3",
"expo-updates": "~0.4.0",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "~0.63.4",
"react-native-gesture-handler": "~1.8.0",
"react-native-paper": "^4.7.2",
"react-native-reanimated": "~1.13.0",
"react-native-safe-area-context": "3.1.9",
"react-native-screens": "~2.15.2",
"react-native-unimodules": "~0.12.0",
"react-native-web": "~0.13.12",
"react-redux": "^7.2.3",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"#babel/core": "^7.9.0",
"babel-jest": "~25.2.6",
"babel-plugin-module-resolver": "^4.1.0",
"jest": "~25.2.6",
"react-test-renderer": "~16.13.1"
},
"jest": {
"preset": "react-native"
},
"private": true
}
Please help me out if has any issue in the code.
Thanks in advance.
I found this error message when running react-script test
The react-scripts package provided by Create React App requires a dependency "babel-jest": "^24.9.0"`
So the error message also recommend us to remove package-lock.json and also node_modules I tried but I have the same error message.
And I inspect the package-lock.json and for example jest-config (is a sub dependancies) use higher version than react-script accept.
Please if you have some advices
packages.json
{
"name": "creator-web-app",
"version": "0.1.0",
"private": true,
"main": "public/electron.js",
"homepage": "./",
"dependencies": {
"#craco/craco": "^5.6.4",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"#types/react": "^16.9.34",
"await-to-js": "^2.1.1",
"axios": "^0.19.2",
"classnames": "^2.2.6",
"electron-is-dev": "^1.2.0",
"env-cmd": "^10.1.0",
"enzyme": "^3.11.0",
"history": "^4.10.1",
"i18next": "^19.4.2",
"i18next-browser-languagedetector": "^4.0.2",
"jest": "^25.3.0",
"jwt-decode": "^2.2.0",
"moment": "^2.24.0",
"nano-id": "^1.1.0",
"npm-watch": "^0.6.0",
"react": "^16.13.1",
"react-cookies": "^0.1.1",
"react-dom": "^16.13.1",
"react-i18next": "^11.3.4",
"react-inlinesvg": "^1.2.0",
"react-redux": "^7.2.0",
"react-router-dom": "5.1.2",
"react-scripts": "3.4.1",
"redux": "^4.0.5",
"redux-form": "^8.3.3",
"redux-thunk": "^2.3.0",
"typescript": "^3.7.0"
},
"scripts": {
"electron": "NODE_ENV=production npm run build && NODE_ENV=production electron .",
"start": "NODE_ENV=development react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"pack": "NODE_ENV=production && npm run build && electron-builder --dir",
"dist": "NODE_ENV=production && npm run build electron-builder"
},
"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"
]
},
"devDependencies": {
"#types/classnames": "^2.2.10",
"#types/enzyme": "^3.10.5",
"#types/jest": "^25.2.1",
"#types/react-redux": "^7.1.7",
"#types/react-router-dom": "^5.1.4",
"#types/redux-form": "^8.2.3",
"craco-alias": "^2.1.1",
"electron": "^8.2.1",
"electron-builder": "^22.4.1",
"enzyme-adapter-react-16": "^1.15.2",
"node-sass": "^4.13.1",
"react-test-renderer": "^15.6.2",
"ts-jest": "^25.4.0",
"whatwg-fetch": "^3.0.0"
},
"build": {
"appId": "studioapp.id",
"mac": {
"category": "your.app.category.type"
},
"files": [
"**/*"
],
"directories": {
"buildResources": "."
},
"protocols": {
"name": "studioapp-protocol",
"schemes": [
"studioapp"
]
}
},
"jest": {
"collectCoverageFrom": [
"<rootDir>/src/**/*.{ts,tsx}"
],
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|yml)$": "<rootDir>/tests/test-file-mock.js",
"\\.(css|less|scss|sss|styl)$": "<rootDir>/tests/test-mock.js",
"#/(.*)$": "<rootDir>/src/$1"
},
"transform": {
"^.+\\.(tsx|ts)?$": "ts-jest"
}
}
}
Thanks
I faced the same problem with create-react-app. Here is what I did
Go to the path
C:\Users\YOURNAME\node_modules
and then remove those packages which show an error.
More information here: https://github.com/creativetimofficial/argon-dashboard-react/issues/28
Ironically I was working on a similarish problem this morning. Could you provide a screenshot of your package.json and the error message?
Babel-Jest is used to compile javascript code into a format that jest can consume. I suspect that your problem is that you have a dependency that the lock file has subsequently locked in the incorrect version of babel-jest.
I can add some more details from the above response for solve this issue I found the problem.
When we use react-scripts we can't have jest packages or something is already manage by create-react-app
The problem when I have is package.json contain jest at superior version than react-script can accept
When I deleted this line in my package.json already seems to work
One of your dependencies is using a newer version of babel-jest. You can find which ones they are by running npm ls babel-jest in your project root directory.
A simple way to fix the problem then, is to try and link to an older version of those packages, e.g. "#types/jest": "^24.0.0" so that they don't use the newer version of babel-jest.
for mac user remove
/Users/{UserName}/node_modules
I am trying to get basic karma-jasmine test running but I get the following error.
Chrome 51.0.2704 (Windows 7 0.0.0) ERROR
Uncaught TypeError: Unexpected anonymous System.register call.
at D:/git/ui-components/jspm_packages/system.src.js:2891
Chrome 51.0.2704 (Windows 7 0.0.0): Executed 0 of 0 SUCCESS (0 secs / 0 secs)
Test doesn't seem to be running as well.
Folder structure is as following:
components
-[individual components]
-tests folder with simple test
-app.js(includes master component which calls all child components)
Application is working fine, but I am running into lot of problems with testing.
Any kind of help is appreciated.
Following is my package.json file
{
"name": "ui-components",
"version": "1.0.0",
"description": "POC",
"main": "index.js",
"scripts": {
"install": "jspm install && typings install",
"start": "gulp serve"
},
"repository": {
"type": "git",
"url": ""
},
"author": "",
"license": "ISC",
"devDependencies": {
"gulp": "^3.9.1",
"gulp-typescript": "^2.12.2",
"gulp-watch": "^4.3.5",
"jasmine": "^2.4.2",
"jasmine-core": "^2.4.1",
"jspm": "^0.16.30",
"karma": "^0.13.22",
"karma-chrome-launcher": "^0.2.3",
"karma-cli": "file:C:\\Users\\*********\\Downloads\\karma-cli-master",
"karma-jasmine": "^0.3.6",
"karma-jspm": "^2.0.2",
"lite-server": "^2.2.0",
"typescript": "^1.8.10",
"typings": "^1.0.4"
},
"jspm": {
"dependencies": {
"angular": "github:angular/bower-angular#^1.5.0",
"angular-route": "github:angular/bower-angular-route#^1.5.0",
"bootstrap": "github:twbs/bootstrap#^3.3.6",
"css": "github:systemjs/plugin-css#^0.1.20"
},
"devDependencies": {}
}
}
karma.config.js file
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['jasmine', 'jspm'],
files: [
'components/**/*.js',
'components/*.js',
'components/tests/*.spec.js'
],
exclude: [
],
preprocessors: {
},
reporters: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
concurrency: Infinity
})
}
firstTest.spec.js file
import angular from 'angular';
describe("Hello World Tests", () => {
it("First", () => {
expect("TestString").toEqual("");
});
});
Index.html file
<html ng-app="app">
<head>
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<link rel="stylesheet" href="jspm_packages/github/twbs/bootstrap#3.3.6/css/bootstrap.css" />
<link rel="stylesheet" href="style.css" />
<script>
System.import("components/app.js");
</script>
</head>
<body>
<main-component></main-component>
</body>
</html>
app.ts file
import * as angular from 'angular'
import 'components/mainComponent/mainComponent'
angular.module("app", ['mainComponent']);
I figured out that I needed to pass in my .ts files in JSPM array object in karma.config.js file. I couldn't just pass files into following block.
files: [
'components/**/*.js',
'components/*.js',
'components/tests/*.spec.js'
]`
instead this is what it required.
jspm: {
config: "config.js",
packages: "jspm_packages/",
loadFiles: ['components/**/*spec.js'],
serveFiles: ['components/**/*.js']
},
Hopefully this helps someone else.
I am new nodewebkit .I have created simple application of hello world.
index.html
<html>
<head>
<title>Webkit</title>
</head>
<body>
Hello world
</body>
</html>
package.json
{
"name": "sample",
"version": "1.0.0",
"description": "",
"main": "index.html",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"window": {
"title": "Hello world",
"toolbar": false,
"position": "center",
"width": 800,
"height": 650,
"min_width": 800,
"min_height": 650,
"frame": true,
"show": false
},
"author": "",
"license": "ISC"
}
then i have zipped using .nw extension (sample.nw)
after all i have execute by nodewebkit command but i getting following error
24012:0526/113323:ERROR:browser_main_loop.cc(162)] Running without the SUID sandbox! See https://code.google.com/p/chromium/wiki/LinuxSUIDSandboxDevelopment for more information on developing with the sandbox on.
LaunchProcess: failed to execvp:
/usr/lib/node_modules/nodewebkit/nodewebkit/nw
LaunchProcess: failed to execvp:
/proc/self/exe
[24012:0526/113324:ERROR:child_process_launcher.cc(344)] Failed to launch child process
[24012:0526/113324:ERROR:channel.cc(316)] RawChannel read error (connection broken)
Can somebody help to run application ? thanks
I think you have not installed nodewebkit properly
Please install from https://github.com/nwjs/nw.js latest version as per os and replace nodewebkit tools in where it's installed