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
Related
I have a single .js file that has a lot of export const functions in there. Unfortunately, that file needs to be loaded by the back-end and added directly via an <src> tag. This means I need to transpile it and make it work before importing it. So, there's no yarn add to put it through the transpilation process of my project and, of course, these functions will have to be global.
How can I make this work? I've tried to just simply run it through the Babel REPL but I'm getting Uncaught ReferenceError: exports is not defined no matter the configuration.
How to solve this?
Forgive me if this is something simple as my research has come up empty in regards to this specific issue. I am using Bootstrap the most recent release. I have noticed that there is a file that is new from previous releases called npm.js. I am hosting all the Bootstrap files locally on my hosted web server. I call the file like all the others in the head to the full path to the file. In the console I have this error.
npm.js:2 Uncaught ReferenceError: require is not defined
at npm.js:2
Which is referring to this line.
require('../../js/transition.js')`
Which is from this npm.js file that is in the newest Bootstrap
// This file is autogenerated via the `commonjs` Grunt task. You can require() this file in a CommonJS environment.
require('../../js/transition.js')
require('../../js/alert.js')
require('../../js/button.js')
require('../../js/carousel.js')
require('../../js/collapse.js')
require('../../js/dropdown.js')
require('../../js/modal.js')
require('../../js/tooltip.js')
require('../../js/popover.js')
require('../../js/scrollspy.js')
require('../../js/tab.js')
require('../../js/affix.js')
I am unfamilar with this so I am not sure why I am getting this error but, how can I surpress this error and fix this issue? Do I even need this file? From what I understand if I am using modals or tooltips etc I need this. Is this correct?
You will need to download/config the missing libraries or requires. I am not sure which libraries you are using.
You can add the missing libraries to your package.json. Then call for npm install.
I have npm installed handlebars v4.05:
I use grunt to compile a "searchBundle.js", it (grunt) bundles jquery, underscore, handlebars and all of my other files in my search directory into the searchBundle.js file. (Not sure how relevant that is, but thought i'd mention, just incase).
When I load the page though, it throws this error: "Uncaught TypeError: Cannot set property 'Handlebars' of undefined"
I tried looking for a solution but only found an issue submitted for the https://github.com/brunch/handlebars-brunch/ package. It basically said that babel was the issue (which I use during compiling the searchBundle.js file via grunt-babel) and so I tried the solution that it proposed in the issue (see here: https://github.com/brunch/handlebars-brunch/issues/51).
However this didnt fix the issue. Here is a screenshot of the line that the console is flagging up:
Any ideas? I am not seeing this flagged as an issue on the handlebars repo and I amn't seeming to find anything on here or google on what could be causing this.
This happened to me while running in strict mode (you can't use 'this' to reference a window, which is what the first argument of the function should be).
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode
Fix last line:
})(this || window, function() {
I am trying to concatenate (without uglify!) all vendor libraries like underscore.js, moment.js and so on into one single file vendor.js. At the moment the libs are loaded with normal script tags which works as intended. when concatenate the libs I get the following error:
TypeError: (intermediate value)(...).call is not a function
the problem only occurs for libs that are the defined as follows:
(function (undefined) { ... }).call(this);
is there a way to overcome this problem without excluding those libs from the concat process?
ok the problem was another script (SlexAxton/messageformat.js) where I included the locales directly in the build process. the locale is defined without an semicolon at the end and this produced the mentioned error.
I change the code, extend some functionality and add new unittest for that. Now, when I run my unit tests with karma (test framework - jasmine), it throw me an error
'There is no timestamp for /libs/angular-bootstrap/ui-bootstrap-tpls.js!'
Uncaught Error: Script error for: angular-bootstrap
http://requirejs.org/docs/errors.html#scripterror
at http://localhost:9876/base/node_modules/karma-requirejs/lib/require.js?1379984163000:138
What I'm doing wrong?
It was my mistake completely. when using karma-requirejs you have main-test.js file where configure how to require.js get the files. I add reference to angular-bootstrap with mistake, that's why require.js couldn't find this file and throwing this mistake. So in my case this error means wrong file name provided.
It can be because it cannot access your source file. You should configure karma to serve scripts where require will look for them.
For example have the config in the karma conf
files:[{pattern: 'node_modules/**/*.js', included:false}]
The question is old, the OP already solved his problem by now, but I'll add my two cents:
From the error message (end of the first error line) we can conclude that you were including a paths (or deps) file in main-test.js with the .js extension.
In RequireJS, you need to call the file names without the extension, so your paths (or deps) would look more or less like this:
paths: {
'ui-bootstrap': 'libs/angular-bootstrap/ui-bootstrap-tpls' // <- without the extension
}