Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ReferenceError: require is not defined

I'm currently working on a Mozilla Firefox addon.

I have set up a panel and attached a content script to it. I need to communicate between the content scripts and main.js. I'm using the port api of the addon-sdk for this. However for some reason, I can't even get a simple message through between the two.

I am constantly receiving the following error when I test my addon using cfx: "ReferenceError: require is not defined"

Any idea what's wrong?

popup.js

var self = require("sdk/self");
self.port.on("dataToPopup", function (data) { 
$("p.test").text(data);
});

The error is thrown for the first line itself.

main.js

var { ToggleButton } = require('sdk/ui/button/toggle');
var self = require("sdk/self");

var button = ToggleButton({
    id: "my-button",
    label: "my button",
    icon: {
        "16": "./images/tsfm16px.png"
    },
    onChange: handleChange
});

var panel = require("sdk/panel").Panel({
    contentURL: self.data.url("html/popup.html"),
    contentScriptFile: [self.data.url("scripts/jquery-1.9.1.min.js"), self.data.url("scripts/jquery-ui.js"), self.data.url("scripts/popup.js")],    
    onHide: handleHide
});

function handleChange(state) {
    if (state.checked) {
        panel.show({
            position: button
        });
    console.log("panel opened");    
    }
}

function handleHide() {
    button.state('window', {checked: false});
    console.log("panel closed");
}

panel.on("show", function() {
    panel.port.emit("dataToPopup", "flow");
    console.log("data sent");
});

The same error is not being thrown for main.js

Anybody experienced this before?

like image 660
Sriram Sridharan Avatar asked Jun 25 '14 14:06

Sriram Sridharan


People also ask

How do you fix ReferenceError require is not defined?

To solve the "ReferenceError require is not defined" error, remove the type property if it's set to module in your package. json file and rename any files that have a . mjs extension to have a . js extension.

Why require is not working in JavaScript?

This usually happens because your JavaScript environment doesn't understand how to handle the call to require() function you defined in your code. Here are some known causes for this error: Using require() in a browser without RequireJS. Using require() in Node.

How do you fix the error require is not defined in node JS?

You are using require in a Node. If that is set to module , ES6 modules will be enabled and you will run into the error mentioned above (specifically ReferenceError: require is not defined in ES module scope, you can use import instead ). Simply remove that entry and you will be able to use require .

How do you define require in js?

1) require()require() statement basically reads a JavaScript file, executes it, and then proceeds to return the export object. require() statement not only allows to add built-in core NodeJS modules but also community-based and local modules.


1 Answers

Content scripts do not have access to require. Instead self is already declared.

Just remove the require line from popup.js (but not main.js).

See Communicating using "port".

like image 194
nmaier Avatar answered Oct 05 '22 23:10

nmaier