We Keep Coding

How to import javascript files in background.js in chrome extension using version 3

I am building a chrome extension in version 3 using firebase firestore. I have downloaded all the api in extension and I want to use importScript to fetch the api example: firebase-app.js and firebase-firestore.js. but it not working for me. The error in the console says "TypeError: Failed to execute 'importScripts' on 'WorkerGlobalScope': Module scripts don't support importScripts().".
Is 3 days now searching the net but no solution. Please any help?
Code of the issue

Here's a quick solution: in short, you will need to install webpack, which is a module bundler (it means that its main purpose is to bundle JavaScript files for usage in a browser). If you have npm already set up, you can execute this command in your project:
npm install webpack
After you have done that you can proceed to set up firebase (which, from what I can see from your image, you have already done). You will need to run another command:
npm install firebase
Continuing the setup of webpack, you will need to create a webpack.config.js file and there set the entry and the output. Again, you can find plenty of tutorials online, but here's a quick example implementation:
webpack.config.js:
const CopyWebpackPlugin = require('copy-webpack-plugin');
const webpack = require('webpack');
const path = require('path');
module.exports = {
mode: 'production',
entry: {
main: './src/main'
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader',
],
},
],
},
devServer: {
contentBase: './dist',
overlay: true,
hot: true
},
plugins: [
new CopyWebpackPlugin({
patterns: [
{ from: 'manifest.json', to: 'manifest.json' },
],
}),
new CopyWebpackPlugin({
patterns: [
{ from: 'images', to: 'images' },
],
}),
new CopyWebpackPlugin({
patterns: [
{ from: 'popup.html', to: 'popup.html' },
],
}),
new webpack.HotModuleReplacementPlugin()
],
};
Once you've done that, in your entry file (the entry point), you can import firebase and set it up:
main.js
import { initializeApp } from 'firebase/app';
// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
//...
};
const app = initializeApp(firebaseConfig);
When you run npm start, webpack will create another folder (the 'dist' folder). This folder is the chrome exstension with firebase set up!
Hope I was able to help you. If you have any questions feel free to ask!

Plotly with webpack

I have installed plotly using npm i plotly.js
Added the line import 'plotly.js/dist/plotly' to my plotly import file
Then in webpack followed the instructions here to bundle the files client side.
Added in a custom js file to test plotly
Then added in the plotly scripts to my html page with the package coming first then my custom js.
However I get the error message ReferenceError: Plotly is not defined.
To test I was using the javascript code from this example. I can get it working when I save the file locally found on the plotly site here but not with webpack.
Is there something I am missing or doing wrong? My other packages seem to work fine and I can see plotly.js has successfully been added into the relvent folder client side.
webpack.config.js
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: {
uibundles: path.resolve(__dirname, 'frontend.js'),
plotly: path.resolve(__dirname, 'plotlyimport.js'),
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'public/js')
},
plugins: [new MiniCssExtractPlugin({
filename: '../css/[name].css',
})],
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
},
{
test: /\.js$/,
loader: 'ify-loader'
},
]
}
};

You probably need to use webpack resolve (here) to add the details
Could you try this:
resolve: {
modules: ['node_modules'],
extensions: ['.js']
},

It seems like you need to use webpack externals to solve this issue.
webpack externals : Prevent bundling of certain imported packages and instead retrieve these external dependencies at runtime.
For example, to include plotly from a CDN instead of bundling it:
index.html
<script src="../plotly.js"></script>
webpack.config.js
module.exports = {
//...
externals: {
plotly: 'plotly'
}
};
This leaves any dependent modules unchanged, i.e. the code shown below will still work:
var Plotly = require('plotly.js');
..
..
Plotly.newPlot('myDiv', data, layout, config );
Refer to webpack externals for more details.

Import moment.js in js file in webpack

In my project I use webpack and npm. I installed moment.js : npm install moment. Then I want to import it in my app.js file: import moment from "moment".
But it doesn't work. I get: Can't resolve moment in ...
I try let moment = require('moment');but I get the same error.
But I can require it in my webpack.config.js file without errors.
My app.js file is located on /myapp/frontend/app.js
My webpack.config.js file on:/myapp/webpack.config.js
So, please explain why I can't require moment in my app.js and how can I do this?
My config file:
const webpack = require("webpack");
const NODE_ENV = process.env.NODE_ENV || "development"
const path = require('path');
//example of successfull importing
let moment = require('moment');
console.log(moment(new Date()));
module.exports = {
context: __dirname + "/frontend",
entry: {
app:"./app"
},
output: {
path: path.resolve(__dirname,"./public/js"),
publicPath:"/public/js/",//public path in internet
filename: "build.js"
},
watch: NODE_ENV == "development",
watchOptions:{
aggregateTimeout:100//default = 300
},
devtool: NODE_ENV == "development"?"cheap-inline-module-source-map":"cheap-source-map",
//cheap-inline-module-source-map - to see sources in build.js
//eval - fastest
resolve:{
modules: ['node-modules'],
extensions:['.js']
},
module:{
loaders:[{
test: /\.js$/,
loader:"babel-loader?presets[]=es2015",
exclude: /node_modules/
}]
}
};
if(NODE_ENV == "production"){
module.exports.plugins.push(
new webpack.optimize.UglifyJsPlugin({
compress:{
warnings:false,
unsafe:true,
drop_console:true
}
})
);
}
It is my tree structure without node_modules folder:
SOLVING OF PROBLEM: problem was in my configuration:
resolve:{
modules: ['node-modules'],
extensions:['.js']
},
There is node-modules is wrong, must be node_modules. Simple typo..

For my issue, I have change import {moment} from 'moment' to import * as moment from 'moment'; and it's working now!

Without knowing a bit more about your file structure it's difficult to be certain as to why, but the issue is probably that your webpack config is not finding the moment module in your node_modules.
As a test, ran the following:
//webpack.js
const path = require('path');
module.exports = {
entry: path.join(__dirname, '..', 'public', 'js', 'index.js'),
output: {
filename: 'app.js',
path: path.resolve(__dirname, '..', 'public', 'dist'),
},
};
and then with moment and jquery installed via npm install --save jquery moment, I made a index.js file:
import $ from jquery;
import moment from moment;
const m = moment();
No build errors and no runtime errors when included on the HTML page. Try starting simply first and then build up from there on your webpack config. Also, I'm not sure if webpack does anything with package.json but I noticed you didn't signal the --save option. It's a good habit to get into.

In my case, issue was solved when I put window.moment = require('moment');

Webpack - [HMR] Hot Module Replacement is disabled

I've looked around, but can't get any of the answers I've seen on stackoverflow to work.
I cannot use the command line for webpack or the webpack dev-server; I am restricted to using the Node API.
Below is how I am using webpack.
webpack.config.js
module.exports = {
entry: [
'webpack-dev-server/client?http://localhost:3000',
// i've also tried webpack/hot/dev-server here
'webpack/hot/only-dev-server',
path.join(__dirname, 'src', 'js', 'app.jsx')
],
output: {
path: path.join(__dirname, 'dist', 'js'),
filename: 'script.js',
publicPath: '/dist/'
},
module: {
loaders: [{
test: /\.(js|jsx)$/,
loaders: ['react-hot', 'babel']
}]
},
plugins: []
};
contained in a gulp task "start"
gulp.task('start', function (callback) {
var config = Object.create(require('webpack.config.js'));
config.plugins.push(new webpack.HotModuleReplacementPlugin());
var devServer = new webpackDevServer(webpack(config), {
stats: { colors: true },
contentBase: path.resolve(__dirname, 'dist'),
progress: true,
inline: true,
hot: true
});
});
What I expect
When I run gulp start, I expect the webpack dev server to spin up, allowing me to hit localhost:3000/. This should load an index.html from my project's /dist/ folder. So far so good. I expect that when I make a change to a file (e.g., app.jsx), that the change would be present.
What is actually happening
I am getting the error "[HMR] Hot Module Replacement is disabled", with no further explanation.
Any help would be appreciated. I have been trying to get hot reloading working for a full day.

in your webpack.config.js on the plugins section try this,
plugins: [new webpack.HotModuleReplacementPlugin()]
I know you are pushing the plugin in your gulp task but you have to use --hot --inline on cli or on your npm script

Try to run webpack as
webpack-dev-server --hot --inline in packge.json,
somehow official docs is wrong now.

Making a library importable using webpack and babel

I am trying to publish a package on npm (this one) that I am developing using webpack and babel. My code is written in ES6. I have a file in my sources, index.js, that (for the moment) exports one of my library's core components, it simply goes like this:
import TheGamesDb from './scrapers/thegamesdb';
export { TheGamesDb };
I am using webpack and babel to create a dist index.js that is my package's main file. My webpack.config.js goes like this:
const webpack = require('webpack');
const nodeExternals = require('webpack-node-externals');
module.exports = {
entry: {
index: ['babel-polyfill', './src/index.js'],
development: ['babel-polyfill', './src/development.js']
},
output: {
path: '.',
filename: '[name].js',
library: 'rom-scraper',
libraryTarget: 'umd',
umdNamedDefine: true
},
devtool: 'source-map',
module: {
loaders: [
{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }
]
},
target: 'node',
externals: [nodeExternals()]
};
Now when I load my package in another project and try to import my export TheGamesDb simply like this
import { TheGamesDb } from 'rom-scraper';
I get the error
Uncaught TypeError: Path must be a string. Received undefined
It is to be noted that I am importing my library in electron.
Update: Electron seems to be the main problem here and it is not even my library but a dependency that throws this error (only in Electron)

The problem wasn't any of the things in my question but node-expat not working in electron. I switched to an alternative library and it's all right now.