We Keep Coding

NextJS Middleware Matcher For Dynamic Routes

I'm building a website with subdomains. Each subdomain is mapped to a file-based page using middleware. Below is an example of how I'm mapping subdomains to pages:
app.com maps to /home
app.com/pricing maps to /home/pricing
subdomain1.app.com/dashboard maps to /_subdomains/subdomain1/dashboard
subdomain2.app.com/dashboard/home maps to /_subdomains/subdomain2/dashboard/home
app.com, subdomain1.app.com and subdomain1.app.com/dashboard/ and everything else are working fine, but when I try to access subdomain1.app.com/dashboard/home I'm getting 404 Not Found.
Here's my folder structure:
pages/
├── _subdomains/
│ └── [subdomain]/
│ ├── dashboard/
│ │ ├── home.tsx
│ │ └── index.tsx
│ └── index.tsx
├── home/
│ └── ...
└── _app.tsx
import { NextRequest, NextResponse } from 'next/server';
export const config = {
// I have a feeling this isn't matching /_subdomains/subdomain/dashboard/home
matcher: ['/', '/([^/.]*)', '/auth/([^/.]*)', '/_subdomains/:path*'],
};
export default async function middleware(req: NextRequest) {
const url = req.nextUrl;
const hostname = req.headers.get('host') || process.env.ROOT_DOMAIN;
if (!hostname) {
throw Error('Middleware -> No hostname');
}
const currentHost = hostname.replace(`.${process.env.ROOT_DOMAIN}`, '');
if (currentHost === process.env.ROOT_DOMAIN) {
url.pathname = `/home${url.pathname}`;
} else {
console.log(`/_subdomains/${currentHost}${url.pathname}`)
url.pathname = `/_subdomains/${currentHost}${url.pathname}`;
}
return NextResponse.rewrite(url);
}
I'm fairly certain it's the matcher that isn't working but I don't know why.
Matching /_subdomains/:path* should match /_subdomains/a/b/c according to the docs but it isn't working in this case. Or it could be another issue I'm not sure

Fixed by changing the matcher to
matcher: [
/*
* Match all paths except for:
* 1. /api routes
* 2. /_next (Next.js internals)
* 3. /fonts (inside /public)
* 4. /examples (inside /public)
* 5. all root files inside /public (e.g. /favicon.ico)
*/
"/((?!api|_next|fonts|examples|[\\w-]+\\.\\w+).*)",
],
Thanks to this

SWC: module item found but is_es6 is false

I'm trying to move from babel to swc for compiling and bundling a react component library but I have trouble with the configuration.
When I run npm run spack, I get the following error:
thread '<unnamed>' panicked at 'internal error: entered unreachable code: module item found but is_es6 is false: ExportNamed(NamedExport { span: Span { lo: BytePos(954874), hi: BytePos(954914), ctxt: #0 }, specifiers: [Named(ExportNamedSpecifier { span: Span { lo: BytePos(954883), hi: BytePos(954890), ctxt: #0 }, orig: Ident(Ident { span: Span { lo: BytePos(954883), hi: BytePos(954890), ctxt: #4141 }, sym: Atom('default' type=static), optional: false }), exported: Some(Ident(Ident { span: Span { lo: BytePos(954883), hi: BytePos(954890), ctxt: #194 }, sym: Atom('default' type=static), optional: false })), is_type_only: false })], src: Some(Str { span: Span { lo: BytePos(954898), hi: BytePos(954913), ctxt: #0 }, value: Atom('./FormControl' type=dynamic), raw: Some(Atom(''./FormControl'' type=dynamic)) }), type_only: false, asserts: None })', crates/swc_bundler/src/bundler/chunk/cjs.rs:142:29
What I get from this error is that he fails to bundle React components. I can't find the is_es6 configuration mentioned in the error so I'm not sure how to solve this. I tried rereading the doc of swc without any success. The module part of the config doesn't seem to solve my problem.
Here is my working tree:
.
├── jest.config.ts
├── package-lock.json
├── package.json
├── spack.config.js
└── src
├── components
│ ├── FiltersBar
│ │ ├── FiltersBar.test.tsx
│ │ ├── FiltersBar.tsx
│ │ ├── __snapshots__
│ │ │ └── FiltersBar.test.tsx.snap
│ │ └── index.ts
│ └── index.ts
├── index.ts
└── libraries
├── helpers
│ ├── helpers.test.ts
│ ├── helpers.ts
│ └── index.ts
└── index.ts
Here is my .swcrc file:
{
"jsc": {
"target": "es2021",
"parser": {
"syntax": "typescript"
}
},
"module": {
"type": "commonjs"
}
}
I'm pretty new to all this stuff so please bear with me :)

GulpJS can no longer finds task in list properly (Gulp 4)

My gulp file pretty much looks like this (simplified)
function copyAssets () {
return src(paths.assets, { base: './' })
.pipe(cache('asset-files'))
.pipe(dest(paths.build))
}
// Some more task functions
const build = parallel(copyAssets, brewCoffee, buildTypescript)
module.exports = { build, watch: series(build, watchFiles) }
But now when I list it it looks like:
[15:29:30] Tasks for .....
[15:29:30] ├─┬ <parallel>
[15:29:30] │ └─┬ <parallel>
[15:29:30] │ ├── copyAssets
[15:29:30] │ ├── brewCoffee
[15:29:30] │ └── buildTypescript
[15:29:30] └─┬ <series>
[15:29:30] └─┬ <series>
[15:29:30] ├─┬ <parallel>
[15:29:30] │ ├── copyAssets
[15:29:30] │ ├── brewCoffee
[15:29:30] │ └── buildTypescript
[15:29:30] └── watchFiles
And running things like gulp build will say that the task does not exist.
If I wrap the series / paralel function in an anonymised function I do see it appear in the list (like so)
const build = () => parallel(copyAssets, brewCoffee, buildTypescript)
module.exports = { build, watch: () => series(build, watchFiles) }
But then when running gulp build I'm getting
Did you forget to signal async completion?
as an error.
I know at some point this did work (a number of months ago). But now for some reason it doesn't anymore. If I run gulp --version the output is:
CLI version: 2.2.0
Local version: 4.0.0
edit: Hmmm. This seems to work
module.exports = { build: () => build(), watch: () => series(build, watchFiles)() }
But I doubt that's how I should actually do this stuff....
edit2: No, still broken, it runs now, and waits until completion. And then says the same error as before: The following tasks did not complete: build

When I have used parallel (very briefly) in the past I had to reference it from gulp.
E.g. Change:
const build = () => parallel(copyAssets, brewCoffee, buildTypescript);
to:
const build = () => gulp.parallel(copyAssets, brewCoffee, buildTypescript);
The same with series here:
module.exports = { build, watch: gulp.series(build, watchFiles) }

Try this:
var srcPaths = {
app: [
'wwwroot/app/**/*.ts'
],
js: [
'node_modules/core-js/client/shim.min.js',
'node_modules/zone.js/dist/zone.js',
'node_modules/reflect-metadata/Reflect.js',
'node_modules/systemjs/dist/system.src.js',
'node_modules/typescript/lib/typescript.js',
'node_modules/ng2-bootstrap/bundles/ng2-bootstrap.min.js',
'node_modules/moment/moment.js'
],
}
gulp.task('watch', function () {
gulp.watch([srcPaths.app, srcPaths.js], gulp.series('js'));
});
It will work fine. Enjoy!

Reduce rows into json key / value pair with postgres

I have a postgres table something like this.
+----+-----------+----------------------+--------+
| id | Key | Value | userId |
+----+-----------+----------------------+--------+
| 1 | email | thomas#reggi.com | 1 |
| 2 | firstName | thomas | 1 |
| 3 | lastName | reggi | 1 |
| 4 | email | new.thomas#reggi.com | 1 |
+----+-----------+----------------------+--------+
I'm looking for a way to "reduce" this table down to a json object.
{
"email": "new.thomas#reggi.com",
"firstName": "thomas",
"lastName": "reggi"
}
How close can I get to this with just using postgres?

If the table is called data, try this (jsonb_pretty is just for display purposes):
SELECT jsonb_pretty(
jsonb_object_agg(key, value ORDER BY id)
)
FROM data
WHERE userid = 1;
┌──────────────────────────────────────┐
│ jsonb_pretty │
├──────────────────────────────────────┤
│ { ↵│
│ "email": "new.thomas#reggi.com",↵│
│ "lastName": "reggi", ↵│
│ "firstName": "thomas" ↵│
│ } │
└──────────────────────────────────────┘
(1 row)
This relies on the feature that jsonb does not keep duplicate keys.
It also relies on the fact that jsonb will always retain the last added key/value pair.

If you want to always have the latest value for a key, you could use a CTE and the RANK() window function:
SELECT * FROM p;
┌────┬───────────┬──────────────────────┬────────┬────────────────────────────┐
│ id │ key │ value │ userid │ modification_time │
├────┼───────────┼──────────────────────┼────────┼────────────────────────────┤
│ 1 │ email │ thomas#reggi.com │ 1 │ 2016-10-05 12:53:32.936704 │
│ 2 │ firstName │ thomas │ 1 │ 2016-10-05 12:53:32.936704 │
│ 3 │ lastName │ reggi │ 1 │ 2016-10-05 12:53:32.936704 │
│ 4 │ email │ new.thomas#reggi.com │ 1 │ 2016-11-06 15:53:48.025775 │
└────┴───────────┴──────────────────────┴────────┴────────────────────────────┘
(4 rows)
WITH info_with_rank_for_user AS (
SELECT userId,
modification_time,
value,
key,
RANK() OVER (PARTITION BY userId, key ORDER BY id DESC)
FROM p
)
SELECT userId,
json_object_agg(key, value),
MAX(modification_time) AS last_settings_modification_time
FROM info_with_rank_for_user
WHERE rank = 1
GROUP BY userId
;
┌────────┬────────────────────────────────────────────────────────────────────────────────────┬─────────────────────────────────┐
│ userid │ json_object_agg │ last_settings_modification_time │
├────────┼────────────────────────────────────────────────────────────────────────────────────┼─────────────────────────────────┤
│ 1 │ { "email" : "new.thomas#reggi.com", "firstName" : "thomas", "lastName" : "reggi" } │ 2016-11-06 15:53:48.025775 │
└────────┴────────────────────────────────────────────────────────────────────────────────────┴─────────────────────────────────┘
(1 row)

Webpack font not found

I started learning webpack and I have this small project
I'll be simplifying the content for brevity, hopefully it wont affect your understanding of the problem.
.
└── project
├── dist
│   ├── fonts
│   └── js
├── src
│   ├── app
│ │ ├── app.js
│ │ └── component
│ │ ├── component.css
│ │ ├── component.directive.js
│ │ └── component.html
│   └── fontello
├── index.html
├── package.json
└── webpack.config.js
I'm trying to keep everything inside my component encapsulated so I have:
component.directive.js
require('../../fontello/css/fontello.css');
require('./component.css');
var angular = require('angular');
...
module.exports = angular.module('directives.component', [])
.directive('component', component)
.name;
app.js
var angular = require('angular');
var component = require('./component/component.directive.js');
...
angular.module('app', [component])
and webpack.config.js
var webpack = require('webpack');
module.exports = {
context: __dirname + '/src',
entry: {
app: './app/app.js',
vendor: ['angular']
},
output: {
path: __dirname + '/dist',
filename: 'js/app.bundle.js'
},
plugins: [
new webpack.optimize.CommonsChunkPlugin("vendor", "js/vendor.bundle.js")
],
module: {
loaders: [{
test: /\.css$/,
loader: 'style-loader!css-loader',
exclude: ['./src/fontello']
}, {
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)(\?[a-z0-9=&.]+)?$/,
loader: 'file-loader?name=fonts/[name].[ext]'
}, {
test: /\.html$/,
loader: 'raw'
}]
}
};
and I get for woff2/woff/ttf
404 Not Found. GET http://localhost:8080/fonts/fontello.woff2
what am I doing wrong?