NextJS: Build components to export and pull into a different project - next.js

Current Setup: I have two NextJS apps: one we'll call Project A and a library repo that we'll call Project LIB. Project A is a fairly simple app that has a couple independent components whereas Project LIB is a library-like app that many other apps leverage.
What I am trying to do: Package up Project A in a way where the build distribution contains all of its components that I can then leverage in Project LIB. I am currently building/deploying Project A as a private repo and pulling it into Project LIB using npm install git#github.com:<organization>/<Project A>.git and that is working fine. My current issue is that only the pages are being build when I build Project A using npm run build and it doesn't also generate each component's corresponding .d.ts file under /components.
I figured setting "declaration": true /* Generates corresponding '.d.ts' file. */ would generate the components for me but that didn't seem to do the trick. I'm also not finding much online regarding how to do this. Maybe i'm just a bad googler, who knows.
Anyways, here's what my tsconfig and package.json files looks like:
package.json:
{
...,
"files": [
"lib/**/*"
]
}
tsconfig.json:
{
"compilerOptions": {
"target": "es5",
"module": "ESNext",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"jsx": "preserve",
"declaration": true,
"declarationMap": true,
"sourceMap": true,
"outDir": "./lib",
"rootDir": "./",
"removeComments": true,
"noEmit": true,
"isolatedModules": true,
"strict": true,
"moduleResolution": "node",
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
"components/**/*"
],
"exclude": [
"node_modules/*",
"./node_modules",
"./node_modules/*",
"./lib"
]
}

Related

How do I get firebase hosting predeploy to run per target?

There is a firebase.json like this
"hosting": [
{
"target": "site-b",
"predeploy":cp ".env.site-b .env",
},
{
"target": "site-c",
"predeploy":cp ".env.site-c .env",
},
{
"target": "site-a",
"predeploy":cp ".env.site-a .env",
},
]
Deploying with a single target will work, but if multiple targets are specified, the .env will all be the same because deploy will start after all predeploys have been executed, which will not work.
I want to use Github Action FirebaseExtended/action-hosting-deploy#v0 to check the preview of multiple sites, is there a workaround?

__awaiter is not defined when using async/await in Typescript

I have the following code snippet in Typescript:
nsp.on('connection', async function (socket) {
await this.emitInitialPackage(nsp, currentLine, currentCell);
}
emitInitialPackage(nsp: any, name: string, cell: any) {
return db.Line.find({
where: {
name: name,
CellId: cell
}
}).then(results => {
nsp.emit('value', results);
}).catch(err => console.log(err));
}
However, when this is compiled (v2.2.1) and run, I get the following error:
Uncaught ReferenceError: __awaiter is not defined
What does this mean and how do I get the expected functionality?
Update:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"noEmitHelpers": true,
"strictNullChecks": false,
"lib": [
"dom",
"es2015.promise",
"es5"
],
"types": [
"node",
"express"
]
},
"exclude": [
"node_modules",
"dist"
]
}
When you use some functionalities from future version of JavaScript (ES6 and beyond) like in your case async/await, TypeScript generates helper functions. These helper functions are used to provide the new functionalities as ES5 code, thus it can be run in a web browser.
Your problem:
In your tsconfig.json you set the noEmitHelpers value to true. By doing that you tell the TypeScript compiler that you will provide these helper functions yourself.
How to fix it:
You can set the noEmitHelpers value to false in your tsconfig.json, thus the TypeScript compiler will emit the helper functions when needed. One drawback of this method is that if you use for example async/await in 2 different files, the helper functions will be emitted 2 times (one per file).
The other solution is to set the --importHelpers flag when you use tsc. It will tell the TypeScript compiler to include the helper functions only once. Please note that if you use this solution you have to install the tslib package.
In your case: tsc --importHelpers -w
The accepted answer didn't work in my case, but I found that my tsconfig.json was targeting es6 ("target":"es6").
What this means is that TypeScript transpiles to code that uses the __awaiter util because async await was not included in the spec until ES2017.
I fixed this by changing my target to ESNext (or anything ES2017 and above)

ASP.NET Core - dotnet bundle watch stops detecting changes

I'm running 'dotnet bundle watch' on an ASP.NET Core application to automatically run the bundler when I save changes to my .js files. It processes as expected at first, but after the first or second save in Visual Studio 2015 the bundler just hangs at "Watching..." and doesn't react to any subsequent changes made to the input files.
It will work pretty reliably that first time after restarting Visual Studio, and it sometimes seems to be willing to detect a change if I wait 5-10 minutes and try again. The inconsistency of it makes me wonder if it's just a bug. Running 'dotnet bundle' works fine every time.
Here's my bundleconfig.json:
[
{
"outputFileName": "wwwroot/css/site.min.css",
"inputFiles": [
"wwwroot/css/site.css"
]
},
{
"outputFileName": "wwwroot/js/site.js",
"inputFiles": [
"wwwroot/js/file.js"
],
"minify": {
"enabled": false,
"renameLocals": false
},
{
"outputFileName": "wwwroot/js/site.min.js",
"inputFiles": [
"wwwroot/js/site.js"
],
"minify": {
"enabled": true,
"renameLocals": true
},
"sourceMap": false
}
]
Does anyone have any idea what might be going on here? I've blown the better half of the day trying to get to the bottom of this with no luck.

Azure Web App doesn't build typescript files

I have an ASP.NET Core project which has this structure:
- tsconfig.json
- app
|- file1.ts
|- file2.ts
|- file3.ts
- wwwroot
|- app
|- index.html
tsconfig has these contents:
{
"compilerOptions": {
"noImplicitAny": false,
"noEmitOnError": true,
"removeComments": true,
"sourceMap": true,
"target": "es6",
"module": "amd",
"outFile": "wwwroot/app/app.js",
"strictNullChecks": true
},
"compileOnSave": true
}
When I try to deploy this project from git to Azure Web App my .ts files don't get compiled. I thought Kudu can deal with Typescript already. Am I missing something?
As David Ebbo said, conversation was moved to https://github.com/projectkudu/kudu/issues/2156 and resolved there.

jshint: enforcing "globalstrict" : false when "node" : true

In my .jshintrc file I have globalstrict set to false and node set to true. A side affect of this is that is appears to suppress the warnings I would expect if a global use strict was in place.
Is there any way of overriding this behaviour so that the warning is not suppressed?
Edit
Having re-read the docs on jshint.com and some of the issues on GitHub (notably #1922 and #2551) I have modified my .jshintrc as follows:
{
"bitwise": true,
"curly": true,
"debug": false,
"eqeqeq": true,
"forin": true,
"freeze": true,
"futurehostile": true,
"globalstrict": false,
"latedef": true,
"noarg": true,
"nonbsp": true,
"nonew": true,
"singleGroups": true,
"strict": true,
"undef": true,
"unused": "strict",
"browser": false,
"devel": false,
"node": true,
"predef": [
"-console"
],
"+W097": true
}
However this doesn't work for this particular message (it does though if, for example, I change it to -W034, which is the functional equivalent).
Thanks
This currently isn't possible however issue #2575 and associated pull request #2576 will provide the functionality if they are accepted.

Resources