Sencha Cmd 5.0.1 with Extjs 5.0.1 issue - sencha-cmd

I am upgrading my Extjs to 5.0.1 (from 5.0.0 ) and also Sencha Cmd to 5.0.1.231
No compile time errors but on run time it is is not loading the application and giving the following error
Uncaught TypeError: Cannot read property 'baseUrl' of undefined
some other users are having the same issue..
http://www.sencha.com/forum/showthread.php?289872-After-update-to-5.0.1&p=1059537
Is this a bug or we are doing some thing different ?
Thanks

It looks like a bug, but I think Sencha are pushing towards using a microloader rather than just including the app.js file and the css ones. So my short answer is both! :)
Now the long one:
I was playing with setting up an ExtJS application that is to live far away from the webroot and at the same time to be available in both, development and production modes (environments).
Setting the app.json of the Sencha CMD app, so the microloader.js to load the required js and css files, proved a bit of a challenge.
My folder setup is as per below:
(Note, my build folder is outside the Sencha CMD application folder - MyApp - just to have the same path depth)
index.cfm
/far/away/from/web/root
....
/build
/resources
app.js
app.json
microloader.js
...
/MyApp
/.sencha
/ext
app.json
app.js
bootstrap.js
....
MyApp/app.json
{
/**
* The application's namespace.
*/
"name": "MyApp",
/**
* The relative path to the appliaction's markup file (html, jsp, asp, etc.)
*
* Below setting seems relevant for proper loading MyApp/bootstrap.js
*/
"indexHtmlPath": "../../../../../index.cfm",
......
"output": {
"base": "${workspace.build.dir}",
"page": {
/**
* Below is relative path from the build folder to the application markup file
*/
"path": "../../../../../index.cfm",
"enable": false
},
"microloader": {
"path": "microloader.js",
"embed": false,
"enable": true
},
"manifest": {
"path": "app.json",
"embed": false,
"enable": "${app.output.microloader.enable}"
}
},
/**
* Uniquely generated id for this application, used as prefix for localStorage keys.
* Normally you should never change this value.
*/
"id": "f6cd3e2b-6a0c-4359-a452-e07adda808ae"
}
Initially, in order to use the production build, was loading directly /far/away/from/web/root/build/app.js file and it throw the same error:
Uncaught TypeError: Cannot read property 'baseUrl' of undefined
Now, with the app.json configured as per above, I can pick in my index.cfm whether to load:
for production - /far/away/from/web/root/build/microloader.js
for development - /far/away/from/web/root/MyApp/bootstrap.js
I hope this helps someone.
Cheers,
Pencho

Related

Requiring config.js file in VSCode extension with absolute path (e.g. "C:\...") does not work

I am developing the Argdown VSCode extension. The Argdown parser can be configured using either argdown.config.json files or argdown.config.js files exporting a config object. Using Javascript files is the easiest way to allow users to add custom plugins to the Argdown parser.
If the user tells the parser to use a Javascript file, the file is loaded using import-fresh, (which uses node's require, but deletes the cached version.
Using the Argdown commandline tool (#argdown/cli) this works fine, but in the VSCode extension the module of the config file can not be found. The extension is using absolute file paths to require the config module (e.g. "C:\Users\my-username\projects\my-argdown-project\argdown.config.js"). These paths work with import-fresh outside of the VScode extension.
Is there a security restriction for VSCode extensions that does not allow to require modules with absolute file paths? Or is there some other reason why this does not work?
This was not related to VSCode. The problem was caused by bundling up import-fresh with webpack. I thought that webpack would ignore dynamic imports, but it did not.
I was lucky: Since last month, webpack supports "magic comments" for require (not only for import). So I can use:
require(/* webpackIgnore: true */ file);
You have to activate magic comments support in your webpack config:
module.exports = {
parser: {
javascript: {
commonjsMagicComments: true,
},
},
}
Now the next question is how to add the magic comments to the import-fresh package. For that I used the string-replace-loader:
module.exports = {
module: {
rules: {
{
enforce: "pre",
test: /import-fresh[\/\\]index\.js/,
loader: "string-replace-loader",
options: {
search:
"return parent === undefined ? require(filePath) : parent.require(filePath);",
replace:
"return parent === undefined ? require(/* webpackIgnore: true */ filePath) : parent.require(/* webpackIgnore: true */ filePath);",
},
},
}
}
}
After that, I could load the argdown.config.js files again, even after bundling everything with webpack.

Make ng-http-loader run with SystemJs

I want to add the ng-http-loader library to my Angular5 project, but I do not know how to get it running with SystemJS. I know I have to add something to the systemjs.config, but I tried to target several files inside the node_modules/ng-http-loader/ directory or the directory itself, but I always get the error, that he can't find the module.
Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/ng-http-loader/ng-http-loader.module
wrapFn#http://localhost:3000/node_modules/zone.js/dist/zone.js:1166:30
ZoneDelegate.prototype.invokeTask#http://localhost:3000/node_modules/zone.js/dist/zone.js:425:17
Zone.prototype.runTask#http://localhost:3000/node_modules/zone.js/dist/zone.js:192:28
ZoneTask.invokeTask#http://localhost:3000/node_modules/zone.js/dist/zone.js:499:24
invokeTask#http://localhost:3000/node_modules/zone.js/dist/zone.js:1540:9
globalZoneAwareCallback#http://localhost:3000/node_modules/zone.js/dist/zone.js:1566:17
Error loading http://localhost:3000/ng-http-loader/ng-http-loader.module as "ng-http-loader/ng-http-loader.module" from http://localhost:3000/app/app.module.js
Stack trace:
(SystemJS) XHR error (404 Not Found) loading http://localhost:3000/ng-http-loader/ng-http-loader.module
wrapFn#http://localhost:3000/node_modules/zone.js/dist/zone.js:1166:30
ZoneDelegate.prototype.invokeTask#http://localhost:3000/node_modules/zone.js/dist/zone.js:425:17
Zone.prototype.runTask#http://localhost:3000/node_modules/zone.js/dist/zone.js:192:28
ZoneTask.invokeTask#http://localhost:3000/node_modules/zone.js/dist/zone.js:499:24
invokeTask#http://localhost:3000/node_modules/zone.js/dist/zone.js:1540:9
globalZoneAwareCallback#http://localhost:3000/node_modules/zone.js/dist/zone.js:1566:17
Error loading http://localhost:3000/ng-http-loader/ng-http-loader.module as "ng-http-loader/ng-http-loader.module" from http://localhost:3000/app/app.module.js
I also asked the author, but he is not experienced with systemjs and therefore was not able to help me. Does anybody else know which file I should target?
Thanks in advance.
Having never used ng-http-loader, try this as a starting point:
System.config({
"paths": {
"npm:": "node_modules/"
},
"map": {
"ng-http-loader": "npm:ng-http-loader"
},
"packages": {
"ng-http-loader": {
"main": "ng-http-loader.module.js",
"defaultExtension": "js"
}
}
It's possible that other mappings are required in addition to the above e.g. to the components folder etc.

Protractor-CucumberJS - Tagged scenarios - Browser Launched for Scenarios not Tagged

We have a Protractor-CucumberJS framework using BDD feature files and need to create a suite of sanity tests by tagging the relevant scenarios as '#sanity' in feature files and run only the scenarios with this tag.
With this setup, Protractor launches the browser for each feature file one by one, checks if it contains the '#sanity' tag and closes the browser if tag not found and so on.
This will take up a lot of time as there are close to 200 feature files and hence we want the the browser to launch only if the feature file contains the required tag and not otherwise.
Is there a way to achieve that.
Config file -
exports.config = {
seleniumAddress: 'http://127.0.0.1:4444/wd/hub',
framework: 'custom',
frameworkPath: require.resolve('protractor-cucumber-framework'),
specs: [../features/*.feature]
cucumberOpts: {
require: [
'../step-definitions/**/*_Steps.js',
'generateJsonReport.js'
],
format: 'pretty',
tags: ['#sanity'],
},
multiCapabilities: [{
browserName: 'chrome',
shardTestFiles: true,
}
],
onPrepare: function () {
browser.driver.manage().window().setSize(1600, 800);
}
};
This is not possible due to the fact that you are using the option shardTestFiles:true, see the config.
If you disable it, or remove it, it will first search all the files (without parsing all files and opening a browser for it) for your specific tag and only run the featurefiles that have that tag.
Use tags:'#sanity', in Conf file, This will call only Sanity features

jspm not loading bundles with --inject

Been experimenting with jspm and systemjs over the weekend. Everything is working fine except for the bundling jspm offers. I can load individual files, but jsmp refuses to load the bundle file (which is optimized).
I'm creating the bundle file using:
jspm bundle lib/login assets/js/1-login.js --inject
This updates the config.js file which looks like:
System.config({
baseURL: "/",
defaultJSExtensions: true,
transpiler: "babel",
babelOptions: {
"optional": [
"optimisation.modules.system"
]
},
paths: {
"github:*": "jspm_packages/github/*",
"npm:*": "jspm_packages/npm/*"
},
bundles: {
"1-login.js": [
"lib/login.js",
"lib/sample.js"
]
},
map: {....}
});
lib/login.js
import * as sample from 'lib/sample'
export function test() {
sample.testMethod();
}
lib/sample.js
import $ from 'jquery'
export function testMethod( ) {
console.log( $('body') );
}
So, according to the jsmp docs:
As soon as one of these modules is requested, the request is intercepted and the bundle is loaded dynamically first, before continuing with the module load.
It's my understanding that running
System.import('lib/login.js');
should load the bundle (and optimised file), but is doesn't - it just loads the actual file. What am I missing here? And as a bonus question, why is jquery not in the bundle list?
Well, figured out where I went wrong.
I keep all the generated assets in assets/js, but in my config.json I didn't change the baseUrl to reflect this. I did in fact have the baseUrl set correctly in package.json, which is why jspm didn't throw a lot of errors.
This was the same reason jquery wasn't loading, so problem solved :)

Uglifying for require.js with shim doesn't work on play2 with CoffeeScript

I work on Play 2.1.2 project, using Angular.js, CoffeeScript, require.js and bower to organize front-end.
With bower, I use shim in my /app/assets/javascripts/main.coffee file.
Then I deploy using play clean stage and running target/start.
The problem is: during stage phase, Play doesn't uglify resources.
In Build.scala:
val main = play.Project(appName, appVersion, appDependencies).settings(
requireJs += "main",
requireJsShim += "main.js"
)
Then after uglyfying css in stage:
Tracing dependencies for: main
Error: Load timeout for modules: angular-bootstrap,angular
http://requirejs.org/docs/errors.html#timeout
In module tree:
main
jquery
Error: Load timeout for modules: angular-bootstrap,angular
http://requirejs.org/docs/errors.html#timeout
In module tree:
main
jquery
[info] RequireJS optimization finished.
So nothing was uglified. In main.coffee:
require.config
paths:
jquery: "lib/jquery/jquery"
angular: "lib/angular/angular"
...
shim:
angular: {deps: ["jquery"], exports: "angular"}
...
define [
"angular-bootstrap"
"angular"
...
], ->
app = angular.module "app"
...
app
It works perfectly on client side, all paths are correct and so on.
requireJsShim += "main.js" also looks correct: it looks like require.js optimization takes place after compiling assets, so main.coffee or just main doesn't work.
Any ideas what are the roots of the problem? Have anyone faced it before?
I have an example application using the shim where I just answered a question very similar to yours. In a nutshell, the shim overwrites the app.build.js file.
What finally solved my problem is creating custom shim.coffee with part of require.config in it:
require.config
paths:
jquery: "lib/jquery/jquery"
angular: "lib/angular/angular"
...
Without shim part.
Then I had to explicitly define shimmed dependencies in define clauses and use requireJsShim += "shim.js" -- not the same file that I use for client-side configuration.
Then uglifying and require.js optimization begin to work!
I've encountered exactly this problem (almost; I'm not using CoffeeScript in my project), and it turns out easier to solve that I thought. To restate the issue: certain JavaScript resources—particularly those without an export setting in their shim—would produce the “Load timeout for modules” stated above. Worse, the problem appeared to be transient.
Separating the RequireJS configuration (e.g., paths, shim) from the module seemed to help, but compiling remained unreliable and it made working in development mode more complex.
I found that adding waitSeconds: 0 to the configuration object contributed to reliable builds. Why timeouts are even possible for accessing local resources during compilation is beyond me. See the RequireJS API waitSeconds documentation for details.
Here's a snippet from my RequireJS module, located in public/javascripts (your paths will likely differ).
require({
/* Fixes an unexplained bug where module loads would timeout
* at compilation. */
waitSeconds: 0,
paths: {
'angular': '../vendor/angular/angular',
'angular-animate': '../vendor/angular/angular-animate',
/* ... */
'jquery': '../vendor/jquery/jquery'
},
shim: {
'angular': {
deps: [ 'jquery' ],
exports: 'angular'
},
'angular-animate': ['angular'],
/* ... */
'jquery': {
exports: 'jQuery'
}
},
optimize: 'uglify2',
uglify2: {
warnings: false,
/* Mangling defeats Angular injection by function argument names. */
mangle: false
}
})
define(['jquery', 'angular'], function($, angular) {
/* Angular bootstrap. */
})