How to get a Brackets module to work properly? - javascript

I forked Brackets, because I'm planning to make a code editor fully integrated if Steam. To do so, using Javascript, I add a git submodule on the thirdparty folder to use the greenworks repo (a solution to make Steamworks work with Javascript). I loaded this module on brackets.js, like so:
// Load greenworks module
var greenworks = require("thirdparty/greenworks/greenworks");
But when I call it, either on my extension, or even on console, it says:
[Extension] failed to load C:/Program Files (x86)/Brackets/dev/src/extensions/dev/greenworks - Error: Module name "/thirdparty/greenworks/greenworks" has not been loaded yet for context: _
or
Error: Module name "/thirdparty/greenworks/greenworks" has not been loaded yet for context: _
Besides brackets.js, where else should I call greenworks module before I use it (on a extension, or on the console for testing purposes)?

Related

Accessing prototype function from node modules

I need to implement 3rd party rest API in php project for integrating another project which is in angular.
Using rest API, I need to store cookie in the browser and cookie value will be in a specific format as instructed for which I need to import a specific npm package called angular2-cookie inside my root directory from
https://github.com/salemdar/angular2-cookie/blob/master/src/services/cookies.service.ts
I successfully installed it using npm command inside root directory.
In /js/sample-script.js
I imported the specific cookies.service.js file from that angular2-cookie module using browserify lib like
var CookieService = require('../node_modules/angular2-cookie/services/cookies.service');
var cs = new CookieService();
cs.putObject('somecookie',{user: 'john'});
but in the console, I am getting an error like:
Uncaught TypeError: CookieService is not a constructor
How can I implement putObject method from CookieService prototype?
Note: There is no error coming till 1st line where I used require method

How to include "require" in PhpStorm for my JavaScript code?

I am using the line canvg('canvas', svg); in my code. This means I need canvg.js.
I have included canvg.js in my html header. However it gives me an error that "require is undefined".
For those that don't know the first two lines of canvg.js are:
var RGBColor = require('rgbcolor'),
StackBlur = require('stackblur-canvas');
This first showed up in my console as an error. This wasn't really a problem as the code still worked.
Now that I am on to testing though the errors cause the tests not to run. This is an issue.
error loading file: /test/tests/Dependencies/canvg.js:4: Uncaught ReferenceError: require is not defined
I went to https://requirejs.org/docs/release/2.3.6/comments/require.js and copied and pasted the code to a file called require236.js and saved it in my project.
I then went to my main.html an added my <script src="require236.js"></script>
right before canvg is loaded.
I got these errors in the console:
Uncaught Error: Mismatched anonymous define() module: function(){return f}
https://requirejs.org/docs/errors.html#mismatch
at makeError (require236.js:168)
at intakeDefines (require236.js:1254)
at require236.js:1452
require236.js:143 Uncaught Error: Module name "rgbcolor" has not been loaded yet for context: _. Use require([])
https://requirejs.org/docs/errors.html#notloaded
at makeError (require236.js:168)
at Object.localRequire [as require] (require236.js:1436)
at requirejs (require236.js:1797)
at canvg.js:4
And my tests do not run with that file as a dependency.
https://requirejs.org/docs/errors.html#mismatch says
To avoid the error:
Be sure to load all scripts that call define() via the RequireJS API.
Do not manually code script tags in HTML to load scripts that have
define() calls in them.
If you manually code an HTML script tag, be sure it only includes named
modules, and that an anonymous module that will have the same name as one
of the modules in that file is not loaded.
If the problem is the use of loader plugins or anonymous
modules but the RequireJS optimizer is not used for file bundling, use
the RequireJS optimizer.
If the problem is the var define lint approach, use /*global define */ (no
space before "global") comment style instead.
But I honestly do not understand how they expect to include it and where. Please use simple English words (or just show a code sample) if you understand it enough to explain it.
I am running from PhpStorm. I am testing with jsTestDriver. I must be declaring it wrong somehow but I have no clue how and why require.js is giving me such issues.
Simple answer is that the file you have included is not supposed to be run in browser, as it uses the CommonJS syntax that can only be used in server-side code run by node.js.
You have to make sure to include the browser version of your library that doesn't have any require() calls, like:
<script src="https://cdn.jsdelivr.net/npm/canvg/dist/browser/canvg.min.js"></script>
see https://github.com/canvg/canvg#usage-on-the-browser

Can not get the js file in using requirejs

I'm trying to build client project using requireJs.
But when I published it on the nginx server, an error occurred.
This is my project directory structure
when it ran here, the browser threw a js error.
require(['config/require.conf'], function(){
'use strict';
require(['src/common/js/pageloader'], function(pageloader){
pageloader();
})
})
js error:
GET http://localhost:8011/src/homepage/config/require.conf.js require.js:1961
It seems like the error occurred because I use the relative path (lack of '/').
However, I add the slash as prefix of directory('/config/require.conf').
As a result, when the browser ran here, requirejs didn't add the suffix ".js" for the js file(config/require.conf.js).
Another error occurred~
GET http://localhost:8011/config/require.conf 404 (Not Found)
What should I do for the error? Thanks.
You can pass two things in the dependency list of a require call:
A module name. This is the default. When you pass a module name, RequireJS will convert the name to a path using baseUrl, paths, map, etc. from your RequireJS configuration.
A path. RequireJS considers that you are passing a path if the dependency: a) begins with '/', (which is your case), b) contains an HTML query (e.g. 'foo?bar=1'), c) ends with the .js extension, d) specifies a protocol (e.g. https://).
In this case, RequireJS uses the path as-is, without using its configuration to transform it, and it does not automatically add a .js extension to it.
Your usage is the 2nd case so you have to add .js to your path so that RequireJS can find your file:
require(['/config/require.conf.js'], function() {

Require is not working for node-opcua

I want to load a local version of node-opcua with 'require' inside a HTML file, but it does not really work. The code snippet is the following:
<script type="text/javascript" src="path_to_require.js"></script>
<script>
var opcua = require(["path_to_node-opcua"]); <!-- Yes, the path is correct >
var client = new opcua.OPCUAClient();
...
When I execute the script I get the following error in the console:
Uncaught TypeError: opcua.OPCUAClient is not a constructor
Hence, var opcua is loaded correctly, but OPCUACluent is not, although the class is declared in a file that is present in the node-opcua folder called opcua_client.js under node-opcua\lib\client\
Sources:
The 'require' script from http://requirejs.org/docs/download.html#requirejs.
The node-opcua folder with the console command
npm install node-opcua.
node-opcua is not intended to run inside a browser as it relies on nodejs specific features such as filesystem access, crypto and so on.
You need to use browserify if you want to use that module in client. You will also need to look at how to use browserify with file system access (it can be done if paths are known ahead of time).

Use Browserify with JavaScript libraries such as Backbone or Underscore?

I know I can install underscore using npm but that's not what I can do in my work environment. I need to be able to download the Underscore.js library and then make it "browserify-compatible".
So let's assume Underscore.js looks something like this:
(function() {
var root = this;
// Rest of the code
}.call(this));
I downloaded that file on my hard drive and saved it as under.js.
My file that requires underscore looks like this:
var underscore = require("./under");
console.log(underscore);
And then I run browserify from the cli.
I have an HTML page called test.html and basically all it does is load the generated bundle.js.
However, the console.log(underscore) line fails - says that underscore is undefined.
What have I tried?
Obviously I added module.exports to the first line - right before the function definition in under.js, and that's how I got the error mentioned above. I also tried the method from this answer , still got the same error.
So, how would I use Browserify to load libraries such as Underscore.js or Backbone without using npm-installed modules?
That's because browserify does not add variables to the global scope. The version you download is identical to the version that you install via NPM.
You need to explicitly attach it to the window to export it to the top level scope.
If you create a file called "expose_underscore.js" and put this in it:
var _ = require('./under');
window._ = _;
Will do it, followed by: browserify expose_underscore.js > bundle.js and then add bundle.js as a <script> tag you will be able to do the following in your console:
HOWEVER, you shouldn't do this if you're using browserify. The point behind it (and Node's version of commonJS) is that you explicitly require it everywhere you need it. So every file you have that needs underscore should import it to a local variable.
Don't worry -- you will still only have one copy loaded.
I typically add my vendor libs like Underscore as script tags. Underscore will attach itself to the global scope, so then you don't need to require it anywhere to use it.
If you do want to use it in a Browserified fashion, verify that you have the correct path in your require statement (browserify requires are relative paths) and move the module.exports statement to the end of the file.

Categories

Resources