ReferenceError: require not defined

Question

I am currently working on a Mozilla Firefox add-on.

I installed the panel and connected the content script to it. I need to communicate between content scripts and main.js. For this, I use the api port for addon-sdk. However, for some reason I cannot even get a simple message between them.

I constantly get the following error when checking my addon with cfx: "ReferenceError: require not defined"

Any idea what's wrong?

popup.js

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

Error for the first line.

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 called for main.js

Has anyone experienced this before?

Answer 1

Content scripts do not have access to require . Instead, self has already been declared .

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

See Communication using the "port" .