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.
Related
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
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'm getting this error when I browse my webapp for the first time (usually in a browser with disabled cache).
Error: Mismatched anonymous define() module: function (require) {
HTML:
<html>
.
.
.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script> var require = { urlArgs: "v=0.4.1.32" }; </script>
<script data-main="assets/js/main" src="assets/js/libs/require.js"></script>
<script src="assets/js/ace/ace.js?v=0.4.1.32"></script>
</body>
</html>
JS:
$(function () {
define(function (require) {
// do something
});
});
Anyone know exactly what this error means and why its happening?
source file, a short discussion about it in the github issues page
Like AlienWebguy said, per the docs, require.js can blow up if
You have an anonymous define ("modules that call define() with no string ID") in its own script tag (I assume actually they mean anywhere in global scope)
You have modules that have conflicting names
You use loader plugins or anonymous modules but don't use require.js's optimizer to bundle them
I had this problem while including bundles built with browserify alongside require.js modules. The solution was to either:
A. load the non-require.js standalone bundles in script tags before require.js is loaded, or
B. load them using require.js (instead of a script tag)
In getting started with require.js I ran into the issue and as a beginner the docs may as well been written in greek.
The issue I ran into was that most of the beginner examples use "anonymous defines" when you should be using a "string id".
anonymous defines
define(function() {
return { helloWorld: function() { console.log('hello world!') } };
})
define(function() {
return { helloWorld2: function() { console.log('hello world again!') } };
})
define with string id
define('moduleOne',function() {
return { helloWorld: function() { console.log('hello world!') } };
})
define('moduleTwo', function() {
return { helloWorld2: function() { console.log('hello world again!') } };
})
When you use define with a string id then you will avoid this error when you try to use the modules like so:
require([ "moduleOne", "moduleTwo" ], function(moduleOne, moduleTwo) {
moduleOne.helloWorld();
moduleTwo.helloWorld2();
});
I had this error because I included the requirejs file along with other librairies included directly in a script tag. Those librairies (like lodash) used a define function that was conflicting with require's define. The requirejs file was loading asynchronously so I suspect that the require's define was defined after the other libraries define, hence the conflict.
To get rid of the error, include all your other js files by using requirejs.
Per the docs:
If you manually code a script tag in HTML to load a script with an
anonymous define() call, this error can occur.
Also seen if you
manually code a script tag in HTML to load a script that has a few
named modules, but then try to load an anonymous module that ends up
having the same name as one of the named modules in the script loaded
by the manually coded script tag.
Finally, if you use the loader
plugins or anonymous modules (modules that call define() with no
string ID) but do not use the RequireJS optimizer to combine files
together, this error can occur. The optimizer knows how to name
anonymous modules correctly so that they can be combined with other
modules in an optimized file.
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.
The existing answers explain the problem well but if including your script files using or before requireJS is not an easy option due to legacy code a slightly hacky workaround is to remove require from the window scope before your script tag and then reinstate it afterwords. In our project this is wrapped behind a server-side function call but effectively the browser sees the following:
<script>
window.__define = window.define;
window.__require = window.require;
window.define = undefined;
window.require = undefined;
</script>
<script src="your-script-file.js"></script>
<script>
window.define = window.__define;
window.require = window.__require;
window.__define = undefined;
window.__require = undefined;
</script>
Not the neatest but seems to work and has saved a lot of refractoring.
Be aware that some browser extensions can add code to the pages.
In my case I had an "Emmet in all textareas" plugin that messed up with my requireJs.
Make sure that no extra code is beign added to your document by inspecting it in the browser.
Or you can use this approach.
Add require.js in your code base
then load your script through that code
<script data-main="js/app.js" src="js/require.js"></script>
What it will do it will load your script after loading require.js.
I was also seeing the same error on browser console for a project based out of require.js. As stated under MISMATCHED ANONYMOUS DEFINE() MODULES at https://requirejs.org/docs/errors.html, this error has multiple causes, the interesting one in my case being: 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. As it turns out, Google Closure compiler was getting used to merge/minify the Javascript code during build. Solution was to remove the Google closure compiler, and instead use require.js's optimizer (r.js) to merge the js files.
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
}