When using Chrome I am getting an error via the Mocha test runner, captured as part of afterEach with this.currentTest.err.
I am compiling coffeescript with browserify with the debug option using the awesome coffeeify plugin. This produces a single compiled file bundle.js with a sourceMappingURL=data:... that allows me to view and debug the original coffeescript directly.
Unfortunately when I access the err.stack in the afterEach Mocha hook, the stack contains references to bundle.js and not the corresponding .coffee files, which would be much more useful.
Here is some sample code with browserify.
First, installing it (for convenience) with npm:
$ npm install -g browserify; npm install coffeeify
x.coffee
try
throw Error("Thrown.")
catch err
console.log err.stack
Convert to x.js with:
$ browserify -t coffeeify x.coffee -d > x.js
x.html
<html>
<head>
<script src='x.js'></script>
</head>
<body></body>
</html>
If one opens this in Chrome the dev tools will show x.js, x.coffee (from the sourceMapURL) and x.html.
When we run this HTML page we get the following output to the console:
Error: Thrown.
at Error ()
at Object. (file://localhost/Users/bmh/tmp/x.js:5:9)
at i (file://localhost/Users/bmh/tmp/x.js:1:219)
at err (file://localhost/Users/bmh/x.js:1:382)
at file://localhost/Users/bmh/tmp/x.js:1:400
What we would expect is to have the trace refer to the .coffee file, looking something like this (which I am making up here for illustrative purposes):
Error: Thrown.
at Error ()
at Object. (file://localhost/Users/bmh/tmp/x.coffee:2:5)
Has anyone had any success converting the error stack to one that refers to the items at their source map locations?
I'm not sure about coffeeify, but the source-map-support module adds .stack support for code bundled with browserify. Just npm install source-map-support and put require('source-map-support').install() at the top of your code.
Related
I'm trying to build my first localised SPFX WebPart for Sharepoint Online. I've added an additional language de-de.js in the loc folder and now I'm trying to change the write-manifest.json to use my new language on debug by adding the `"debugLocale" property to it:
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
"cdnBasePath": "<!-- PATH TO CDN -->",
"debugLocale": "de-de"
}
Checking the official instructions of Microsoft and inspecting the JSON sheme of the write-manifest.json shows this should compile, but when I gulp serve it returns:
Build target: DEBUG
./node_modules/#microsoft/node-core-library/lib/JsonSchema.js:178
throw new Error(prefix + os.EOL +
^
Error: JSON validation failed:
./config/write-manifests.json
Error: #/ (Defines configuration options for the...)
Additional properties not allowed: debugLocale
at validateObjectWithCallback (./node_modules/#microsoft/node-core-library/lib/JsonSchema.js:178:19)
at JsonSchema.validateObjectWithCallback (./node_modules/#microsoft/node-core-library/lib/JsonSchema.js:193:13)
at JsonSchema.validateObject (./node_modules/#microsoft/node-core-library/lib/JsonSchema.js:175:14)
at WriteManifestsTask._readConfigFile (./node_modules/#microsoft/gulp-core-build/lib/tasks/GulpTask.js:311:28)
at WriteManifestsTask.onRegister (./node_modules/#microsoft/gulp-core-build/lib/tasks/GulpTask.js:87:32)
at Object.initialize (./node_modules/#microsoft/gulp-core-build/lib/index.js:299:24)
at SPWebBuildRig.initialize (./node_modules/#microsoft/sp-build-common/lib/BuildRig.js:61:19)
at SPWebBuildRig.initialize (./node_modules/#microsoft/sp-build-common/lib/SPBuildRig.js:29:15)
at SPWebBuildRig.initialize (./node_modules/#microsoft/sp-build-web/lib/SPWebBuildRig.js:15:15)
at Object.exports.initialize (./node_modules/#microsoft/sp-build-web/lib/index.js:23:17)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! hello-world#0.0.1 start: `gulp serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the hello-world#0.0.1 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! ~/.npm/_logs/2019-01-09T16_43_53_070Z-debug.log
How can I solve this issue?
Between 1.5 and 1.6, the build tasks appeared to have changed. I have confirmed the issue with 1.6+.
If you modify your write-manfiest.json "debugLocale" to "buildSingleLocale", everything will work as expected. I think the docs and the schema may be out of date.
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
"cdnBasePath": "<!-- PATH TO CDN -->",
"buildSingleLocale": "de-de"
}
I just tried that and it works in my setup.
Created webpart using yo #microsoft/sharepoint with default options (using React as Javascript framework)
Added de-de.js file to loc folder and changed values so I can see that is really grabs the correct file
Added "debugLocale": "de-de" to write-manifests.json
Run gulp serve
Texts used are from de-de.js
My versions:
yo - 2.0.3
#microsoft/sharepoint generator - 1.4.1 (I know it is old one)
npm - 5.6.0 (Yes, also old one)
But, once I update the #microsoft/sharepoint generator to latest version 1.7.1 it stopped working. It seems that the issue occurs since version 1.6.0
Workaround is to run it with --locale parameter like gulp serve --locale=de-de or to use older version:
npm uninstall #microsoft/generator-sharepoint -g
npm install #microsoft/generator-sharepoint#1.5.1 -g
I am trying to create a reusable component using polymer cli.
I would like to use this component into another project where i can include it as a single file import.
But when I am trying to build the project, it keeps failing.
Below are details of my environment.
$node --version
v4.6.0
$ npm --version
2.15.9
$ polymer --version
0.16.0
$ polymer init
? Which starter template would you like to use? element
info: Running template element...
? Element name (my-el)
$polymer build
$ polymer build
info: Building application...
info: Generating build/unbundled...
info: Generating build/bundled...
error: Uncaught exception: Error: file path is not in root: /Users/yogeshkulkarni/workspace/polymer/polymer/polymer.html (/Users/yogeshkulkarni/workspace/polymer/my-el)
error: Error: file path is not in root: /Users/yogeshkulkarni/workspace/polymer/polymer/polymer.html (/Users/yogeshkulkarni/workspace/polymer/my-el)
at Object.urlFromPath (/usr/local/lib/node_modules/polymer-cli/node_modules/polymer-build/lib/path-transformers.js:41:15)
at StreamAnalyzer.getFile (/usr/local/lib/node_modules/polymer-cli/node_modules/polymer-build/lib/analyzer.js:107:39)
at StreamResolver.accept (/usr/local/lib/node_modules/polymer-cli/node_modules/polymer-build/lib/analyzer.js:210:34)
at FileLoader.request (/usr/local/lib/node_modules/polymer-cli/node_modules/polymer-build/node_modules/hydrolysis/lib/loader/file-loader.js:64:27)
at Analyzer.load (/usr/local/lib/node_modules/polymer-cli/node_modules/polymer-build/node_modules/hydrolysis/lib/analyzer.js:121:32)
at Analyzer._getDependencies (/usr/local/lib/node_modules/polymer-cli/node_modules/polymer-build/node_modules/hydrolysis/lib/analyzer.js:433:25)
at Analyzer._dependenciesLoadedFor (/usr/local/lib/node_modules/polymer-cli/node_modules/polymer-build/node_modules/hydrolysis/lib/analyzer.js:401:25)
at Analyzer._parseHTML (/usr/local/lib/node_modules/polymer-cli/node_modules/polymer-build/node_modules/hydrolysis/lib/analyzer.js:227:50)
at null._onTimeout (/usr/local/lib/node_modules/polymer-cli/node_modules/polymer-build/node_modules/hydrolysis/lib/analyzer.js:125:39)
at Timer.listOnTimeout (timers.js:92:15)
polymer-cli build works fine when I choose application starter template. Is polymer-cli doesn't support building element starter template?
I had similar problems. I used the polymer INIT - 'a blank application template', to create my project.
Which didn't provide a polymer.json configuration file. I added and configured this file. Now polymer BUILD is without any errors (in my project). Because polymer BUILD needs to know about your project structure. See https://www.polymer-project.org/1.0/toolbox/server
The docs for polymer-cli state:
This command is for app projects only.
And it currently doesn't provide a user-friendly error message for this scenario, so you'll see it crash with a stack trace when building element projects.
I'm using JSPM 0.16.42 which uses SystemJS, I've tried both angular-translate and angular-route, both of which are on github endpoints.
However, for both of them angular throws the same error
argument module is not a function
when using them in ES6 syntax as follows:
import AngularRoute from 'angular-route';
angular.module('app', [AngularRoute]);
I'm using babel as a transpiler. The object I get back from the import seems to be empty. Following is the relevant part of my config.js file:
System.config({
baseURL: "/",
defaultJSExtensions: true,
transpiler: "babel",
babelOptions: {
"optional": [
"runtime",
"optimisation.modules.system"
]
},
paths: {
"github:*": "jspm_packages/github/*",
"npm:*": "jspm_packages/npm/*"
},
map: {
"angular-route": "github:angular/bower-angular-route#1.5.8",
"angular-translate": "github:angular-translate/bower-angular-translate#2.11.1",
}...
EDIT: When I tried to install angular-translate with an npm endpoint I got the error http://errors.angularjs.org/1.5.8/$injector/unpr?p0=e
on the following line in angular.js
return new ErrorConstructor(message);
which I guess is a bit of progress but still doesn't solve my issue obviously
EDIT#2: I got angular-route to work with the help of #artem by using the npm endpoint, for some reason the github endpoint did not work so I used jspm install npm:angular-route. Further investigation is needed as to why the github package did not work and the npm package did
EDIT#3: I have overriden the package configuration as you can see below, though that didn't help
"npm:angular-translate#2.11.1": {
"format": "global",
"dependencies": {
"angular": ">=1.2.26"
},
"shim": {
"angular-translate": {
"deps": "angular"
}
}
}
I eventually fixed it by installing angular-translate as well as angular-route via their npm endpoints instead of the default (github) endpoints, using
jspm install npm:angular-route
&
jspm install npm:angular-translate -o '{dependencies: { angular: ">=1.2.26" } }'
The override for angular-translate was needed since jspm did not understand the original dependency syntax correctly which was angular: ">= 1.2.26 <=1.6" as described in this github issue
Here is not-so-minimal, not-really-self-contained example for angular-translate with systemjs:
npm install jspm
./node_modules/.bin/jspm install github:angular-translate/angular-translate
keep pressing <ENTER>, accepting all the default values
create file test.js
import AngularTranslate from 'angular-translate/angular-translate';
console.log(AngularTranslate);
create file index.html
<!doctype html>
<html>
<head>
<script src="jspm_packages/system.src.js"></script>
<script src="config.js"></script>
<script>
System.import('./test.js');
</script>
</head>
<body>
</body>
</html>
open it in the browser:
Failed to load resource: the server responded with a status of 404 (File not found)
undefined:1 Uncaught (in promise) Error: (SystemJS) XHR error (404 File not found) loading
http://localhost:8035/jspm_packages/github/angular-translate/angular-translate#2.11.1.js(…)
Why that file isn't there? It's supposed to be created by jspm, if you had installed angular-translate from npm it would have contained
module.exports = require("npm:angular-translate#2.11.1/dist/angular-translate.js");
which is just a redirect from symbolic package name (the name of that .js file) to that package main file, as specified in package.json:
"main": "dist/angular-translate.js",
But angular-translate is from github, there is no dist there. That's why jspm did not create the redirect file - there is nothing to redirect to.
No problem, just build it from the source we got from github:
cd jspm_packages/github/angular-translate/angular-translate#2.11.1/
npm install
npm run-script build
cd ../../../..
and fix mapping in config.js:
map: {
"angular-translate/angular-translate": "github:angular-translate/angular-translate#2.11.1/dist/angular-translate",
open index.html in the browser again:
system.src.js:122 Uncaught (in promise) Error: (SystemJS) angular is not defined(…)
No problem, angular is already installed as angular-translate dependency, just tell systemjs when and how to load it.
add to config.js:
meta: {
"angular-translate/angular-translate": {
"deps": ["angular"]
}
},
map: {
"angular": "github:angular-translate/angular-translate#2.11.1/node_modules/angular/angular",
NOTE: You don't need to specify format for angular-translate. SystemJS auto-detects it correctly - it could be loaded as either 'amd' or 'cjs', but it will not work as 'global'. Also, you probably did not start by installing angular-translate, so you already have angular.js file and mapping in place somewhere.
Open index.html in the browser again. It prints in the console:
pascalprecht.translate
Yes angular-translate exports a string - seems to be typical for angular1 modules.
I have no experience with angular.js, so I declare it a success and stop here.
PS Why angular-route worked when you install it from npm, and did not work from github?
When installed from npm, jspm created a file named jspm_packages/npm/angular-route#1.5.8.js, containing
module.exports = require("npm:angular-route#1.5.8/index.js");
because package.json for angular-route has
"main": "index.js",
which is correct and works for you.
When installed from github, jspm created similar file jspm_packages/github/angular/bower-angular-route#1.5.8.js, but this time it points to a different file
module.exports = require("github:angular/bower-angular-route#1.5.8/angular-route");
because someone put an override in jspm registry there at https://github.com/jspm/registry/blob/master/package-overrides/github/angular/bower-angular-route%401.3.0.json
because bower.json for bower-angular-route has
"main": "./angular-route.js",
Maybe it's an oversight, maybe it's correct and works for them - I don't know.
TL;DR It's not a good idea to use package manager for installing software, if the software was not packaged properly for that package manager.
I'm trying to use karma-browserify together with browserify-shim with no success. Here is a repo to reproduce the error: https://github.com/pelizza/karma-browserify-shim
PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
TypeError: undefined is not an object (evaluating 'module.exports = ex')
at /var/folders/_0/ql88mbyd6v34qsmysr5kf4780000gn/T/e0c5e5ebe3f49930de3d988c7196737f.browserify:40308 <- bower_components/jquery/dist/jquery.js:9837:0
Everything works fine when bundling with browserify, by it seems that karma simply doesn't find shimmed dependencies when preprocessing files with karma-browserify.
I couldn't find much about this problem, except this one at stack overflow, without a solution: karma-browserify throws error when trying to load modules shimmed with browserify-shim
Found the solution: just remove the browserify-shim transform from the karma configuration file if it was already declared as a transform on package.json.
I have updated the repo with this fix.
Here is the discussion about this issue: https://github.com/nikku/karma-browserify/issues/170#issuecomment-187372309
Is it possible to deploy a Single Page App project build using grunt to IIS using MSDeploy from TeamCity? The project is not any kind of Visual Studio solution and doesn't get built using MSBuild.
My Command parameters which are not working are:
-source:package='%teamcity.build.checkoutDir%\Dist.%build.number%.zip' -dest:auto,computerName="%system.MsDeployServiceUrl%",userName="%system.UserName%",password="%system.Password%",authtype="basic",includeAcls="False"
-verb:sync -setParamFile:"%teamcity.build.checkoutDir%\Dist.%build.number%.zip.SetParameters.xml"
-AllowUntrusted -setParam:"IIS Web Application Name"="%system.WebSiteName%" -verbose
The error I am getting is:
[11:47:31][Step 3/3] Error Code: ERROR_EXCEPTION_WHILE_CREATING_OBJECT
[11:47:31][Step 3/3] More Information: Object of type 'package' and
path 'D:\TeamCity\buildAgent\work\e2b0015b49d87e90\Dist.30.zip' cannot
be created. Learn more at:
http://go.microsoft.com/fwlink/?LinkId=221672#ERROR_EXCEPTION_WHILE_CREATING_OBJECT.
[11:47:31][Step 3/3] Error: The Zip package
'D:\TeamCity\buildAgent\work\e2b0015b49d87e90\Dist.30.zip' could not
be loaded. [11:47:31][Step 3/3] Error: Could not find file
'D:\TeamCity\buildAgent\work\e2b0015b49d87e90\Dist.30.zip'.
[11:47:31][Step 3/3] Error count: 1. [11:47:31][Step 3/3] Process
exited with code -1 [11:47:31][Step 3/3] Step Deploy (Command Line)
failed
My build process is working as I end up with the correct artefacts, I just don't seem to be able to deploy my generated artefacts using MSDeploy
This is a screenshot of my artefacts:
I managed to get this working by changing my parameters to the following:
-source:iisapp='%teamcity.build.checkoutDir%\dist' -dest:iisapp='C:\www\xxxx-website',computerName="%system.MsDeployServiceUrl%",userName="%system.UserName%",password="%system.Password%",authtype="basic",includeAcls="False"
-verb:sync -AllowUntrusted -verbose
And changing my user to an admin user rather than an IIS user. Note use of iisapp - the key was to read the MSDeploy api using msdeploy -help
FYI - a good test is to use the intended command against msdeploy.exe in console and check output errors then push command into teamcity when it's working.
I created a grunt and gulp plugin to do just what you are looking to do. gulp-mswebdeploy-package and grunt-mswebdeploy-package will create a ms webdeploy package from any folder and do not require your build to be running on windows.
https://www.npmjs.com/package/gulp-mswebdeploy-package
https://www.npmjs.com/package/grunt-mswebdeploy-package