I'm using r.js to optimize/uglify my JavaScript code which is using RequireJS.
One of my modules is a polyfill module:
define(function(){
if (!Array.prototype.filter)
{ /* ... */ }
var isPolyfillNeeded = function () { /* ... */ }
if (isPolyfillNeeded()) {
/* polyfill implementation */
}
});
The module causes parsing error thrown from r.js when trying to uglify it, saying:
Tracing dependencies for: ../scripts/main-app
Error: Parse error using UglifyJS for file: C:/.../polyfill.js
Unexpected character '?' (line: .., col: .., pos: ..)
undefined
In module tree:
../scripts/main-main-app
moduleA
moduleB
When replacing var isPolyfillNeeded = function () with function isPolyfillNeeded(), it works fine.
Why is that?
The problem was a bad character that was hiding somewhere in my code, as I copy pasted from some snippet. It was invisible so it was hard to spot.
Related
Getting a module is not defined error attempting to import a module from the local project. Using node and requirejs -
Error: Evaluating /Users/Projects/stash/NODE/project_js/src/foo.js as module "foo" failed with error: ReferenceError: module is not defined
Code looks like -
(function() {
const requirejs = require('requirejs')
requirejs.config({
baseUrl: __dirname,
nodeRequire:require
});
//var foo = requirejs('foo.js');
requirejs(['foo'], function() {
foo().then(data => {
data.foreach(function(item, index, data) {
console.log(JSON.stringify(item))
})
});
})
})();
The module has the following export -
module.exports = function foo() {
.
.
.
return results
}
I've tried loading the module synchronously as well.
Check this part of their doc: if the module to be loaded (foo here) is found by RequireJS (i.e. its configuration allows it to find the module), then this module has to be declared using define instead of Node's exports.
I just tried this, which works:
directory structure
test/
index.js
foo.js
index.js
(function() {
const requirejs = require('requirejs');
requirejs.config({
baseUrl: __dirname,
nodeRequire:require
});
requirejs(['foo'], (foo) => {
console.log('loaded!', foo, foo());
});
})();
foo.js (that's the interesting part)
define(function() {
return function foo() {
return 'fooResult';
}
});
Using module.exports = ... gave me the error you have.
However this RequireJS API is not "loadable" by Node's built-in require, hence the need for a precise configuration that reflects a clear separation between Node-required modules (CommonJS API) and RequireJS-defined modules (AMD API). (Actually you can check the whole "Why AMD?" page, that should help a lot for your work with RequireJS.)
My problem is the following:
I use gulp+browserify to compile my TypeScript to JavaScript that you can use on normal HTML pages, the problem is that my class is never available on the browser:
VM633:1 Uncaught ReferenceError: Test is not defined
at <anonymous>:1:13
This is my TypeScript File:
class Test {
public test(): void {
console.log("aa");
}
}
This is my gulpfile
var gulp = require("gulp");
var browserify = require("browserify");
var source = require('vinyl-source-stream');
var tsify = require("tsify");
gulp.task("default", function () {
return browserify({
//basedir: '.',
debug: true,
entries: ['app/Resources/typescript/Test.ts'],
cache: {},
packageCache: {}
})
.plugin(tsify)
.bundle()
.pipe(source('bundle.js'))
.pipe(gulp.dest("web/bundles/framework/js"));
});
The file compiles without problem, and is included in my index.html (the compiled js file).
But when i try:
var t = new Test();
I get the following error:
VM633:1 Uncaught ReferenceError: Test is not defined
at <anonymous>:1:13
I can't resolve it, I have read a lot and I haven't found anything clear, I tried all and nothing worked.
There are a few things missing here:
If you want your class to be accessible outside of your module, you have to export it:
export class Test {
// ...
}
Browserify creates functions on top of the classes you define. So it won't be accessible globally (which is a good thing). Normally you would import it in another file and use it:
// in any TS file that wants to use `Test` class. Make sure this is included in the gulp entries as well
import {Test} from "test";
var t = new Test();
console.log(t);
Or if really want it to be accessible globally, you can attach it to window object:
// In Test.ts file:
(window as any).Test = Test; // This can be useful when debuging. But don't do this in production code.
I want to implement server-side rendering for my ReactJS app. I use react-router. I take routes.js as webpack entry point and compile with output.libraryTarget = "commonjs2" option. Then I require the result of compilation in NodeJS script to make rendering. But I've got en error.
Webpack wrap modules in following code:
/* 277 */
/***/ function(module, exports, __webpack_require__) {
/* WEBPACK VAR INJECTION */(function(Buffer, global) {
if (global.foo) {
/* ... */
}
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(277).Buffer, (function() { return this; }())))
/***/ }
When NodeJS tries to execute (function() { return this; }()) its return undefined. In browser it will return window. Why webpack use such wrap code? How to make this code works in NodeJS?
I use node-clone as external lib. It don't use any other libs as dependency. But webpack in its bundle makes buffer as a dependency for this lib. And inside the buffer code I've got en error Cannot read property 'TYPED_ARRAY_SUPPORT' of undefined. It happens because in nodeJS (function() { return this; }()) return undefined.
By default, webpack will package things up for browsers. If you want to build Node libraries with webpack, you need to specifiy a target in your configuration:
module.exports = {
// ...
target: 'node',
};
I'm new to Grunt and I'm trying to use the grunt-bower-concat node module to concat all my bower components into a single js file and css file respectively. It's working great, except that I want to force grunt-bower-concat to use the minified versions of my bower components instead of the uncompressed versions.
Luckily, it comes with a callback feature where I can customize this:
callback: function(mainFiles, component) {
return _.map(mainFiles, function(filepath) {
// Use minified files if available
var min = filepath.replace(/\.js$/, '.min.js');
return grunt.file.exists(min) ? min : filepath;
});
}
And I added it to my Gruntfile:
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
bower_concat: {
all: {
dest: "src/js/<%= pkg.name %>-bower.js",
cssDest: "src/css/<%= pkg.name %>-bower.css",
callback: function(mainFiles) {
return _.map(mainFiles, function(filepath) {
var min = filepath.replace(/\.js$/, '.min.js');
return grunt.file.exists(min) ? min : filepath;
});
}
}
},
...
And it fails with the following error:
$ /usr/local/bin/grunt --gruntfile /Applications/MAMP/htdocs/proj/Gruntfile.js bower_concat
Running "bower_concat:all" (bower_concat) task
Fatal error: _ is not defined
Process finished with exit code 3
This example is trying to use underscore's map function and it's clear Grunt does not have access to this library.
How can I load underscore or use it's functions inside of my Gruntfile?
Instead of requiring an extra library, simply replace
return _.map(mainFiles, function(filepath) {
With this:
return mainFiles.map(function(filepath) {
Doesn't look like you required underscore anywhere, unless you're not showing the whole file.
Any file in which you want to use underscore you need to do:
var _ = require('underscore');
before making use of _.
Oh, and of course you need to npm install underscore --save in the folder the gruntfile is in as well, to have the library there.
I have a function in moduleA that must run prior to the loading of moduleB. ModuleA isn't dependent on any other module and moduleB has some dependencies (moduleC for instance). The following code does it and works fine when it's not optimized:
main-config.js
require.config({
paths: {
moduleA: 'modules/moduleA',
moduleB: "modules/moduleB",
moduleC: "modules/moduleC",
}
});
require(['moduleA'], function (moduleA) {
moduleA.init(function () {
require(['moduleB'], function (moduleB) {
moduleB.start();
});
});
});
However, when optimizing it with r.js, things are getting messed. The output of the r.js optimizer is:
Tracing dependencies for: ../scripts/main-config
Uglifying file: C:/.../scripts/main-config.js
C:/.../scripts/main-config.js
----------------
C:/.../scripts/libs/require/require.js
C:/.../scripts/modules/moduleA.js
C:/.../scripts/main-config.js
Which means that only the 3 modules - require, moduleA and main-config - are uglified together to 1 minimized file. All of moduleB's dependencies (such as moduleC) are missing from the output file.
Changing the config file to the following, will include all of moduleB's dependencies in the output file, but it will not get the needed result since it parses moduleB before moduleA's init function:
require(['moduleA','moduleB'], function (moduleA, moduleB) {
moduleA.init(function () {
moduleB.start();
});
});
I want moduleB to be parsed later, only after moduleA's init function (moduleB contains some immediate functions).
How can I get all the dependency tree to be included in the result file, but with my needed behavior (parse&run moduleB after a function of moduleA finishes)?
Thanks.
This happens because require for moduleB is nested and potentially dynamic; by default r.js won't include such dependencies in the output. To override this default behaviour you can set findNestedDependencies to true (more details in the example buildconfig file).
Alternatively, if you don't want to change this flag for the whole project and you only want to make an exception for this single dependency, you can add the module element to your buildconfig:
modules: [{
name: "main-config",
// forces moduleB to be included
include: ["moduleB"]
},
// ...
One way is with this little project I wrote: require-lazy
With this you would do:
require(['moduleA','lazy!moduleB'], function (moduleA, lazyModuleB) {
moduleA.init(function () {
lazyModuleB.get().then(function(moduleB) {
moduleB.start();
});
});
});
In order to use require-lazy, you will need to modify your building process a bit, see the examples (simple or grunt/bower).
Otherwise you will have to restructure moduleB to not require that functions in moduleA are run; it could require moduleA and run those functions itself.
Also try requiring moduleA from moduleB anyway, this could solve the problem.