I'm working with some UMD code output by TypeScript via tsc. It's just a simple build right now as I get things figured out:
tsc; ./node_modules/.bin/webpack lib/WebApp/BootcampWebAppSuite.js public/lib/index.js
Unfortunately, when I go to load the resultant .js file in my browser (which seems to look alright at a glance?), I end up getting this exception:
Admittedly, this has been a bit difficult to google for as I have no way to search for "." (quote period quote).
Related
I am new to CodeMirror and having difficulty getting it to work -- I am specifically looking to get it to work with Groovy.
The following are the steps I have taken:
Downloaded CodeMirror-master.zip
Unzipped it.
Attempted to open "CodeMirror-master/mode/groovy/index.html"
When I open that file, the Groovy code in that file is not formatted. That file references "lib/codemirror.js". The file structure in the zip file does not contain "codemirror.js" in the "lib" directory. However, it does contain "codemirror.js" in the "src" directory. So, I copied everything from the "src" directory to the "lib" directory and it still doesn't display the formatted code from the example. When I open the Chrome browser developer tools it shows 4 errors, but I am so new to this type of development that I don't know what to do. I don't understand why "CodeMirror is not defined" is being thrown -- I assumed that the example code from CodeMirror would work...
The errors I see are as follows:
Uncaught SyntaxError: Cannot use import statement outside a module (codemirror.js)
Uncaught ReferenceError: CodeMirror is not defined
at matchbrackets.js:10:9
at matchbrackets.js:11:3
Uncaught ReferenceError: CodeMirror is not defined
at groovy.js:10:9
at groovy.js:11:3
Uncaught ReferenceError: CodeMirror is not defined
at index.html:76:20
What took me down the path of trying out the examples was that I was unable to get it running with my own code after trying to follow the instructions and I have been banging my head against this for too long.
Any help would be greatly appreciated.
After banging my head against for too long, I have finally found the answer:
the zip file that is currently being distributed is faulty (ie files are not where they are supposed to be and other files are missing).
I had to use the instructions for downloading it via NPM (ie npm install codemirror), then copy that directory structure to my project.
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
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 upgraded my Elixir and Gulp and right now I can see that some of my mixed scripts are broken.
When I hit gulp or gulp --production everything seems to be compiled, mixed and versioned fine. Problem is directly on the page. Scripts throw exceptions in the console.
Two broken scripts are right now moment.js and bootstrap datetimepicker.
Uncaught TypeError: Cannot set property 'moment' of undefined(anonymous function) # common-1e3de0f4.js:1(anonymous function) # common-1e3de0f4.js:1
create:207
Uncaught TypeError: $(...).datetimepicker is not a function
It must have something do to with the fact that I did npm update because all my custom scripts are fine - just these plugins are broken - while I haven't touched them.
I saw that every file is now preceded by 'use strict'; Previously it never happened before.
I really would like to solve it by myself but I have no idea where to start looking for a solution.
My gulpfile.js http://pastebin.com/NQ8f9tGr
Thanks for any help.
This is known issue, in fact Jeffrey is asking for feedback how people want to solve this, you can find more info here and give your opinion.
Also quoting Jeffrey Way on a possible solution:
We have two options:
You may disable Babel support, if you don't desire it.
elixir.config.babel.enabled = false.
We can blacklist "useStrict", so
that it doesn't get included. Not sure we should do this, but it's an
option.
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
}