i need to create chrome extension that can call c++ from js so i use nodeapi
and to achieve that I used the node-gyp
package.json
{
"name": "test",
"version": "0.13.0",
"description": "test",
"main": "./index.js",
"files": [
"index.js"
],
"engines": {
"node": ">=12.0.0"
},
"scripts": {
"test": "node index.js",
"build": "node-gyp rebuild",
"clean": "node-gyp clean",
"install": "prebuild-install --runtime napi || node-gyp rebuild"
},
"dependencies": {
"bindings": "^1.5.0",
"browserify": "^17.0.0"
"node-addon-api": "^3.0.2",
"prebuild-install": "^6.0.0"
},
"devDependencies": {
"babel-eslint": "^10.1.0",
"chai": "^4.1.2",
"chai-spies": "^1.0.0",
"eslint": "^6.8.0",
"eslint-plugin-import": "^2.20.1",
"eslint-plugin-json": "^1.2.0",
"eslint-plugin-mocha": "^6.2.2",
"mocha": "^5.0.4",
"node-gyp": "^9.1.0",
"prebuild": "^10.0.1",
"rimraf": "^2.6.2"
},
"gypfile": true
}
binding.gyp
{
"targets": [
{
'target_name': 'hello',
'sources': [ 'hello.cc' ],
'defines': [
'_LARGEFILE_SOURCE',
'_FILE_OFFSET_BITS=64',
'NAPI_DISABLE_CPP_EXCEPTIONS'
],
'cflags!': ['-ansi', '-fno-exceptions' ],
'cflags_cc!': [ '-fno-exceptions' ],
'cflags': ['-g', '-exceptions'],
'cflags_cc': ['-g', '-exceptions'],
'include_dirs': [
"<!#(node -p \"require('node-addon-api').include\")"
],
'dependencies': [
"<!(node -p \"require('node-addon-api').gyp\")"
],
},
]
}
hello.cc
#include <napi.h>
Napi::String Method(const Napi::CallbackInfo& info) {
Napi::Env env = info.Env();
return Napi::String::New(env, "Hello Calling From Cpp");
}
Napi::Object Init(Napi::Env env, Napi::Object exports) {
exports.Set(Napi::String::New(env, "hellocc"), Napi::Function::New(env, Method));
return exports;
}
NODE_API_MODULE(hello, Init)
index.js
'use strict'
var addon = require('bindings')('hello');
function testingfromjs(){
return addon.hellocc();
}
exports.testingfromjs= testingfromjs;
the problem is it works fine with commands like node index.js
but it didn't work when it build as chrome extension
i imported it as dependency and use this as required in the main.js of chrome extension but it didn't work
Related
Can't seem to get my Jest working. It works fine in other files, but in one particular file in which I import react-native-elements by #rneui/base it throws me this error:
● Test suite failed to run
SyntaxError: <project_root>/node_modules/#rneui/base/dist/AirbnbRating/AirbnbRating.js: Unexpected token, expected "," (4:22)
2 | import { AirbnbRating as TapRating, } from 'react-native-ratings';
3 | export const AirbnbRating = (props) => {
> 4 | return <TapRating {...props}/>;
| ^
5 | };
6 | AirbnbRating.displayName = 'AirbnbRating';
I added #rneui or #rneui/base to transformIgnore, which fixed my previous issue (SyntaxError: Unexpected token 'export' in same library). But no luck so far with this issue...
Here some details:
jest.config.js
// jest.config.js
module.exports = {
preset: 'react-native',
globals: {
'ts-jest': {
tsconfig: 'tsconfig.spec.json',
babelConfig: true,
diagnostics: {
exclude: ['**'],
},
useESM: true,
},
},
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
transform: {
'^.+\\.(js|jsx)$': 'babel-jest',
'^.+\\.(ts|tsx)$': 'ts-jest',
},
transformIgnorePatterns: [
'<rootDir>/node_modules/(?!#react-native|react-native|#rneui)',
],
modulePaths: ['<rootDir>'],
testRegex: '(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$',
testPathIgnorePatterns: ['<rootDir>/node_modules/', '\\.snap$'],
cacheDirectory: '.jest/cache',
};
babel.config.js
module.exports = {
presets: [
['#babel/preset-env', { targets: { node: 'current' } }],
'#babel/preset-typescript',
],
plugins: [
[
'react-native-reanimated/plugin',
{
globals: ['__scanCodes'],
},
],
'#babel/plugin-transform-flow-strip-types',
'#babel/plugin-transform-modules-commonjs',
'#babel/plugin-transform-runtime',
],
};
package.json
{
"name": "project_name",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint \"**/*.{ts,tsx}\"",
},
"dependencies": {
"#react-native-async-storage/async-storage": "1.17.5",
"#react-navigation/native": "6.0.10",
"#react-navigation/native-stack": "6.6.2",
"#rneui/base": "github:react-native-elements/react-native-elements#base",
"#rneui/themed": "github:react-native-elements/react-native-elements#themed",
"#sentry/react-native": "4.1.3",
"#types/react-native-sqlite-storage": "5.0.2",
"better-react-native-image-viewing": "0.2.3",
"lodash": "4.17.21",
"react": "17.0.2",
"react-native": "0.68.1",
"react-native-safe-area-context": "4.2.5",
"react-native-screens": "3.13.1",
},
"devDependencies": {
"#babel/core": "7.18.10",
"#babel/plugin-transform-flow-strip-types": "7.18.9",
"#babel/plugin-transform-modules-commonjs": "^7.18.6",
"#babel/plugin-transform-runtime": "7.18.5",
"#babel/preset-env": "7.18.10",
"#babel/preset-typescript": "7.18.6",
"#babel/runtime": "7.18.3",
"#react-native-community/eslint-config": "2.0.0",
"#testing-library/jest-native": "4.0.11",
"#types/jest": "28.1.7",
"#types/lodash": "4.14.183",
"#types/react-native": "0.67.6",
"#types/react-test-renderer": "18.0.0",
"#typescript-eslint/eslint-plugin": "5.22.0",
"#typescript-eslint/parser": "5.22.0",
"babel-jest": "28.1.3",
"eslint": "7.32.0",
"jest": "28.1.3",
"metro-react-native-babel-preset": "0.67.0",
"react-test-renderer": "17.0.2",
"ts-jest": "28.0.8",
"typescript": "4.6.4"
},
"resolutions": {
"#types/react": "17"
}
}
Does anyone have an idea what the issue could be?
Thanks a lot, don't seem to find anything helpful...
We have a rather large React project.
Currently when we try to debug it from browser like Chrome, it looks like the following.
!function(){var r,n,e=(n={}
,__webpack_require__.m=r=[function(e,t)
{e.exports=PropTypes},function(e,t)
{e.exports=React},function(e,t,r)
{"use strict";function _typeof(e)
Now this is just part of it and there are 1000s and 1000s of lines of this.
When I try to place breakpoints to debug, I end up with minified version like:
var a = b.l - c.m
Find it extremely unreadable and hard to determine which part of the code it is pointing to.
Is there a way, like a setting in package.json maybe.
Where I can set it such that when I am performing debug work, don't show minified version.
Instead show me the es6 code I have written.
I use Webstorm and somehow, it is so slow when I debug it from there and the breakpoint doesn't always hit even though I am clearly passing the breakpoint.
Thus very unreliable.
Appreciate any help/advice. How to effectively debug a React project?
Is there a way I could add settings to not minify during debug? (localhost and production)
-- UPDATE --
package.json
{
"name": "myproj",
"version": "1.00.0",
"license": "SEE LICENSE IN LICENSE",
"scripts": {
"start": "npm run build && one-run --env domain.com",
"prebuild": "npm run clean",
"build": "rimraf build && bundle-shop-app --clientConfig webpack/client.config.js --serverConfig webpack/server.config.js",
"clean": "rimraf build",
"lint": "eslint --ignore-path .eslintignore --ext js,jsx,snap,md .",
"prepare": "npm run build",
"pretest:browser": "npm run build",
"test:unit": "jest --testPathIgnorePatterns browser a11y",
"test:a11y": "jest a11y --collectCoverage false",
"test": "npm run test:unit",
"posttest": "npm run lint",
"watch:test": "npm run test:unit -- --watch",
"watch:build": "npm run build -- --watch",
"githook:pre-commit": "npm run test",
"githook:commit-msg": "commit-msg"
},
"deploy": {
"from": "storybook-static",
"to": "static",
},
"one": {
"runner": {
"module": [
"."
],
"envVars": {
"KEY": "root"
}
},
"risk": {
"level": "low"
}
},
"jest": {
"preset": "jest-preset-react",
"setupFiles": [
"./test-setup.js"
]
},
"dependencies": {
"classnames": "2.2.6",
"css-loader": "2.1.1",
"focus-visible": "^5.0.2",
"immutable": "^3.7.6",
"lodash": "^4.17.20",
"moment": "^2.29.1",
"prop-types": "^15.7.2",
"react": "^16.14.0",
"react-helmet-async": "^1.0.4",
"react-intl": "^2.2.3",
"react-redux": "^7.0.0",
"react-router": "^3.0.0",
"react-swipeable": "5.5.1",
"redux": "^4.0.0",
"reselect": "^4.0.0",
"style-loader": "^2.0.0"
},
"devDependencies": {
"#babel/polyfill": "^7.4.4",
"babel-preset-amex": "^3.0.0",
"concurrently": "^6.0.0",
"enzyme": "^3.3.0",
"enzyme-to-json": "^3.3.0",
"eslint": "^6.0.0",
"eslint-config-amex": "^11.0.0",
"githook-scripts": "^1.0.1",
"jest": "^24.0.0",
"jest-image-snapshot": "^4.0.0",
"markdown-spellcheck": "^1.3.1",
"react-dom": "^16.14.0",
"react-test-renderer": "^16.14.0",
"underscore": "^1.9.1"
},
"publishConfig": {
"registry": ""
}
}
These are 3 files all inside webpack folder.
base.config.js
const oneMegabyte = 10000000;
module.exports = {
resolve: {
symlinks: false,
},
performance: {
maxEntrypointSize: oneMegabyte,
maxAssetSize: oneMegabyte,
},
};
client.config.js
const path = require('path');
const { cssLoader, sassLoader } = require('domain-cli/webpack/configs');
const base = require('./base.config');
const { name } = require('../package.json');
module.exports = {
...base,
module: {
rules: [
{
test: /\.s?css$/,
include: [
path.join(__dirname, '../src'),
path.join(__dirname, '../node_modules'),
],
oneOf: [
{
resource: /domain-components/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
sassLoader(),
],
},
{
use: [
{ loader: 'style-loader' },
cssLoader({ name }),
sassLoader(),
],
},
],
},
],
},
};
server.config.js
const path = require('path');
const { cssLoader, sassLoader } = require('domain-cli/webpack/configs');
const base = require('./base.config');
const { name } = require('../package.json');
module.exports = {
...base,
module: {
rules: [
{
test: /\.s?css$/,
include: [
path.join(__dirname, '../src'),
path.join(__dirname, '../node_modules'),
],
oneOf: [
{
resource: /domain-components/,
use: [
{
loader: 'bundler/webpack/ssr-css-loader', options: { name },
},
{ loader: 'css-loader' },
sassLoader(),
],
},
{
use: [
{
loader: 'bundler/webpack/ssr-css-loader', options: { name },
},
cssLoader({ name }),
sassLoader(),
],
},
],
},
],
},
};
You need to enable sourcemaps in your webpack config in development.
Source Maps are the files which create a mapping between your source(original) code and your generated code. In other words, a line in your generated code is representing which line of your source code is determined by source maps.
I'm trying to create a npm package and
below is my package.json
{
"name": "********",
"version": "1.0.0",
"description": "*****************",
"keywords": [
"exit",
"intent"
],
"main": "dist/*********.js",
"module": "dist/********.es.js",
"umd:main": "dist/********.umd.js",
"files": [
"dist"
],
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"lint": "npm run prettier-eslint -- 'src/**/*.{js,json}'",
"build": "rollup -c",
"dev": "rollup -c -w",
"prettier-eslint": "prettier-eslint --write --no-semi --single-quote --no-bracket-spacing",
"changelog": "standard-version",
"size": "npx gzip-size-cli ./dist/exit-detect.js ",
"precommit": "lint-staged",
"prepush": "npm test",
"prepublish": "npm run build"
},
"lint-staged": {
"src/**/*.{js,json}": [
"npm run prettier-eslint"
]
},
"author": "Amaarshall Yaswankar",
"license": "MIT",
"dependencies": {
"lodash": "^4.17.21"
},
"devDependencies": {
"#babel/core": "^7.15.8",
"#babel/preset-env": "^7.15.8",
"#babel/preset-react": "^7.14.5",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.2.2",
"babel-plugin-external-helpers": "^6.22.0",
"babel-plugin-lodash": "^3.3.4",
"babel-plugin-module-resolver": "^4.1.0",
"babel-preset-stage-2": "^6.24.1",
"eslint": "^7.32.0",
"eslint-config-standard": "^16.0.3",
"eslint-config-standard-jsx": "^10.0.0",
"eslint-import-resolver-node": "^0.3.6",
"eslint-loader": "^4.0.2",
"eslint-plugin-import": "^2.24.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^5.1.0",
"eslint-plugin-react": "^7.26.1",
"eslint-plugin-standard": "^5.0.0",
"husky": "^7.0.2",
"lint-staged": "^11.2.0",
"prettier": "^2.4.1",
"prettier-eslint-cli": "^5.0.1",
"rollup": "^2.58.0",
"rollup-plugin-babel": "^4.4.0",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-uglify": "^6.0.4",
"rollup-watch": "^4.3.1",
"standard-version": "^9.3.1",
"uglify-es": "^3.3.9"
},
"homepage": "https://github.com/********/*********#readme"
}
I'm using using rollup to build my package and below is the config file rollup.config.js
import resolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'
import babel from 'rollup-plugin-babel'
import {uglify} from 'rollup-plugin-uglify'
import {minify} from 'uglify-es'
import fs from 'fs'
const pkg = JSON.parse(fs.readFileSync('./package.json'))
export default {
name: '*********',
input: 'src/********.js',
output: [
{format: 'es', file: pkg.module},
{format: 'cjs', file: pkg.main},
{format: 'umd', file: pkg['umd:main']}
],
plugins: [
resolve(),
commonjs(),
babel({
babelrc: false,
exclude: 'node_modules/**',
presets: [
[
'#babel/preset-env',
{
modules: false,
loose: true,
targets: {browsers: ['last 2 versions', '> 1%']}
}
],
'#babel/preset-react',
'babel-preset-stage-2'
],
plugins: ['external-helpers']
}),
uglify({}, minify)
]
}
Now that all the babel packages are updated, I have tried updating the things as per the new versions. But still I'm facing the below error when I run npm run build.
rollup v2.58.0
bundles src/exit-detect.js → dist/exit-detect.es.js, dist/exit-detect.js, dist/exit-detect.umd.js...
[!] (plugin babel) Error: Plugin/Preset files are not allowed to export objects, only functions.
Not sure why this is happening, need your help guys
Thanks in advance
I want to use the async/await pattern with my new Vue.js project. However, after my first try, it threw an error:
<template>
<div>
<table>
<tr>
<th>Test</th>
</tr>
<tr v-for="(value, name) in pickingList">
<td>{{value}}</td>
</tr>
</table>
s
</div>
</template>
<script>
export default {
name: 'Test',
data() {
return {
pickingList: null,
pickingZone: '1006'
}
},
async created() {
await this.getPickingList();
},
methods: {
async getPickingList() {
this.pickingZone = await this.$http.get("Picking/PickingZoneLists/" + this.pickingZone);
}
}
}
</script>
This throws the folloring error:
webpack-internal:///./node_modules/vue/dist/vue.esm.js:629 [Vue warn]:
Error in created hook: "ReferenceError: regeneratorRuntime is not
defined"
found in
---> at src/views/Test.vue
at src/containers/TheContainer.vue
at src/App.vue
warn # webpack-internal:///./node_modules/vue/dist/vue.esm.js:629
webpack-internal:///./node_modules/vue/dist/vue.esm.js:1896
ReferenceError: regeneratorRuntime is not defined
at VueComponent.created (webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/Test.vue?vue&type=script&lang=js&:25)
at invokeWithErrorHandling (webpack-internal:///./node_modules/vue/dist/vue.esm.js:1862)
at callHook (webpack-internal:///./node_modules/vue/dist/vue.esm.js:4216)
at VueComponent.Vue._init (webpack-internal:///./node_modules/vue/dist/vue.esm.js:5001)
at new VueComponent (webpack-internal:///./node_modules/vue/dist/vue.esm.js:5147)
at createComponentInstanceForVnode (webpack-internal:///./node_modules/vue/dist/vue.esm.js:3289)
at init (webpack-internal:///./node_modules/vue/dist/vue.esm.js:3120)
at merged (webpack-internal:///./node_modules/vue/dist/vue.esm.js:3307)
at createComponent (webpack-internal:///./node_modules/vue/dist/vue.esm.js:5973)
at createElm (webpack-internal:///./node_modules/vue/dist/vue.esm.js:5920)
After some research, I found a solution which suggested to install the following two babel plugins:
#babel/polyfill
#babel/plugin-transform-regenerator
I've installed them via npm and added them to my babel.config.js file:
module.exports = {
presets: [
['#babel/preset-env']
],
plugins: [
['#babel/polyfill'],
['#babel/plugin-transform-regenerator']
]
}
After that, my page crashes immediately with an unspecific error page full of SocketExceptions and HttpRequestExceptions:
Failed to proxy the request to http://localhost:8081/mypage, because
the request to the proxy target failed. Check that the proxy target
server is running and accepting requests to http://localhost:8081/.
The underlying exception message was 'Es konnte keine Verbindung
hergestellt werden, da der Zielcomputer die Verbindung
verweigerte.'.Check the InnerException for more details.
Were the two babel plugins even the right track? If yes, how can I fix the problem?
I also found this related post, but I don't have a webpack config file. Here's my vue.config.js:
module.exports = {
lintOnSave: false,
runtimeCompiler: true,
configureWebpack: {
//Necessary to run npm link https://webpack.js.org/configuration/resolve/#resolve-symlinks
resolve: {
symlinks: false
}
}
}
Finally, here's my package.json:
{
"name": "#coreui/coreui-free-vue-admin-template",
"version": "3.0.0-beta.3",
"description": "Open Source Bootstrap Admin Template",
"author": {
"name": "CoreUI",
"url": "https://coreui.io",
"github": "https://github.com/coreui",
"twitter": "https://twitter.com/core_ui"
},
"contributors": [
{
"name": "CoreUI Team",
"url": "https://github.com/orgs/coreui/people"
}
],
"homepage": "http://coreui.io",
"copyright": "Copyright 2019 creativeLabs Łukasz Holeczek",
"license": "MIT",
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:unit": "vue-cli-service test:unit",
"test:e2e": "vue-cli-service test:e2e",
"clearCache": "jest --clearCache",
"release": "npm-run-all clearCache lint build test:unit test:e2e"
},
"dependencies": {
"#coreui/coreui": "^3.0.0-beta.4",
"#coreui/icons": "^1.0.0",
"#coreui/utils": "^1.0.0",
"#coreui/vue": "^3.0.0-beta.4",
"#coreui/vue-chartjs": "^1.0.2",
"axios": "^0.19.2",
"vue": "^2.6.10",
"vue-axios": "^2.1.5",
"vue-router": "^3.1.3"
},
"devDependencies": {
"#babel/core": "^7.7.5",
"#babel/plugin-transform-regenerator": "^7.8.3",
"#babel/polyfill": "^7.8.3",
"#vue/cli-plugin-babel": "^4.1.1",
"#vue/cli-plugin-e2e-nightwatch": "^4.1.1",
"#vue/cli-plugin-eslint": "^4.1.1",
"#vue/cli-plugin-unit-jest": "^4.1.1",
"#vue/cli-service": "^4.1.1",
"#vue/test-utils": "1.0.0-beta.29",
"babel-eslint": "^10.0.3",
"babel-jest": "^24.9.0",
"chromedriver": "^79.0.0",
"core-js": "^3.4.8",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.0.1",
"node-sass": "^4.13.0",
"npm-run-all": "^4.1.5",
"sass-loader": "^8.0.0",
"vue-template-compiler": "^2.6.10"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 9"
],
"engines": {
"node": ">= 8.10.x",
"npm": ">= 5.6.0"
}
}
I found a relatively recent Medium post on this subject. #babel/polyfill is deprecated. You'll need to install #babel/runtime and #babel/plugin-transform-runtime, then make some changes to your babel.config.js:
npm i -D #babel/plugin-transform-runtime
npm i #babel/runtime
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
[
"#babel/plugin-transform-runtime",
{
// "absoluteRuntime": false,
"corejs": false,
// "helpers": true,
"regenerator": true,
// "useESModules": false
}
]
]
}
Source Article: https://medium.com/#kishan020696/react-16-with-webpack-4-and-babel-7-part-2-edb34d78f695
I am working on a build script that uses rollup along with other tools to build stuff. Everything works well individully, but npm-watch is being very selective in what it listens to. I have confiured it to use four different eatches, but only one (watch:js) responds. Here is a link to the repo. Here is the package.json:
{
"name": "es6_rollup_seed",
"version": "1.0.0",
"description": "an npm build environment that implements rollup.js",
"main": "index.js",
"watch": {
"watch:html": {
"patterns": [
"src"
],
"extensions": "html"
},
"watch:js": {
"patterns": [
"src/js"
],
"extensions": "js"
},
"watch:img": {
"patterns": [
"src/img"
],
"extensions": "jpg,png,svg,gif"
},
"watch:css": {
"patterns": [
"src/scss"
],
"extensions": "scss"
}
},
"scripts": {
"test": "npm run test",
"start": "run-s init:*",
"init:create-folders": "mkdirp build/js build/css build/img",
"init:copy-content": "run-s copy-html",
"init:start": "run-p serve watch:*",
"serve": "lite-server -c bs-config.json",
"watch:html": "npm-watch copy-html",
"watch:js": "npm-watch compile-js",
"watch:img": "npm-watch copy-images",
"watch:css": "npm-watch compile-css",
"copy-html": "cpx src/*.html build",
"copy-images": "cpx src/img/*.* build/img",
"compile-js": "rollup -c",
"compile-css": "node-sass --output-style expanded --source-map true src/scss/app.scss --output build/css"
},
"repository": {
"type": "git",
"url": "git+https://github.com/sean-olson/build_environments.git"
},
"keywords": [
"rollup",
"build",
"tool",
"npm"
],
"author": "Sean Olson",
"license": "MIT",
"bugs": {
"url": "https://github.com/sean-olson/build_environments/issues"
},
"homepage": "https://github.com/sean-olson/build_environments#readme",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-preset-es2015-rollup": "^3.0.0",
"cpx": "^1.5.0",
"lite-server": "^2.3.0",
"node-sass": "^4.7.2",
"npm-run-all": "^4.1.2",
"npm-watch": "^0.3.0",
"rollup": "^0.56.5",
"rollup-plugin-babel": "^3.0.3",
"rollup-plugin-commonjs": "^9.0.0",
"rollup-plugin-node-resolve": "^3.2.0",
"rollup-plugin-replace": "^2.0.0"
}
}
The solution is to use another module, in this case watch-cli