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>