We Keep Coding

How to add external library to Google Chrome with webpack?

I'm creating Google Chrome extension in TypeScript which will modify the page's content dynamically. There is a need for some http client inside this plugin (e.g. node-fetch). Using webpack is it possible to wrap this external library into my main script file (background.js)? Or which approach should be used?
manifest.json:
{
"name": "name",
"description": "descr",
"version": "1.0",
"manifest_version": 3,
"action": {},
"permissions": [
"activeTab",
"scripting"
],
"background": {
"service_worker": "background.js"
}
}
package.json:
{
"name": "plugin",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --config webpack/webpack.config.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#types/chrome": "^0.0.193",
"copy-webpack-plugin": "^11.0.0",
"ts-loader": "^9.3.1",
"typescript": "^4.7.4",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0"
},
"dependencies": {
"node-fetch": "^3.2.10"
}
}
webpack/webpack.config.js:
const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');
module.exports = {
mode: "production",
entry: {
background: path.resolve(__dirname, "..", "src", "background.ts"),
},
output: {
path: path.join(__dirname, "../dist"),
filename: "[name].js",
},
resolve: {
extensions: [".ts", ".js"],
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: "ts-loader",
exclude: /node_modules/,
},
],
},
plugins: [
new CopyPlugin({
patterns: [{from: ".", to: ".", context: "public", noErrorOnMissing: true}]
}),
],
};
src/background.ts:
import fetch from 'node-fetch'
fetch(some_url)
npm run build fails with the error:
ERROR in node:zlib
Module build failed: UnhandledSchemeError: Reading from "node:zlib" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "node:" URIs.

ENOENT: no such file or directory preview.vue, prismic module and nuxt-i18n

I get an error message when I use #nuxtjs/prismic and nuxt-i18n.
Error message :
ERROR ENOENT: no such file or directory, open 'C:\wamp64\www\nuxt-test\prismic\.nuxt\prismic\pages\preview.vue
package.json :
{
"name": "prismic-nuxtjs",
"version": "1.0.0",
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
},
"dependencies": {
"#nuxtjs/axios": "^5.3.6",
"#nuxtjs/dotenv": "^1.4.0",
"#nuxtjs/prismic": "^1.0.1",
"#nuxtjs/pwa": "^3.0.0-0",
"nuxt": "^2.0.0",
"nuxt-i18n": "^6.5.0"
},
"devDependencies": {
"#nuxtjs/tailwindcss": "^1.0.0",
"#nuxtjs/eslint-config": "^1.0.1",
"#nuxtjs/eslint-module": "^1.0.0",
"babel-eslint": "^10.0.1",
"eslint": "^6.1.0",
"eslint-plugin-nuxt": ">=0.4.2",
"#nuxtjs/stylelint-module": "^3.1.0",
"stylelint": "^10.1.0",
"stylelint-config-recommended": "^3.0.0"
}
}
nuxt.config.js :
export default {
mode: 'universal',
/*
** Headers of the page
*/
head: {
title: process.env.npm_package_name || '',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
/*
** Customize the progress-bar color
*/
loading: { color: '#fff' },
/*
** Global CSS
*/
css: [
],
/*
** Plugins to load before mounting the App
*/
plugins: [
],
/*
** Nuxt.js dev-modules
*/
buildModules: [
// Doc: https://github.com/nuxt-community/eslint-module
'#nuxtjs/eslint-module',
// Doc: https://github.com/nuxt-community/stylelint-module
'#nuxtjs/stylelint-module',
// Doc: https://github.com/nuxt-community/nuxt-tailwindcss
'#nuxtjs/tailwindcss'
],
/*
** Nuxt.js modules
*/
modules: [
// Doc: https://axios.nuxtjs.org/usage
'#nuxtjs/axios',
'#nuxtjs/pwa',
// Doc: https://github.com/nuxt-community/dotenv-module
'#nuxtjs/dotenv',
// Doc : https://prismic-nuxt.js.org
'#nuxtjs/prismic',
// Doc : https://nuxt-community.github.io/nuxt-i18n/
['nuxt-i18n', {
lazy: true,
locales: [
{
name: 'French',
code: 'fr',
iso: 'fr-FR',
file: 'fr-FR.js'
},
{
name: 'English',
code: 'en',
iso: 'en-US',
file: 'en-US.js'
},
],
langDir: 'lang/',
defaultLocale: 'fr'
}]
],
/*
** Prismic configuration
*/
prismic: {
endpoint: 'https://nuxt-prismic-20.cdn.prismic.io/api/v2'
},
/*
** Axios module configuration
** See https://axios.nuxtjs.org/options
*/
axios: {
},
/*
** Build configuration
*/
build: {
/*
** You can extend webpack config here
*/
extend (config, ctx) {
}
}
}
At the root, I have a folder /lang containing two files:
/fr-FR.js and /en-US.js
To try to solve this problem, I created a preview file app/prismic/pages/preview.vue
But I get the same message :
ERROR ENOENT: no such file or directory, open 'C:\wamp64\www\nuxt-test\prismic\.nuxt\prismic\pages\preview.vue
Any ideas why ?
Thank you,
Alex.

In your i18n section in nuxt.config.js, set parsePages to false.
Example:
i18n: {
locales: ["nl", "en"],
defaultLocale: "nl",
vueI18n: {
fallbackLocale: "nl",
messages: locales
},
parsePages: false
},
From the documentation:
// By default, custom routes are extracted from page files using babel parser,
// set this to false to disable this
parsePages: true,

webpack 2.6.2, javascript

I've been trying to follow the simplest example on how to set up a minimal react app with webpack... but i can't seem to get the webpack-dev-server to work.. i've tried alot of suggestions here and they dont seem to work. i started off with webpack 3.-.- version and now changed to webpack 2.6.2 still same issue.
this is my package.json file:
{
"name": "react-tutorial",
"version": "1.0.0",
"description": "app to learn how to make react apps",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified...leave no be by force to test\" && exit 1",
"start": "webpack-dev-server --hot"
},
"repository": {
"type": "git",
"url": "git+https://github.com/davidsbelt/react-tutorial.git"
},
"author": "Chuka-ogwude David",
"license": "ISC",
"bugs": {
"url": "****"
},
"homepage": "****",
"dependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-react": "^6.24.1",
"react": "^15.6.1",
"react-dom": "^15.6.1"
},
"devDependencies": {
"webpack": "^2.3.2",
"webpack-dev-server": "^2.4.2"
}
}
this is the webpack.config.js file:
var config = {
entry: './index.js',
output: {//make sure to install
path: '/',
filename: 'bundle.js'
},
devServer: {
inline: true,
port: 8080
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
}
}
module.exports = config
and this is the error i get when i run npm start:
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API sche
ma.
- configuration.entry should be one of these:
object { <key>: non-empty string | [non-empty string] } | non-empty string | [non-empty string] | function
The entry point(s) of the compilation.
Details:
* configuration.entry should be an object.
* configuration.entry should be a string.
* configuration.entry should NOT have duplicate items (items ## 1 and 3 are identical) ({
"keyword": "uniqueItems",
"dataPath": ".entry",
"schemaPath": "#/definitions/common.nonEmptyArrayOfUniqueStringValues/uniqueItems",
"params": {
"i": 3,
"j": 1
},
"message": "should NOT have duplicate items (items ## 1 and 3 are identical)",
"schema": true,
"parentSchema": {
"items": {
"minLength": 1,
"type": "string"
},
"minItems": 1,
"type": "array",
"uniqueItems": true
},
*********
* configuration.entry should be an instance of function
function returning an entry object or a promise..
"
all my files (index.js, App.js, index.html, webpack.config.js, package.json) are in the same directory...
Please help... this seemingly straightforward configuration has cost me a lot of hours.
Thanks...

It looks like you're running a configuration file that matches with webpack the older version 1. In particular, the module.loaders statement no longer exist in webpack > 2, and has been replaced with module.rules see :
https://webpack.js.org/guides/migrating/#module-loaders-is-now-module-rules
Note that there are less changes when migrating from webpack 2 to 3, so I guess the migration guide will be helpful in your case.
Hope this helps!

Strange, I was not able to reproduce your problem with your webpack.config.js file. However, modifying the entry line to the following dumps the same error message :
entry:
[
"./index.js",
"webpack/hot/dev-server",
],
Are you sure you're using the right webpack config file here ? Hope this will help you fix the issue.
Note, on my system, I have webpack#2.7.0, webpack-dev-server#2.8.2

Error running grunt plugin grunt-contrib-cssmin

Grunt newbie here. I'm receiving the following error when I run the grunt task grunt-contrib-cssmin. The modernizr task seems to be working:
Running "cssmin:target" (cssmin) task
Warning: pattern.indexOf is not a function Use --force to continue.
Here is my gruntfile.js
module.exports = function(grunt) {
grunt.initConfig ({
// Do grunt-related things in here
pkg: grunt.file.readJSON('package.json'),
modernizr_builder: {
build: {
options: {
features: 'pointerevents',
dest: 'javascripts/modernizr-custom.js'
}
}
},
cssmin: {
/*options: {
shorthandCompacting: false,
roundingPrecision: -1
},*/
target: {
files: {
files: {
'css/min/bigvideo.min.css': ['css/bigvideo.css']
}
}
}
},
});
grunt.loadNpmTasks('grunt-modernizr-builder');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.registerTask('default',['modernizr_builder', 'cssmin']);
};
Here is my package.json file, I have the grunt-contrib-css installed in the project directory
{
"name": "bootstrap-wp-less",
"version": "1.0.0",
"description": "No desc",
"main": "index.js",
"scripts": {
"test": "test"
},
"author": "Me",
"license": "ISC",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-cssmin": "^0.14.0",
"grunt-modernizr-builder": "^0.1.7"
}
}

My error was in the cssmin task, changed to:
cssmin: {
/*options: {
shorthandCompacting: false,
roundingPrecision: -1
},*/
target: {
files: {
'css/min/bigvideo.min.css': ['css/bigvideo.css']
}
}
},

Copy all files but ignored in .gitignore

I want to copy all files to another dir (with grunt-contrib-copy) except files that are listed in .gitignore.
This is my current setup:
.gitignore:
/vendor
/node_modules
package.json:
{
"name": "grunt-cpy",
"version": "1.0.0",
"description": "",
"main": "Gruntfile.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"gitignore-globs": "^0.1.1",
"grunt": "^0.4.5",
"grunt-cli": "~0.1.11",
"grunt-contrib-copy": "^0.7.0",
"grunt-contrib-clean": "^0.6.0"
}
}
Gruntfile.js
module.exports = function (grunt) {
var parse = require('gitignore-globs');
var globs = parse('.gitignore', { negate: true } );
grunt.log.ok( globs );
// Project configuration.
grunt.initConfig({
pkg : grunt.file.readJSON( 'package.json' ),
clean: {
pre_build: [
'build/'
]
},
copy: {
build: {
options : {
mode :true
},
src: [
'**',
globs
],
dest: 'build/'
}
}
});
grunt.loadNpmTasks( 'grunt-contrib-clean' );
grunt.loadNpmTasks( 'grunt-contrib-copy' );
grunt.registerTask( 'default', [ 'clean:pre_build', 'copy'] );
};
Debug output of globs:
!/vendor,!/vendor/**,!/node_modules,!/node_modules/**
But it doesn't work this way. It just copies everything. I also tried the package 'gitignore-to-glob' and 'grunt-copy-to'. Can somebody help to archive this?
I'm on Windows.