We Keep Coding

node-gyp c++ chrome extension

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

Debug React in non minified version

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.

Browserify + Gulp + Babelify ~ import' and 'export' may appear only with 'sourceType: module

I'm working on a project and want to use gulp to automate some tasks, to compile js and other code.
I'm using Browserify and Babelify in combination with the babel-eslint to set my sourcetype to module however i still get this ParseError when I'm trying to import node_modules in my main.js file
ParseError: 'import' and 'export' may appear only with 'sourceType:
module'
Is there a way to fix this?
My gulp file
const gulp = require('gulp');
const sass = require('gulp-sass');
const minify = require('gulp-minify');
const rename = require('gulp-rename');
const browserify = require('browserify');
const babelify = require('babelify');
const tap = require('gulp-tap');
const flatmap = require('gulp-flatmap');
const logger = require('gulplog');
const source = require('vinyl-source-stream');
const sourcemaps = require('gulp-sourcemaps');
const buffer = require('vinyl-buffer');
const babel = require('gulp-babel');
const plumber = require('gulp-plumber');
gulp.task('default', function () {
let b = browserify({
entries: './resources/js/main.js',
debug: true,
cache: {},
packageCache: {},
fullPaths: true,
transform: [babelify.configure({
presets: ['#babel/preset-env']
})]
})
return b.bundle()
.pipe(source('main.js'))
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true}))
// Add other gulp transformations (eg. uglify) to the pipeline here.
.on('error', (error) => {
logger.error(error);
})
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./public/js/'));
});
Package.json
{
"name": "portfolio",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"bulma": "^0.9.0"
},
"devDependencies": {
"#babel/cli": "^7.10.5",
"#babel/core": "^7.10.5",
"#babel/preset-env": "^7.10.4",
"#vizuaalog/bulmajs": "^0.11.0",
"babel-eslint": "^8.2.6",
"babelify": "^10.0.0",
"browserify": "^16.5.1",
"eslint": "^4.19.1",
"gulp": "^4.0.2",
"gulp-babel": "^8.0.0",
"gulp-flatmap": "^1.0.2",
"gulp-minify": "^3.1.0",
"gulp-plumber": "^1.2.1",
"gulp-rename": "^2.0.0",
"gulp-sass": "^4.1.0",
"gulp-sourcemaps": "^2.6.5",
"gulp-tap": "^2.0.0",
"gulplog": "^1.0.0",
"node-sass": "^4.14.1",
"vinyl-buffer": "^1.0.1",
"vinyl-source-stream": "^2.0.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"browserify": {
"transform": [
[
"babelify",
{
"presets": [
"#babel/preset-env"
]
}
]
]
},
"author": "",
"license": "ISC"
}
eslint.rc
{
"ecmaFeatures": {
"modules": true,
"spread": true,
"restParams": true
},
"env": {
"browser": true,
"node": true,
"es6": true
},
"rules": {
"no-unused-vars": 2,
"no-undef": 2
},
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module"
}
}

Webpack + Karma + ES2015: Uncaught SyntaxError: Unexpected token import

I'm creating an app based on Webpack and angular. I'm trying to add Karma for unit testing using Mocha and Chai. However, when I try to run my tests I'm getting the following error:
Chrome 52.0.2743 (Linux 0.0.0) ERROR
Uncaught SyntaxError: Unexpected token import
at app/app.js:3
As you can see from the webpack config below I'm using babel-loader. I've Googled this problem and searched here on StackOverflow and although there are plenty of results, none of the solutions put forward have worked for me.
Here is my Webpack config:
'use strict';
const webpack = require('webpack');
const path = require('path');
const autoprefixer = require('autoprefixer');
const APP = __dirname + '/app';
module.exports = {
context: APP,
entry: {
app: ['webpack/hot/dev-server', './core/bootstrap.js',],
},
output: {
path: APP,
filename: 'bundle.js',
},
module: {
loaders: [
{
test: /\.html$/,
loader: 'raw',
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: [
'file?hash=sha512&digest=hex&name=img/[path][hash].[ext]',
'image-webpack',
],
},
{
test: /\.scss$/,
loader: 'style!css!postcss!sass!sass-resources!scsslint',
},
{
test: /\.js$/,
loader: 'ng-annotate!babel?presets[]=es2015!eslint',
exclude: /node_modules/,
},
],
},
postcss() {
return [autoprefixer,];
},
sassResources: path.resolve(__dirname, './app/components/**/*.scss'),
imageWebpackLoader: {
pngquant: {
quality: "65-90",
speed: 4,
},
svgo: {
plugins: [
{
removeViewBox: false,
},
{
removeEmptyAttrs: false,
},
],
},
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
minimize: true,
output: {
comments: false,
},
compressor: {
warnings: false,
},
}),
],
};
My Karma config:
const webpackConfig = require('./webpack.config.js');
webpackConfig.entry = {};
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['mocha', 'chai',],
files: [
'app/**/*.js',
'unit_testing/**/*.test.js',
],
exclude: [
],
preprocessors: {
'spec.bundle.js': ['webpack',],
},
webpack: webpackConfig,
reporters: ['progress',],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: false,
browsers: ['Chrome',],
singleRun: true,
concurrency: Infinity,
});
};
And the offending app.js:
// Controllers
import homeCtrl from './components/home/homeCtrl.js';
// Services
import Person from './components/services/person.service.js';
(function() {
'use strict';
const app = angular.module('app', ['ui.router',]);
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider.state('home', {
url: '/',
template: require('./components/home/home.html'),
controller: 'homeCtrl',
});
},]);
app.controller('homeCtrl', homeCtrl);
app.service('Person', Person);
module.exports = app;
}());
My package.json
{
"name": "odsc-webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"e2e": "./node_modules/.bin/protractor",
"e2e:local": "npm run e2e e2e.local.config.js",
"e2e:check": "npm run e2e e2e.check.config.js",
"test": "echo \"Error: no test specified\" && exit 1",
"build": "node_modules/.bin/webpack",
"dev": "webpack-dev-server --devtool eval --config webpack.config.js --progress --colors --hot --content-base app/ --host 0.0.0.0",
"eslint": "eslint ./app",
"scss-lint": "scss-lint",
"lint": "npm run eslint && npm run scss-lint",
"webdriver-manager": "./node_modules/.bin/webdriver-manager",
"webdriver-update": "npm run webdriver-manager update"
},
"pre-commit": [
"lint"
],
"author": "",
"license": "ISC",
"devDependencies": {
"angular": "^1.5.8",
"angular-mocks": "^1.5.8",
"angular-ui-router": "^0.3.1",
"autoprefixer": "^6.4.0",
"babel-core": "^6.14.0",
"babel-loader": "^6.2.5",
"babel-preset-es2015": "^6.14.0",
"babel-preset-stage-0": "^6.5.0",
"chai": "^3.5.0",
"chai-as-promised": "^5.3.0",
"css-loader": "^0.24.0",
"cucumber": "^1.2.2",
"eslint": "^3.4.0",
"eslint-loader": "^1.5.0",
"image-webpack-loader": "^2.0.0",
"karma": "^1.2.0",
"karma-chai": "^0.1.0",
"karma-chrome-launcher": "^2.0.0",
"karma-mocha": "^1.1.1",
"karma-webpack": "^1.8.0",
"mocha": "^3.0.2",
"ng-annotate-loader": "^0.1.1",
"node-sass": "^3.8.0",
"postcss-loader": "^0.11.1",
"pre-commit": "^1.1.3",
"protractor": "^4.0.4",
"protractor-cucumber-framework": "^0.6.0",
"raw-loader": "^0.5.1",
"sass-loader": "^4.0.0",
"sass-resources-loader": "^1.1.0",
"scsslint-loader": "^0.1.1",
"style-loader": "^0.13.1",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.15.0"
}
}
.babelrc
{
"presets": ["es2015", "stage-0"]
}

Grunt Task default not found

When I run the command grunt I receive the error:
Warning: Task "default" not found. Use --force to continue.
My Gruntfile.js :
module.export = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
files: {
'dist/flatify.css':'sass/style.scss'
}
}
},
autoprefixer: {
dist: {
files: {
'dist/dist/flatify.css':'dist/flatify.css'
}
}
},
cssmin: {
css: {
scr: 'dist/flatify.css',
dest: 'dist/flatify.min.css'
}
},
watch: {
css:{
files: '**/*.scss',
tasks: ['sass','autoprefixer','cssmin:css']
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['sass','autoprefixer', 'cssmin']);
}
My package.json:
{
"name": "Flatify",
"version": "0.0.1",
"description": "An beautiful CSS framework",
"repository": {
"type": "git",
"url": "https://github.com/1ClickComputing/Flatify.git"
},
"keywords": [
"CSS"
],
"author": "",
"license": "MIT",
"bugs": {
"url": "https://github.com/1ClickComputing/Flatify/issues"
},
"homepage": "https://github.com/1ClickComputing/Flatify",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-autoprefixer": "^2.0.0",
"grunt-contrib-cssmin": "^0.10.0",
"grunt-contrib-sass": "^0.8.1",
"grunt-contrib-uglify": "^0.6.0",
"grunt-contrib-watch": "^0.6.1"
}
}

The first line is incorrect in your Gruntfile. Should be:
module.exports = function (grunt)
It misses the s at exports.