Develop Reference

How to use #sentry/node in razzle express server file

According to sentry's docs the setup for node is just
// server.js
const Sentry = require("#sentry/node");
Sentry.init({ dsn: "https://1df8da5e900e440e8d6e767ec6277ff9#o126849.ingest.sentry.io/296346" });
However, when I run razzle start I get this
TypeError: mod.require is not a function
at dynamicRequire (/Users/daniellizik/foo/node_modules/#sentry/utils/esm/node.js:19:1)
at getDefaultSamplingContext (/Users/daniellizik/foo/build/webpack:/node_modules/#sentry/tracing/esm/hubextensions.js:107:1)
at Hub._startTransaction (/Users/daniellizik/foo/build/webpack:/node_modules/#sentry/tracing/esm/hubextensions.js:162:1)
at Hub.module.exports../node_modules/#sentry/hub/esm/hub.js.Hub._callExtensionMethod (/Users/daniellizik/foo/build/webpack:/node_modules/#sentry/hub/esm/hub.js:348:1)
at Hub.module.exports../node_modules/#sentry/hub/esm/hub.js.Hub.startTransaction (/Users/daniellizik/foo/build/webpack:/node_modules/#sentry/hub/esm/hub.js:308:1)
at callOnHub (/Users/daniellizik/foo/build/webpack:/node_modules/#sentry/minimal/esm/index.js:17:1)
at startTransaction (/Users/daniellizik/foo/build/webpack:/node_modules/#sentry/minimal/esm/index.js:189:1)
There is a closed issue in the sentry repo for universal apps, but no solution is provided.

These deps seem to work now with universal js apps
"#sentry/browser": "6.8.0",
"#sentry/node": "6.8.0",
"#sentry/tracing": "6.8.0"

Cannot use namespace 'Boom' as a type

I am using hapi for one of my node+typescript project. I am trying to update hapi to the new #hapi/hapi package, due to the deprecation of the "naked" packages. I've changed #types/hapi to #types/hapi__hapi.
As soon as I updated, I started getting the TypeScript error -
node_modules/#types/hapi__hapi/index.d.ts:514:32 - error TS2709: Cannot use namespace 'Boom' as a type.
514 response: ResponseObject | Boom;
~~~~
node_modules/#types/hapi__hapi/index.d.ts:4050:18 - error TS2709: Cannot use namespace 'Boom' as a type.
4050 (Error | Boom) |
~~~~
Found 2 errors.
Here's the dependencies I have in package.json -
{
...
"devDependencies": {
...
"#types/hapi__boom": "7.4.1",
"#types/hapi__hapi": "18.2.5",
"#types/hapi__joi": "16.0.1",
"#types/nock": "10.0.3",
"#typescript-eslint/eslint-plugin": "2.4.0",
"jest": "24.9.0",
"nock": "11.4.0",
"nodemon": "1.19.4",
"prettier": "1.18.2",
"typescript": "3.6.4"
},
"dependencies": {
...
"#hapi/boom": "8.0.1",
"#hapi/hapi": "18.4.0",
"#hapi/joi": "16.1.7",
"axios": "0.19.0",
"axios-retry": "3.1.2"
},
...
}
I checked the node_modules/#types/hapi__hapi/index.d.ts file and it was importing Boom using the following way -
import * as Boom from '#hapi/boom';
When I change it to
import { Boom } from '#hapi/boom';
and it solved the error.
I can't change the index.d.ts file, as it's from #types/hapi__hapi package, but I want to solve this issue. Is there anything I can do to not have this error, such as downgrading to some specific version?

I checked the issues at #hapi/boom and they included types in 7.x release which were breaking typescript build. They removed types from 7.x releases, but put them back in 8.x, and since I was using #hapi/boom 8.0.1, it was conflicting with the existing types.
All the hapi ecosystem is going to include type definitions in them, but other packages are not updated to do it (as far as I could tell), thus the only way to resolve this issue without breaking breaking TypeScript builds is to downgrade #hapi/boom to 7.4.11.
PS: I found out the github issues minutes after posting the question, but I am still open for better answers, if there is one.

Upgrading from using Gulp to Webpack with Laravel Mix

I have been in the process of upgrading a project originally built in Laravel 5.2 to Laravel 5.6.
Back in Laravel 5.2, we were using Gulp with Laravel Elixir. In Laravel 5.6, they are now using Webpack with Laravel Mix.
I found a gist that seemed to cover most of the steps.
The app was originally built by an agency and then handed on to me when I was hired. In their customised version of the app.js file, they have this:
// Bootstrap Rim
System.import('rim/bootstrap.js').then(function(Rim) {
Rim.Bootstrap.all();
});
Which is part of the greater app.js file:
System.config({
baseURL: '/js'
});
require('./core/bootstrap');
require('./core/components');
/**
* Create the application.
*/
window.App = new Vue({
el: '#page',
/**
* Bootstrap the application. Load the initial data.
*/
mounted: function() {
// Bootstrap Rim
System.import('rim/bootstrap.js').then(function(Rim) {
Rim.Bootstrap.all();
});
let self = this;
},
methods: {
navigate: function(location) {
window.location = location;
}
}
});
I found this question for using System.import() in Webpack and used the top answer:
I installed the System dynamic import package as mentioned; npm install --save-dev babel-plugin-syntax-dynamic-import
I added a .babelrc file to the root of my project with the below contents (Laravel Mix automatically picks this up when running Webpack)
{
"plugins": ["syntax-dynamic-import"]
}
When I run npm run dev though, I get the below error:
ERROR Failed to compile with 44 errors
8:29:23 AM These dependencies were not found:
rim/bootstrap.js in ./resources/assets/js/app.js
rim/dialog.js in ./node_modules/babel-loader/lib?{"cacheDirectory":true,"presets":[["env",{"modules":false,"targets":{"browsers":[">
2%"],"uglify":true}}]],"plugins":["transform-object-rest-spread",["transform-runtime",{"polyfill":false,"helpers":false}],"syntax-dynamic-import"]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/admin/fermentables-screen.vue,
./node_modules/babel-loader/lib?{"cacheDirectory":true,"presets":[["env",{"modules":false,"targets":{"browsers":[">
2%"],"uglify":true}}]],"plugins":["transform-object-rest-spread",["transform-runtime",{"polyfill":false,"helpers":false}],"syntax-dynamic-import"]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/admin/hops-screen.vue and 8 others
rim/form-notification.js in ./node_modules/babel-loader/lib?{"cacheDirectory":true,"presets":[["env",{"modules":false,"targets":{"browsers":[">
2%"],"uglify":true}}]],"plugins":["transform-object-rest-spread",["transform-runtime",{"polyfill":false,"helpers":false}],"syntax-dynamic-import"]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/admin/adjuncts-screen.vue,
./node_modules/babel-loader/lib?{"cacheDirectory":true,"presets":[["env",{"modules":false,"targets":{"browsers":[">
2%"],"uglify":true}}]],"plugins":["transform-object-rest-spread",["transform-runtime",{"polyfill":false,"helpers":false}],"syntax-dynamic-import"]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/admin/notifications-screen.vue
and 7 others
rim/message.js in ./node_modules/babel-loader/lib?{"cacheDirectory":true,"presets":[["env",{"modules":false,"targets":{"browsers":[">
2%"],"uglify":true}}]],"plugins":["transform-object-rest-spread",["transform-runtime",{"polyfill":false,"helpers":false}],"syntax-dynamic-import"]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/admin/yeasts-screen.vue,
./node_modules/babel-loader/lib?{"cacheDirectory":true,"presets":[["env",{"modules":false,"targets":{"browsers":[">
2%"],"uglify":true}}]],"plugins":["transform-object-rest-spread",["transform-runtime",{"polyfill":false,"helpers":false}],"syntax-dynamic-import"]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/admin/hops-screen.vue and 14 others
rim/select2.js in ./node_modules/babel-loader/lib?{"cacheDirectory":true,"presets":[["env",{"modules":false,"targets":{"browsers":[">
2%"],"uglify":true}}]],"plugins":["transform-object-rest-spread",["transform-runtime",{"polyfill":false,"helpers":false}],"syntax-dynamic-import"]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/common/components/select2-component.vue,
./node_modules/babel-loader/lib?{"cacheDirectory":true,"presets":[["env",{"modules":false,"targets":{"browsers":[">
2%"],"uglify":true}}]],"plugins":["transform-object-rest-spread",["transform-runtime",{"polyfill":false,"helpers":false}],"syntax-dynamic-import"]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/common/components/select2-ajax-component.vue
To install them, you can run: npm install --save rim/bootstrap.js
rim/dialog.js rim/form-notification.js rim/message.js rim/select2.js
These relative modules were not found:
../../images/search/delete_icon.png in ./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/lib??postcss!./node_modules/less-loader/dist/cjs.js??ref--5-4!./resources/assets/less/app.less
../../images/search/search_icon.png in ./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/lib??postcss!./node_modules/less-loader/dist/cjs.js??ref--5-4!./resources/assets/less/app.less
../img/checkbox_icons.png in ./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/lib??postcss!./node_modules/less-loader/dist/cjs.js??ref--5-4!./resources/assets/less/app.less
./select2-spinner.gif in ./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/lib??postcss!./node_modules/less-loader/dist/cjs.js??ref--5-4!./resources/assets/less/app.less
./select2.png in ./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/lib??postcss!./node_modules/less-loader/dist/cjs.js??ref--5-4!./resources/assets/less/app.less
./select2x2.png in ./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/lib??postcss!./node_modules/less-loader/dist/cjs.js??ref--5-4!./resources/assets/less/app.less
fs.js:1001 binding.stat(pathModule._makeLong(path), statValues);
This all worked fine when I was using Gulp, so I'm sure it can't be that hard to get this working...
Running npm install --save rim/bootstrap.js rim/dialog.js rim/form-notification.js rim/message.js rim/select2.js resulted in a bunch of errors trying to fetch the files externally.
The app.js is in resources/assets/js/app.js and the rim/bootstrap.js is part of a compiled rim.js file located in public/js/rim.js.
A sample of what that rim.js file is included below:
What more do I need to get this working?

Test two different npm package versions at the same time

When I create an npm package, sometimes it would face the need to backward old dependency package version.
If the new version has new api, I may write the code in this pattern:
import pkg from 'some-pkg';
const isNewVersion = pkg.newVersionApi !== 'undefined';
if (isNewversion) {
pkg.newVersionApi();
} else {
pkg.oldVersionApi(); // backward compatible api
}
And with this pattern, when I want to write the test, I only can test the installed version code. The other version's code can't be tested.
For real example, in React v15 and v16, React v16 has new API Portal. Before Portal release, v15 has unstable_renderSubtreeIntoContainer api to realize similar feature.
So the code for React would be like:
import ReactDOM from 'react-dom';
const isV16 = ReactDOM.createPortal !== 'undefined';
if (isV16) {
ReactDOM.createPortal(...);
} else {
ReactDOM.unstable_renderSubtreeIntoContainer(...);
}
So I want to ask is there any method to test with different dependency version?
Currently, one method I think of is to install the other version again and test it. But it only can do on local. It can't work on ci and it can't count in coverage together.
I think that is not only for react test. It may face on node.js test. Any suggestion can be discussed.
Updated
This question maybe is related to install two versions dependency in npm. But I know currently installing two versions dependency is not workable.

Here is a might be solution, not sure it will work as you expect. But, you will have a direction to move forward.
package.json
{
"name": "express-demo",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"cookie-parser": "~1.4.3",
"debug": "~2.6.3",
"express": "~4.15.2",
"jade": "~1.11.0",
"morgan": "~1.8.1",
"serve-favicon": "~2.4.2",
"webpack": "^3.8.1",
"webpack-dev-middleware": "^1.12.0",
"webpack-hot-middleware": "^2.20.0"
},
"customDependecies": {
"body-parser": [
"",
"1.18.1",
"1.18.0"
]
}
}
Note in above package.json file, I have added a new key customDependecies which I will use for installing multiple dependencies. Here I am using body-parser package for demo. Next you need file, that can read this key and install the deps.
install-deps.js
const {spawnSync} = require('child_process');
const fs = require('fs');
const customDependencies = require('./package.json').customDependecies;
spawnSync('mkdir', ['./node_modules/.tmp']);
for (var dependency in customDependencies) {
customDependencies[dependency].forEach((version) => {
console.log(`Installing ${dependency}#${version}`);
if (version) {
spawnSync('npm', ['install', `${dependency}#${version}`]);
spawnSync('mv', [`./node_modules/${dependency}`, `./node_modules/.tmp/${dependency}#${version}`]);
} else {
spawnSync('npm', ['install', `${dependency}`]);
spawnSync('mv', [`./node_modules/${dependency}`, `./node_modules/.tmp/${dependency}`]);
}
});
customDependencies[dependency].forEach((version) => {
console.log(`Moving ${dependency}#${version}`);
if (version) {
spawnSync('mv', [`./node_modules/.tmp/${dependency}#${version}`, `./node_modules/${dependency}#${version}`]);
} else {
spawnSync('mv', [`./node_modules/.tmp/${dependency}`, `./node_modules/${dependency}`]);
}
});
}
spawnSync('rm', ['-rf', './node_modules/.tmp']);
console.log(`Installing Deps finished.`);
Here, I am installing deps one by one in tmp folder and once installed, I am moving them to ./node_modules folder.
Once, everything is installed, you can check the versions like below
index.js
var bodyParser = require('body-parser/package.json');
var bodyParser1181 = require('body-parser#1.18.1/package.json');
var bodyParser1182 = require('body-parser#1.18.0/package.json');
console.log(bodyParser.version);
console.log(bodyParser1181.version);
console.log(bodyParser1182.version);
Hope, this will serve your purpose.

Create 3 separate projects (folders with package.json) and a shared folder:
A shared folder containing the test module (my-test). Export a function to run the test;
A client project importing my-test and dependency v1. Export a function that calls the test function in my-test.
A client project importing my-test and dependency v2. Export a function that calls the test function in my-test.
A master project that imports both client projects. Run each exported function.

You're going to have to run them separately. Create a separate project folder for each dependency version. Ex. React10, React11, React12. Each will have its own package.json, specified for the correct version. When you run the integration and/or versioned tests, you'll run your standard unit tests across each version, but it may also be advisable to add any version specific unit tests to that folder.
Creating a make file would make your life easier when running your full testing suite. If you do this you can easily integrate this into CI.

In addition to the other suggestions, you can try the approach described at Testing multiple versions of a module dependency.
Here's an example of using this approach to test against multiple webpack versions:
npm install --save-dev module-alias
npm install --save-dev webpack-v4#npm:webpack#4.46.0
npm install --save-dev webpack-v5#npm:webpack#5.45.1
The module-alias package handles the magic of switching between package versions while still supporting normal require('webpack') (or whatever your module is) calls.
The other installs will create two versions of your dependency, each with a distinct directory name within your local node_modules/.
Then, within your test code, you can set up the dependency alias via:
const path = require('path');
require('module-alias').addAlias(
'webpack',
path.resolve('node_modules', 'webpack-v4'),
);
// require('webpack') will now pull in webpack-v4
You'd do the same thing for 'webpack-v5' in a different test harness.
If any of your sub-dependencies have a hardcoded require('webpack') anywhere in their own code, this will ensure that they also pull in the correct webpack version.

UNKOWN error thrown when compiling typescript using Gulp in VS2015

I have installed Visual Studio 2015 (with no other previous versions) on a new laptop and have pulled down the source for our MVC web app. We have a gulp file with tasks to compile our less and typescript.
When running this task ...
cmd.exe /c gulp -b "C:\Code\Trunk\MyProj\MyProj.Web" --color --gulpfile "C:\Code\Trunk\MyProj\MyProj.Web\Gulpfile.js" typescript
... I get the following error:
[09:43:16] Using gulpfile C:\Code\Trunk\MyProj\MyProj.Web\Gulpfile.js
[09:43:16] Starting 'typescript'...
[09:43:34] Plumber found unhandled error:
Error: UNKNOWN, open 'C:\Code\Trunk\MyProj\MyProj.Web\app\allergy\main.js'
Process terminated with code 0.
Here is the task in the gulp file (with other parts removed for brevity):
var gulp = require("gulp");
var plumber = require("gulp-plumber");
var sourcemaps = require("gulp-sourcemaps");
var typescript = require("gulp-typescript");
var merge = require("merge2");
var paths = {
typescript: {
globpatterns: {
all: "./Scripts/**/*.ts",
excludedefinitions: "!./Scripts/**/*.d.ts"
}
}
};
gulp.task("typescript", function () {
var result = gulp.src([
paths.typescript.globpatterns.all,
paths.typescript.globpatterns.excludedefinitions
])
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(typescript({
removeComments: true,
declarationFiles: false,
noImplicitAny: false,
noEmitOnError: true,
module: "amd",
target: "ES5"
}));
return merge([
result.js.pipe(gulp.dest("./")),
result.pipe(sourcemaps.write()).pipe(gulp.dest("./"))
]);
});
My colleague has the same set-up as me and gets no error.
Typescript is set to version 1.0 in the project file (<TypeScriptToolsVersion>1.0</TypeScriptToolsVersion>) and I can't change this just now. I wondered if the reason was beacuse I don't have this version installed on my machine but my colleague doesn't either. C:\Program Files (x86)\Microsoft SDKs\TypeScript only has a folder for 1.7
I noticed that the task completes successfully if I remove either of the 2 lines with in the merge block.
It's a different .js file in the error message each time
I searched the web to see what the UNKNOWN error even means but couldn't find anything obvious / helpful. Anyone know how to fix this error? Or how I go about finding out why it's being thrown?
EDIT 20-Jan-2016
So, I was getting this error consistently for about a week ... and now it has stopped happening. I haven't made any changes to my development environment either. I'd like to leave this question open since I'm curious as to why this happened.