I am writing an admin panel on the nuxt + nest stack.
I'm using this template: https://github.com/stephsalou/nuxt-nest-template
When I work locally, there are no errors related to the server, but when I run mode build, ts wants to prototype the files that are in node_modules
Package.json
"scripts": {
"nuxt": "nuxt",
"nest": "nest start",
"dev": "cross-env NODE_TYPE=docker IS_NUXT_ENABLED=true nodemon",
"dev:production": "cross-env NODE_TYPE=production IS_NUXT_ENABLED=true nodemon",
"dev:client": "nuxt",
"dev:server": "nodemon",
"build": "NODE_TYPE=production run-s clean:dist compile:server compile:client client:generate copy:.nuxt copy:client copy:config",
"clean:dist": "rimraf dist",
"compile:server/*this script throws an error*/": "tsc --listFiles -p tsconfig.build.json",
"compile:client": "cross-env mode=production nuxt build",
"client:generate": "cross-env mode=production nuxt generate",
"copy:client": "copyfiles -a \\\"client/**/*\\\" dist",
"copy:.nuxt": "copyfiles -a \".nuxt/**/*\" dist",
"copy:config": "copyfiles nuxt.config.ts package.json package-lock.json dist",
"analytics:dev": "NODE_ENV=development webpack --watch --config ./static/js/analytics/webpack",
"analytics:build": "NODE_ENV=production webpack --config ./static/js/analytics/webpack"
},
tsconfig
{
"compilerOptions": {
"target": "ES2017",
"module": "commonjs",
"declaration": true,
"removeComments": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"outDir": "./dist/server",
"baseUrl": "./",
"skipLibCheck": true,
// "incremental": true,
"lib": ["ESNext", "ESNext.AsyncIterable", "DOM"],
// "esModuleInterop": true,
// "allowJs": true,
// "strict": true,
// "noEmit": true,
"paths": {
"~/*": ["./server/*"],
"#/*": ["./client/*"]
},
"types": ["#types/node", "#nuxt/types", "#types/sequelize"]
},
"exclude": ["node_modules/**/*", ".nuxt", "dist"]
}
tsconfig.build
{
"extends": "./tsconfig.json",
"include": [
"server/**/*"
]
}
Why might it not work??
I don't think this i related to tsconfig at all.
The libs should be included in compilation as they are part of the applications. Adding the property
"skipLibCheck": true
are many times the fix for theese kinds of errors as it skips checking *.d.ts(lib files). But not in your case as it is there.
First I would check node versions, yarn version etc.
I successfully tried the template using yarn build
node v14.7.0
yarn v1.22.15
Then the include and exclude look a bit strange I think.
If I remember correct include and exclude is overwritten when extending. So you might need to specify them explicitly in both config files.
I.e
In tsconfig.json
"exclude": ["node_modules", ".nuxt", "dist"]
In tsconfig.build.json (make sure to exclude the tests)
"exclude": ["node_modules", "test", "dist", "**/*spec.ts"],
"include": ["server"]
Related
I have the following folder structure in my TypeScript project:
- azure_functions
- function_app
- functions
- project_1
function.json
index.ts
package.json
package-lock.json
tsconfig.json
node_modules
This is the current configuration of my tsconfig.json file:
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"outDir": "./dist",
"rootDir": "./",
"allowJs": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"resolveJsonModule": true,
"isolatedModules": true
},
"include": ["./**/*.ts"],
"exclude": ["node_modules", "dist"]
}
This is the configuration of my package.json file:
{
"name": "ts_project",
"version": "1.0.0",
"description": "",
"scripts": {
"start": "npm run build && func start",
"build": "tsc",
"watch": "tsc -w",
"prestart": "npm run build && func extensions install",
"start:host": "func start",
"test": "echo \"No tests yet...\""
},
"dependencies": {
"node-fetch": "^2.6.7"
},
"devDependencies": {
"#azure/functions": "^3.5.0",
"#types/node-fetch": "2.6.2",
"typescript": "^4.4.4"
}
}
Whenever I run npm start I see that no conversion from TS to JS is performed and I end up with an error indicating that Invalid script file name configuration. The scriptFile property is set to a file it doesn't exist.
If I do a tsc index.ts inside of the project_1 folder, I will see my file converted to js. Why am I unable to perform the same through the package.json file?
What am I missing in my tsconfig.json file?
For reference, this is the content of my function.json:
{
"bindings": [
{
"authLevel": "function",
"type": "httpTrigger",
"direction": "in",
"name": "req",
"methods": [
"get",
"post"
]
},
{
"type": "http",
"direction": "out",
"name": "res"
}
],
"scriptFile": "../dist/functions/project_1/index.js"
}
Here I also faced the same error when I changed the scriptFile in the function.json they way you have written.
Assuming that the entire function is in the functions folder. They you should not specify the functions name in the scriptFile .
The scriptFile should be in this format
"../dist/project_1/index.js"
Now you can run the npm start in the functions folder and it should start the function
hello everyone I am building a typescript node app and
I was trying to change my code to use ES7 instead of CommonJs because I need to make my code run only using the dist folder "typescript output" as a pure javascript project even if my typescript project doesn't exist.
After a lot of changes, I ran into an issue because I am using "ChildProcess fork" in my code and when I changed its path to "./dist/src/problem/index.js" instead of "./src/problem/index.ts" the process didn't start
here is my package.json
"version": "1.0.0",
"description": "",
"main": "dist/index.js",
"type": "module",
"scripts": {
"build": "tsc --w",
"start": "tsc && node --experimental-specifier-resolution=node ./dist/src/index.js",
}
and my tsconfig.json file
{
"compilerOptions": {
"sourceMap": true,
"declaration": true,
"module": "ESNext",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"resolveJsonModule": true,
"downlevelIteration": true,
"strict": true,
"target": "ES2017",
"lib": ["es2017"],
"outDir": "./dist",
"skipLibCheck": true
},
"include": [
"./src/**/*.ts",
"src/**/*.json",
"tests/**/*.ts",
"tests/**/*.json"
]
}
and the part where I run the "ChildProcess" looks like this:
const childProcess = fork("./dist/src/problem/index.js");
this.childProcesses.push(childProcess);
I have created a package named #package/test. When imported to a new, empty React typescript app works perfectly. Problems start in Jest tests suites.
The commonJS package version cause Jest to throw:
Test suite failed to run. TypeError:Cannot read property 'getSelectors' of undefined
import { Test } from `#package/test
const selectors = Test.getSelectors(...); //error here indicating that Test is undefined
When I compiled an ES modules package version, it causes Jest to throw
export * from './common';
^^^^^^
SyntaxError: Unexpected token export
which is the first line of my src/index.ts inside my package.
I have tested many solutions e.g.:
Defining transformIgnorePatterns for Jest
Searching for circular dependencies using eslint plugins and Madge
Tested on Node.js versions: 10.20.0, 12.21.0, 15.12.0
Tested on typescript versions: 3.7.5, 4.1.2
Some details about the package:
/* package.json */
{
"name": "#package/test",
"version": "2.4.0",
"main": "./dist/index.js",
"scripts": {
"build": "tsc -b ./tsconfig.package.json"
},
"typings": "./dist/index.d.ts",
"files": [
"dist"
],
"dependencies": {...},
"peerDependencies": {...},
"sideEffects": "false"
}
/* tsconfig.package.json */
{
"extends": "../../tsconfig.packages.json",
"compilerOptions": { "outDir": "./dist", "rootDir": "./src", "composite": true },
"references": [],
"include": ["src"],
"exclude": ["src/**/*.spec.*", "dist", "node_modules"]
}
/* tsconfig.packages.json */
{
"extends": "../tsconfig.base.json",
"compilerOptions": {
"module": "es2020",
"lib": ["es5", "es2015", "es2020", "dom"]
}
}
/* tsconfig.base.json */
{
"compileOnSave": false,
"compilerOptions": {
"declaration": true,
"sourceMap": true,
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"forceConsistentCasingInFileNames": true,
"esModuleInterop": true,
"resolveJsonModule": true,
"downlevelIteration": true,
"skipLibCheck": true,
"jsx": "react",
"strict": true,
"target": "es5"
}
}
How Test is exported:
import * as actions from './actions';
import reducer, { Action, RootState} from './reducer';
import getSelectors from './getSelectors';
export const Test = {
actions,
reducer,
getSelectors,
};
export { Action, RootState};
export * from './types';
export * from './helpers';
How getSelectors is exported:
export default function getSelectors<S>(selectNavigation: Selector<S, RootState>) {
const getInitialized = createSelector(selectNavigation, (s) => s.initialized);
...
return { getInitialized, ... };
}
React test application details
/* package.json */
{
"name": "jest-verify",
"version": "0.1.0",
"private": true,
"dependencies": {
"#package/test": "2.4.0",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"#types/jest": "^26.0.15",
"#types/node": "^12.0.0",
"#types/react": "^17.0.0",
"#types/react-dom": "^17.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"typescript": "^4.1.2",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
}
/* tsconfig.json */
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"src"
]
}
EDIT:
I managed to make it work in my test React app with transformIgnorePatterns, but unfortunately it does not work in my Angular 1.6 (webpack, babel) app. Added also some babel plugins to transform package into commonJS, but no effect.
The problem was way more complex than it appeared.
Extra issue:
Jest was not respecting Babel config in json file. I had to transform it to js.
Solution no. 1:
Install #babel/preset-env as a dev dependency.
Register it as a preset in Babel's config:
env: {
test: {
presets: ['#babel/preset-env'],
},
}
Register required transformIgnorePatterns in Jest config
Add this to the transform section in Jest config: "^.+\\.js$": "babel-jest"
Solutions no. 2:
Install babel-jest and #babel/plugin-transform-modules-commonjs as dev dependencies.
Register the plugin in Babel's config:
env: {
test: {
plugins: ['#babel/plugin-transform-modules-commonjs'],
},
}
Register required transformIgnorePatterns in Jest config
Add this to the transform section in Jest config: "^.+\\.js$": "babel-jest"
That's the error I get when I fire off npm run test.
Here is my tsconfig.json:
{
"compilerOptions": {
"module": "commonjs",
"declaration": true,
"removeComments": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es2019",
"sourceMap": true,
"outDir": "./dist",
"baseUrl": "./",
"incremental": true
},
"exclude": ["node_modules", "dist"]
}
and the script part of package.json:
"scripts": {
"prebuild": "rimraf dist",
"build": "nest build",
"format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
"start": "nest start",
"start:dev": "nest start --watch",
"start:debug": "nest start --debug --watch",
"start:prod": "node dist/main",
"lint": "tslint -p tsconfig.json -c tslint.json",
"test": "jest",
"test:watch": "jest --watch",
"test:cov": "jest --coverage",
"test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand",
"test:e2e": "jest --config ./test/jest-e2e.json"
},
Here's the jest part of package.json:
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx,mjs}"
],
"moduleDirectories": [
"node_modules",
"src"
],
"moduleFileExtensions": [
"js",
"json",
"ts"
],
"rootDir": "src",
"testRegex": ".spec.ts$",
"transform": {
"^.+\\.(t|j)s$": "ts-jest"
},
"coverageDirectory": "../coverage",
"testEnvironment": "node"
}
It seems like it doesn't like absolute paths starting with src but the app is compiled with no errors and it works which actually means that I don't have to modify anything in the code base, it should be th problem of tests and the jest configuration, I suppose.
How do I fix this error?
I am following alone with the VS Code typescript config.
https://code.visualstudio.com/Docs/languages/typescript
I have setup my tsconfig.json like
{
"compilerOptions": {
"module": "system",
"noImplicitAny": true,
"removeComments": true,
"preserveConstEnums": true,
"outFile": "built/local/tsc.js",
"sourceMap": true
},
"include": [
"**/*"
],
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}
and my task runner
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "0.1.0",
"command": "tsc",
"isShellCommand": true,
"args": ["-p", "."],
"showOutput": "always",
"problemMatcher": "$tsc"
}
My ts codes
class StartUp {
public static main(): number {
console.log('Helle Workd');
return 5;
}
}
console.log('test');
StartUp.main();
For some reason, I don't see any output in the output window when I press cmd + shift + B (build). I do see errors like
hello.ts(8,1): error TS2304: Cannot find name 'ddd'.
if I add randomly add ddd string in the codes.
Can someone help me to solve this issue? Thanks so much!
The command "tsc -p ." doesn't output any if no error in compiling and all compiled JavaScript/SourceMap files are generated, so you cannot see any in the output window of VSCode. Just type and run the command in the console.
You can add option "--diagnostics" to make the command output some information.
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "0.1.0",
"command": "tsc",
"isShellCommand": true,
"args": ["-p", ".", "--diagnostics"],
"problemMatcher": "$tsc"
}
The output:
Files: 2
Lines: 18225
Nodes: 73338
Identifiers: 24828
Symbols: 18969
Types: 4609
Memory used: 62579K
I/O read: 0.00s
I/O write: 0.01s
Parse time: 0.24s
Bind time: 0.12s
Check time: 0.54s
Emit time: 0.06s
Total time: 0.96s
Also see all options in http://www.typescriptlang.org/docs/handbook/compiler-options.html
Setup app structure
Setup basic html
npm init --yes
npm install lite-server --save-dev
npm install --save-dev typescript #types/node #types/jasmine #types/core-js
add script lite to scrips in package.json
create an app folder
add app.js
create tsconfig.json
add the following options
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"lib": ["es2015", "dom"]
}
}
add the following to the package.json file
{
"name": "Angular2",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts":
{
"start": "concurrently \"npm run tsc:w\" \"npm run lite\"",
"lite": "lite-server",
"tsc": "tsc",
"tsc:w": "tsc -w"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies":
{
"#types/core-js": "^0.9.43",
"#types/jasmine": "^2.8.2",
"#types/node": "^8.0.53",
"concurrently": "^3.5.1",
"lite-server": "^2.3.0",
"typescript": "^2.6.1"
},
"dependencies":
{
"types": "^0.1.1"
}
}