This question already has answers here:
Can I use puppeteer inside chrome extension
(2 answers)
How to run Puppeteer code in any web browser?
(3 answers)
Closed 11 days ago.
sorry i'm a complete neoobie in this but in a chrome extension I try to use puppeteer in my background.js like:
const puppeteer = require('puppeteer');
and the background.js is in my manifest.json like:
"background": {
"service_worker": "background.js"
},
so I have installed browserify and generated my bundle package with:
browserify background.js -o bundle.js
and im including it in my html file like:
\<!-- popup.html --\>
\<!DOCTYPE html\>
\<html\>
\<body\>
\<script src="bundle.js"\>\</script\>
\<script src="popup.js"\>\</script\>
\</body\>
\</html\>
but it still gives me the "Uncaught ReferenceError: require is not defined" error
so it can't be used in a background.js?
ive tried also:"
browserify -r puppeteer > bundle.js
and adding like this:
<script type="text/javascript" src="bundle.js"></script>
what im missing? , im specting to use puppeteer in the background.js whats the recommendation?
Related
This question already has answers here:
Client on Node.js: Uncaught ReferenceError: require is not defined
(11 answers)
Closed 2 years ago.
I need to have a colormap on my javascript page.
I am using Flask for server side (written in python).
I have a javascript file that requires colormap module (installed using "npm install colormap"), for rendering colormaps on the client side.
I tried to import it from my javascript file index.js
var colormap = import("colormap");
which I got the error:
index.js:2 Uncaught (in promise) TypeError: Failed to resolve module specifier 'colormap'
at index.js:2
and I also tried:
let colormap = require('colormap')
and I got the error require is not defined.
how can I solve it?
I am trying to import the js file with colormap directly into my html (so the javascript file will have reference), but I cant find what file should I import.
The NPM package colormap is not set up well for just importing into a client-side JS script.
If it was, you could just include it in a script tag as described here.
Because it is not, you will have to use Browserify to convert the JS into a file that you can then serve and use in your JS.
This question already has answers here:
How to set environment variables from within package.json?
(21 answers)
Closed 4 years ago.
In my package.json I have the following script:
"scripts": {
"run-trader": "app='member' webpack-dev-server --config ./config/webpack.dev.js "
}
What I achieved with this was that the app variable was passed down as an environment variable to the webpack file, so then inside the file I could do
var app = process.env.app
and get the value member.
Now this doesn't seem to work on windows using the same node and npm version as OSX.
The error that I get is the following:
> app='member' webpack-dev-server --config ./config/webpack.dev.js
npm : 'app' is not recognized as an internal or external command,
At line:1 char:1
+ npm run-script run-member
+ ~~~~~~~~~~~~~~~~~~~~~~~~~
+ CategoryInfo : NotSpecified: ('app' is not re...ternal command,:String) [], RemoteException
+ FullyQualifiedErrorId : NativeCommandError
Does anyone know how to fix this? It looks like it is trying to run a script called app.
Note: I have other scripts very similar to this one and they all work on OSX but they don't on windows; the difference is the appname.
I think cross-env this lib would help you.
Change your script:
cross-env app=member webpack-dev-server --config ./config/webpack.dev.js
It should work.
This question already has answers here:
How to import ES6 modules in content script for Chrome Extension
(11 answers)
Closed 2 years ago.
Since the latest Firefox supports ES Modules without flags as well as Chrome, I would like to use import/export for my web extension (add-on). Pop up, background and option pages were OK by simply using <script type="module">.
How do you make modules work in content script?
I tried and saw followings:
(1) Just write import in a acript declared at content_scripts.js in manifest.json
import Foo from './foo.js';
(Chrome) Uncaught SyntaxError: Unexpected identifier
Firefox doesn't work with no errors.
(2) Run through tabs.executeScript()
browser.tabs.executeScript(undefined, {
file: "foo.js",
});
(Chrome) Uncaught SyntaxError: Unexpected identifier
(Firefox) Error: import declarations may only appear at top level of a module
(3) Insert a script element created with type="module"
const el = document.createElement("script");
el.src = browser.extension.getURL("foo.js");
el.type = "module";
document.body.appendChild(el);
(Chrome) Uncaught (in promise) ReferenceError: browser is not defined
(Firefox) ReferenceError: browser is not defined
Do you have any other idea?
One easy solution is using some bundler to bundle your content script.
It may sound complicated, but with bundler like Rollup you can do this very easily with super simple "rollup.config.js" file:
export default {
input: 'content_script.js',
output: {
file: 'bundle_content_script.js',
format: 'iife',
},
};
Rollup will only replace your imports with actual code, so there is no boilerplate and the code is still readable.
You may also want to read:
bundlers comparison: https://medium.com/#ajmeyghani/javascript-bundlers-a-comparison-e63f01f2a364
bundling multiple scripts: https://github.com/rollup/rollup/issues/703
Using bundler will also speed-up loading time, for me it went down from 335ms to 63ms (but I have 100+ modules now).
This question already has answers here:
Importing an external module in TS causes "ReferenceError: require is not defined"
(2 answers)
Closed 6 years ago.
I read official doc for TypeScript, and I copy code from there.
I install commonjs and requerejs.
"devDependencies": {
...
"commonjs": "latest",
"requirejs": "latest"
}
But I get a error in the browser:
ReferenceError: require is not defined
It is index.html:
<!DOCTYPE html>
<body>
<script src="main.js"></script>
</body>
It is main.js after compiling:
"use strict";
var core_1 = require("./some_dir/some_file");
window.onload = function () {
var some = new some_file_1.SomeClass();
};
Browsers don't have a understanding of modules (yet). That means while require() works if you execute it in node only, browsers don't know what to do with it.
There are 2 main methods of fixing this:
Remove the exports/require statements and include every single js file (in correct dependency order) into your html file (as script tags). They will all have the same scope and will work as if there was just one large concatenated file. This solution is pretty bad tho as it destroys scoping, doesn't really work with modules you got with npm and has bad loading times, as it has to fetch multiple js files from the server.
Use a resource bundler like webpack. Webpack will look at all dependant files starting from your main.js file and bundle and compress them down into a single small .js file. This also works for external dependencies (npm). All you have to do then is to include that single bundle.js file into the html.
Basically, I am using javascript to scrape data from Google Play store using:
1-Request
2-Cheerios
3-QueryString
I used Google Market API from Github which uses require as following:
var request = require('request');
var cheerio = require('cheerio');
var qs = require('querystring');
But I am getting the following
Uncaught ReferenceError: require is not defined ...
So, I don't have to require() in javascript which is either new for me or this is something out of the ordinary.
RequireJS is a JavaScript file and module loader. It is optimized for
in-browser use, but it can be used in other JavaScript environments,
like Rhino and Node. Using a modular script loader like RequireJS will
improve the speed and quality of your code.
IE 6+ .......... compatible ✔
Firefox 2+ ..... compatible ✔
Safari 3.2+ .... compatible ✔
Chrome 3+ ...... compatible ✔
Opera 10+ ...... compatible ✔
http://requirejs.org/docs/download.html
Add this to your project: https://requirejs.org/docs/release/2.3.5/minified/require.js
and take a look at this http://requirejs.org/docs/api.html
By default require() is not a valid function in client side javascript. I recommend you look into require.js as this does extend the client side to provide you with that function.
Yes, require is a Node.JS function and doesn't work in client side scripting without certain requirements. If you're getting this error while writing electronJS code, try the following:
In your BrowserWindow declaration, add the following webPreferences field:
i.e, instead of plain mainWindow = new BrowserWindow(), write
mainWindow = new BrowserWindow({
webPreferences: {
nodeIntegration: true
}
});
Require (https://requirejs.org/) is an AMD API . I had a similar issue while implementing monaco-editor in my application. This script tag helped me:
<script src="https://requirejs.org/docs/release/2.3.5/minified/require.js"></script>
Browsers don't have the require method defined, but Node.js does. With Browserify you can write code that uses require in the same way that you would use it in Node.
Use the following command to install browserify
npm install -g browserify
Now recursively bundle up all the required modules like main.js into a single file called bundle.js with the browserify command:
browserify main.js -o bundle.js
Drop a single tag into your html and you're done!
<script src="bundle.js"></script>
For more details click here https://www.npmjs.com/package/browserify and https://browserify.org/#install
For me the issue was I did not have my webpack build mode set to production for the package I was referencing in. Explicitly setting it to "build": "webpack --mode production" fixed the issue.