Deploy AdonisJS 5 server on IIS 7 - iis-7

I am trying to deploy AdonisJS 5 on IIS, I am getting the following error on RunningLog folder
./RunningLog
internal/modules/cjs/loader.js:905
throw err;
^
Error: Cannot find module 'C:\Server\htdocs\Adonis\whatsapp\server.js'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
at Function.Module._load (internal/modules/cjs/loader.js:746:27)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12)
at internal/main/run_main_module.js:17:47 {
code: 'MODULE_NOT_FOUND',
requireStack: []
}
This is my web.config where I am using as arguments : C:\Server\htdocs\Adonis\whatsapp\node_modules\ts-node .\server.ts
However I have tried to play around changing between server.ts and server.js
Also I have tried to use ts-node to no avail
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<handlers>
<add name="httppPlatformHandler" path="*" verb="*" modules="httpPlatformHandler" resourceType="Unspecified" />
</handlers>
<httpPlatform stdoutLogEnabled="true" stdoutLogFile=".\RunningLog\node.log" startupTimeLimit="20" processPath="C:\Program Files\nodejs\node.exe" arguments="C:\Server\htdocs\Adonis\whatsapp\node_modules\ts-node .\server.ts">
<environmentVariables>
<environmentVariable name="PORT" value="%HTTP_PLATFORM_PORT%" />
<environmentVariable name="NODE_ENV" value="Production" />
</environmentVariables>
</httpPlatform>
</system.webServer>
</configuration>
This is my package.json
{
"name": "hello-world",
"version": "1.0.0",
"private": true,
"type": "module",
"scripts": {
"dev": "node ace serve --watch",
"build": "node ace build --production",
"start": "node --experimental-specifier-resolution=node --loader ts-node/esm /server.ts",
"lint": "eslint . --ext=.ts",
"format": "prettier --write ."
},
"eslintConfig": {
"extends": [
"plugin:adonis/typescriptApp",
"prettier"
],
"plugins": [
"prettier"
],
"rules": {
"prettier/prettier": [
"error"
]
}
},
"eslintIgnore": [
"build"
],
"prettier": {
"trailingComma": "es5",
"semi": false,
"singleQuote": true,
"useTabs": false,
"quoteProps": "consistent",
"bracketSpacing": true,
"arrowParens": "always",
"printWidth": 100
},
"devDependencies": {
"#adonisjs/assembler": "^5.6.2",
"#japa/preset-adonis": "^1.0.15",
"#japa/runner": "^2.0.8",
"adonis-preset-ts": "^2.1.0",
"eslint": "^8.15.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-adonis": "^2.1.0",
"eslint-plugin-prettier": "^4.0.0",
"pino-pretty": "^7.6.1",
"prettier": "^2.6.2",
"typescript": "^4.6.4",
"youch": "^3.2.0",
"youch-terminal": "^2.1.4"
},
"dependencies": {
"#adonisjs/core": "^5.7.6",
"#adonisjs/repl": "^3.1.10",
"fs": "0.0.1-security",
"proxy-addr": "^2.0.7",
"qrcode-terminal": "^0.12.0",
"reflect-metadata": "^0.1.13",
"source-map-support": "^0.5.21",
"ts-node": "^10.7.0",
"whatsapp-web.js": "^1.16.6"
}
}
This is my tsconfig.json
{
"extends": "./node_modules/adonis-preset-ts/tsconfig",
"include": ["**/*"],
"exclude": ["node_modules", "build"],
"compilerOptions": {
"esModuleInterop": true,
"outDir": "build",
"rootDir": "./",
"sourceMap": true,
"paths": {
"App/*": ["./app/*"],
"Config/*": ["./config/*"],
"Contracts/*": ["./contracts/*"],
"Database/*": ["./database/*"]
},
"types": ["#adonisjs/core", "#adonisjs/repl", "#japa/preset-adonis/build/adonis-typings"]
},
"ts-node": {
"esm": true
},
"lib": ["esnext"]
}

Related

You may need an additional loader to handle the result of these loaders. Angular 14

I updated from Angular 7 to Angular 14 after removing all the errors in my project this is the only error that is stopping me from compiling successfully. I am getting this error on ng serve:
/src/app/shared/styles/themes/theme-f.scss:1:6 - Error: Module parse failed: Unexpected token (1:6) File was processed with these loaders:
*/node_modules/resolve-url-loader/index.js
*/node_modules/sass-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
body, .wrapper > section { | background-color: #f5f7fa; | color: #73879C;
here is my tsconfig.json file
{
"compileOnSave": false,
"compilerOptions": {
"strictPropertyInitialization": false,
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"module": "es2020",
"moduleResolution": "node",
"experimentalDecorators": true,
"importHelpers": true,
"target": "es2019",
"skipLibCheck": true,
"typeRoots": [
"node_modules/#types"
],
"types": [ "googlemaps" ],
"lib": [
"es2018",
"DOM",
"DOM.Iterable",
//"ScriptHost"
]
},
"angularCompilerOptions": {
//"enableLegacyTemplate": true,
//"enableI18nLegacyMessageIdFormat": false,
"disableTypeScriptVersionCheck": true,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
},
"browserslist": [
">0.2%",
"not dead",
"not op_mini all"
]
}
This my package.json file:
{
"name": "wsi-portal",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"install": "npm run napa",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"modernizr": "modernizr -c modernizr-config.json -d src/modernizr.js",
"postinstall": "node ./node_modules/protractor/bin/webdriver-manager update",
"napa": "napa",
"ng-high-memory": "node --max_old_space_size=16384 ./node_modules/#angular/cli/bin/ng"
},
"browser": {
"child_process": false
},
"private": true,
"napa": {
"jquery.flot.spline": "miloszfalinski/jquery.flot.spline",
"ika.jvectormap": "kakirigi/ika.jvectormap",
"flot": "flot/flot#v0.8.3"
},
"dependencies": {
"#agm/core": "^1.0.0-beta.3",
"#angular-devkit/build-webpack": "^0.1401.0",
"#angular/animations": "~14.0.5",
"#angular/cdk": "^14.0.4",
"#angular/common": "~14.0.5",
"#angular/compiler": "~14.0.5",
"#angular/core": "~14.0.5",
"#angular/forms": "~14.0.5",
"#angular/material": "^14.0.4",
"#angular/platform-browser": "~14.0.5",
"#angular/platform-browser-dynamic": "~14.0.5",
"#angular/router": "^14.0.5",
"#fullcalendar/angular": "^5.11.0",
"#fullcalendar/bootstrap": "^5.11.0",
"#fullcalendar/core": "^5.11.0",
"#fullcalendar/daygrid": "^5.11.0",
"#fullcalendar/google-calendar": "^5.11.0",
"#fullcalendar/interaction": "^5.11.0",
"#fullcalendar/list": "^5.11.0",
"#fullcalendar/luxon": "^5.11.0",
"#fullcalendar/moment": "^5.11.0",
"#fullcalendar/moment-timezone": "^5.11.0",
"#fullcalendar/rrule": "^5.11.0",
"#fullcalendar/timegrid": "^5.11.0",
"#kolkov/angular-editor": "^2.1.0",
"#ngx-translate/core": "^14.0.0",
"#ngx-translate/http-loader": "^7.0.0",
"#pascalhonegger/ng-datatable": "^14.0.0",
"#types/angular": "^1.8.4",
"angular-datatable2": "^0.9.31",
"angular-datatables": "^14.0.0",
"angular-date-value-accessor": "0.0.2",
"angular-google-recaptcha": "^1.0.3",
"angular-mgl-timeline": "^0.3.3",
"angular-tabs-component": "^1.0.3",
"angular-tree-component": "^8.0.1",
"angular2-datatable-serverpagination": "^0.6.3",
"angular2-text-mask": "^9.0.0",
"angular2-toaster": "^7.0.0",
"bootstrap": "^3.3.7",
"chart.js": "^2.7.1",
"codemirror": "^5.46.0",
"easy-pie-chart": "^2.1.7",
"font-awesome": "^4.7.0",
"format-currency": "^1.0.0",
"fullcalendar": "^5.11.0",
"html2canvas": "1.0.0-rc.1",
"https-proxy-agent": "^5.0.1",
"jquery": "^3.4.1",
"jquery-slimscroll": "^1.3.8",
"jquery-sparkline": "^2.4.0",
"jquery-ui": "^1.12.1",
"jquery.browser": "^0.1.0",
"jquery.flot.tooltip": "github:krzysu/flot.tooltip",
"jspdf-autotable": "^3.1.1",
"loaders.css": "0.1.2",
"lodash": "^4.17.11",
"mime": "^2.4.4",
"moment": "^2.24.0",
"ng-multiselect-dropdown": "^0.2.3",
"ng-pick-datetime": "^7.0.0",
"ng-select": "^1.0.2",
"ng-zorro-antd": "^13.3.2",
"ng2-alt-summernote": "^2.0.0",
"ng2-charts": "^2.4.2",
"ng2-ckeditor": "^1.3.3",
"ng2-daterangepicker": "^3.0.1",
"ng2-dnd": "^4.2.0",
"ng2-file-upload": "^1.4.0",
"ng2-pdf-viewer": "^9.0.0",
"ng2-pdfjs-viewer": "^13.2.2",
"ng2-progress-bar": "0.0.8",
"ng2-select": "^2.0.0",
"ng2-table": "^1.3.2",
"ng2-validation": "^4.1.0",
"ng4-click-outside": "^1.0.1",
"ngx-bootstrap": "^8.0.0",
"ngx-chips": "^1.9.8",
"ngx-materialize": "^0.0.1",
"ngx-modialog": "^5.0.1",
"ngx-progress-bar": "^0.0.10",
"node-sass": "^7.0.1",
"npm-check-updates": "^14.1.1",
"pdfmake": "^0.2.5",
"popper": "^1.0.1",
"popsicle-proxy-agent": "^3.0.0",
"rxjs": "7.5.5",
"rxjs-compat": "^6.6.7",
"rxjs-observable": "^0.0.7",
"screenfull": "^3.3.3",
"simple-line-icons": "^2.4.1",
"summernote": "^0.8.11",
"sweetalert": "^1.1.3",
"tslib": "^2.4.0",
"typings": "^2.1.1",
"web-animations-js": "^2.3.1",
"zone.js": "~0.11.6"
},
"devDependencies": {
"#angular-devkit/build-angular": "^14.0.5",
"#angular/cli": "^14.0.5",
"#angular/compiler-cli": "~14.0.5",
"#angular/language-service": "~14.0.5",
"#angular/localize": "^14.0.5",
"#types/googlemaps": "^3.30.20",
"#types/jasmine": "~2.8.8",
"#types/jasminewd2": "~2.0.3",
"#types/jest": "^28.1.4",
"#types/jquery": "^3.5.14",
"#types/lodash": "^4.14.108",
"#types/mocha": "^9.1.1",
"#types/node": "^8.10.48",
"codelyzer": "~4.5.0",
"core-js": "^3.23.3",
"husky": "^8.0.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"jspdf": "^1.5.3",
"karma": "^6.4.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"napa": "^3.0.0",
"protractor": "~7.0.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~4.7.4"
}
}
This is my angular.json file:
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"wsi-portal": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {
"#schematics/angular:component": {
"style": "scss"
}
},
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/wsi-portal",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss",
"node_modules/font-awesome/css/font-awesome.css",
"node_modules/loaders.css/loaders.css",
"node_modules/codemirror/lib/codemirror.css",
"node_modules/summernote/dist/summernote.css",
"node_modules/sweetalert/dist/sweetalert.css",
"node_modules/simple-line-icons/css/simple-line-icons.css",
"node_modules/#angular/material/prebuilt-themes/deeppurple-amber.css",
"node_modules/#fullcalendar/common/main.css",
"node_modules/#fullcalendar/daygrid/main.css",
"node_modules/#fullcalendar/timegrid/main.css",
"node_modules/#fullcalendar/list/main.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.js",
"node_modules/jquery/dist/jquery.slim.min.js",
"node_modules/bootstrap/dist/js/bootstrap.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"node_modules/flot/jquery.flot.js",
"node_modules/jquery.flot.tooltip/js/jquery.flot.tooltip.js",
"node_modules/flot/jquery.flot.resize.js",
"node_modules/flot/jquery.flot.pie.js",
"node_modules/flot/jquery.flot.time.js",
"node_modules/flot/jquery.flot.categories.js",
"node_modules/jquery.flot.spline/jquery.flot.spline.js",
"node_modules/jquery-sparkline/jquery.sparkline.js",
"node_modules/easy-pie-chart/dist/easypiechart.js",
"node_modules/chart.js/dist/Chart.bundle.js",
"node_modules/bootstrap/js/modal.js",
"node_modules/bootstrap/js/dropdown.js",
"node_modules/bootstrap/js/tooltip.js",
"node_modules/summernote/dist/summernote.js",
"node_modules/sweetalert/dist/sweetalert.min.js",
"node_modules/jquery-slimscroll/jquery.slimscroll.js"
]
//,"es5BrowserSupport": true
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
//"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "30mb",
"maximumError": "30mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "wsi-portal:build"
},
"configurations": {
"production": {
"browserTarget": "wsi-portal:build:production"
}
}
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "wsi-portal:build"
}
},
"test": {
"builder": "#angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
"src/styles.scss"
],
"scripts": [],
"assets": [
"src/favicon.ico",
"src/assets"
]
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"wsi-portal-e2e": {
"root": "e2e/",
"projectType": "application",
"prefix": "",
"architect": {
"e2e": {
"builder": "#angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "wsi-portal:serve"
},
"configurations": {
"production": {
"devServerTarget": "wsi-portal:serve:production"
}
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "wsi-portal"
}
Any help would be appreciated!
Most likely you imported theme-f.scss somewhere else in another component, for example. I had the same issue and my file was imported in component.ts
I have resolved this error of Loaders by adding my "/src/app/shared/styles/themes/theme-f.scss" file in angular.json file
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"styles": [
"src/app/shared/styles/themes/theme-f.scss"
]}}

ERROR: task `public` not found in turbo `pipeline` in "turbo.json"

I tried to build my Next.js Commerce with Swell storefront integration. It uses turbo and the result of build is
ERROR: task public not found in turbo pipeline in "turbo.json". Are you sure you added it?
I looked at configuration options of turbo documentation, but I don't have any idea where to put public in turbo.json. I tweaked around with it for a while, but no chance to fix it myself.
/turbo.json:
{
"baseBranch": "origin/main",
"pipeline": {
"build": {
"dependsOn": ["^build"],
"outputs": ["dist/**"]
},
"next-commerce#build": {
"dependsOn": [
"^build",
"$COMMERCE_PROVIDER",
"$BIGCOMMERCE_STOREFRONT_API_URL",
"$NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN",
"$NEXT_PUBLIC_SWELL_STORE_ID"
],
"outputs": [".next/**"]
},
"test": {
"dependsOn": ["^build"],
"outputs": []
},
"lint": {
"outputs": []
},
"prettier-fix": {
"outputs": []
},
"dev": {
"cache": false
},
"start": {
"cache": false
},
"types": {
"outputs": ["dist/**/*.d.ts"]
}
}
}
/package.json
{
"name": "commerce",
"license": "MIT",
"private": true,
"workspaces": [
"site",
"packages/*"
],
"scripts": {
"build": "turbo run build --filter=next-commerce..." ,
"dev": "turbo run dev",
"start": "turbo run start",
"types": "turbo run types",
"prettier-fix": "prettier --write ."
},
"devDependencies": {
"husky": "^7.0.4",
"prettier": "^2.5.1",
"turbo": "^1.2.16"
},
"husky": {
"hooks": {
"pre-commit": "turbo run lint"
}
},
"packageManager": "yarn#1.22.17"
}
/site/package.json
{
"name": "next-commerce",
"version": "0.0.1",
"license": "MIT",
"scripts": {
"dev": "next dev",
"build": "next build public",
"start": "next start",
"analyze": "BUNDLE_ANALYZE=both next build",
"lint": "next lint",
"prettier-fix": "prettier --write .",
"find:unused": "npx next-unused"
},
"sideEffects": false,
"dependencies": {
"#radix-ui/react-dropdown-menu": "^0.1.6",
"#react-spring/web": "^9.4.1",
"#vercel/commerce": "^0.0.1",
"#vercel/commerce-bigcommerce": "^0.0.1",
"#vercel/commerce-commercejs": "^0.0.1",
"#vercel/commerce-kibocommerce": "^0.0.1",
"#vercel/commerce-local": "^0.0.1",
"#vercel/commerce-ordercloud": "^0.0.1",
"#vercel/commerce-saleor": "^0.0.1",
"#vercel/commerce-shopify": "^0.0.1",
"#vercel/commerce-spree": "^0.0.1",
"#vercel/commerce-swell": "^0.0.1",
"#vercel/commerce-vendure": "^0.0.1",
"autoprefixer": "^10.4.2",
"body-scroll-lock": "^4.0.0-beta.0",
"clsx": "^1.1.1",
"email-validator": "^2.0.4",
"js-cookie": "^3.0.1",
"keen-slider": "^6.6.3",
"lodash.random": "^3.2.0",
"lodash.throttle": "^4.1.1",
"next": "^12.0.8",
"next-themes": "^0.0.15",
"postcss": "^8.3.5",
"postcss-nesting": "^8.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-fast-marquee": "^1.3.1",
"react-merge-refs": "^1.1.0",
"react-use-measure": "^2.1.1",
"tabbable": "^5.2.1",
"tailwindcss": "^3.0.13"
},
"devDependencies": {
"#next/bundle-analyzer": "^12.0.8",
"#types/body-scroll-lock": "^3.1.0",
"#types/js-cookie": "^3.0.1",
"#types/lodash.random": "^3.2.6",
"#types/lodash.throttle": "^4.1.6",
"#types/node": "^17.0.8",
"#types/react": "^17.0.38",
"eslint": "^8.6.0",
"eslint-config-next": "^12.0.8",
"eslint-config-prettier": "^8.3.0",
"lint-staged": "^12.1.7",
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-preset-env": "^7.2.3",
"prettier": "^2.5.1",
"typescript": "4.3.4"
},
"lint-staged": {
"**/*.{js,jsx,ts,tsx}": [
"eslint",
"prettier --write",
"git add"
],
"**/*.{md,mdx,json}": [
"prettier --write",
"git add"
]
},
"next-unused": {
"alias": {
"#lib/*": [
"lib/*"
],
"#assets/*": [
"assets/*"
],
"#config/*": [
"config/*"
],
"#components/*": [
"components/*"
],
"#utils/*": [
"utils/*"
]
},
"debug": true,
"include": [
"components",
"lib",
"pages"
],
"exclude": [],
"entrypoints": [
"pages"
]
}
}

Tailwind 3 width calc issues with `theme(width.1/3)`

I'm trying to use the following code:
#apply w-[calc(theme(width.1/3)_-_1rem)] which according to the docs, should work. But every time I try and compile the code I get the following error:
Syntax Error: SyntaxError
<css input> 'width.1 / 3' does not exist in your theme config. 'width' has the following valid keys: '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '14', '16', '20', '24', '28', '32', '36', '40', '44', '48', '52', '56', '60', '64', '72', '80', '96', 'auto', 'px', '0.5', '1.5', '2.5', '3.5', '1/2', '1/3', '2/3', '1/4', '2/4', '3/4', '1/5', '2/5', '3/5', '4/5', '1/6', '2/6', '3/6', '4/6', '5/6', '1/12', '2/12', '3/12', '4/12', '5/12', '6/12', '7/12', '8/12', '9/12', '10/12', '11/12', 'full', 'screen', 'min', 'max', 'fit'
What I'm confused over is that I am using the 1/3 key as the error states, but it seems to be parsed as 1 / 3 which I assume is my problem? I'm using Tailwind 3 with Roots Sage 9.0.10.
Incase it's needed, here's my package.json
{
"name": "sage",
"version": "9.0.10",
"author": "Roots <team#roots.io>",
"homepage": "https://roots.io/sage/",
"private": true,
"repository": {
"type": "git",
"url": "git://github.com/roots/sage.git"
},
"bugs": {
"url": "https://github.com/roots/sage/issues"
},
"licenses": [
{
"type": "MIT",
"url": "http://opensource.org/licenses/MIT"
}
],
"browserslist": [
"last 2 versions",
"android 4",
"opera 12"
],
"scripts": {
"build": "webpack --progress --config resources/assets/build/webpack.config.js",
"build:production": "webpack --env.production --progress --config resources/assets/build/webpack.config.js",
"build:profile": "webpack --progress --profile --json --config resources/assets/build/webpack.config.js",
"start": "webpack --hide-modules --watch --config resources/assets/build/webpack.config.js",
"rmdist": "rimraf dist",
"lint": "npm run -s lint:scripts && npm run -s lint:styles",
"lint:scripts": "eslint resources/assets/scripts resources/assets/build",
"lint:styles": "stylelint \"resources/assets/styles/**/*.{css,sass,scss,sss,less}\"",
"test": "npm run -s lint"
},
"engines": {
"node": ">= 8.0.0"
},
"devDependencies": {
"autoprefixer": "^10.4.0",
"browser-sync": "^2.26.13",
"browsersync-webpack-plugin": "^0.6.0",
"bs-html-injector": "~3.0",
"buble-loader": "^0.4.1",
"cache-loader": "~1.2.5",
"clean-webpack-plugin": "^0.1.18",
"copy-globs-webpack-plugin": "^0.2.0",
"css-loader": "^0.28.11",
"cssnano": "^4.0.5",
"eslint": "~4.19.1",
"eslint-loader": "^4.0.2",
"eslint-plugin-import": "^2.14.0",
"extract-text-webpack-plugin": "~3.0.2",
"file-loader": "^1.1.6",
"friendly-errors-webpack-plugin": "^1.6.1",
"imagemin-mozjpeg": "^9.0.0",
"imagemin-webpack-plugin": "^2.4.2",
"import-glob": "~1.5",
"node-sass": "^5.0.0",
"postcss": "^8.4.5",
"postcss-loader": "^4.0.4",
"postcss-safe-parser": "^5.0.2",
"resolve-url-loader": "~2.3.1",
"rimraf": "^3.0.2",
"sass-loader": "~6.0",
"style-loader": "^0.23.1",
"stylelint": "^13.7.2",
"stylelint-config-standard": "^20.0.0",
"stylelint-webpack-plugin": "^0.10.5",
"tailwindcss": "^3.0.7",
"uglifyjs-webpack-plugin": "^1.3.0",
"url-loader": "^0.6.2",
"webpack": "~3.10.0",
"webpack-assets-manifest": "^1.0.0",
"webpack-dev-middleware": "~2.0.4",
"webpack-hot-middleware": "^2.22.3",
"webpack-merge": "~4.1.4",
"yargs": "^16.1.0"
},
"dependencies": {
"#fancyapps/ui": "^4.0.0-beta.4",
"#fortawesome/fontawesome-free": "^5.15.4",
"aos": "^2.3.4",
"flickity": "^2.3.0",
"flickity-imagesloaded": "^2.0.0",
"jquery": "^3.3.1",
"lodash": "^4.17.21"
},
"stylelint": {
"rules": {}
}
}
It seems Tailwind cannot take a value from config file on the fly (within square brackets in a JIT mode). I see the option to register custom width class within configuration file like
// tailwind.config.js
module.exports = {
theme: {
extend: {
width: {
'custom': "calc( theme('width[1/3]') - 1rem)", // it is important to pass it as a string
}
},
},
}
and use it like
.selector {
#apply w-custom;
}
DEMO

object Object is not a PostCSS plugin | PostCSS Autoprefixer

I am trying to use Grunt PostCSS Autoprefixer but it keeps saying that it is not a PostCSS plugin:
package.json
{
"name": "test",
"version": "0.2.0",
"description": "test",
"keywords": [
""
],
"author": "",
"license": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"dependencies": {
"cssmin": "^0.4.3",
"cssnano": "^5.0.6",
"grunt": "^1.4.1",
"grunt-babel": "^8.0.0",
"grunt-contrib-cssmin": "^4.0.0",
"grunt-contrib-uglify": "^5.0.1",
"grunt-contrib-watch": "^1.1.0"
},
"devDependencies": {
"#babel/core": "^7.14.5",
"#babel/preset-env": "^7.14.5",
"autoprefixer": "^10.2.6",
"grunt-postcss": "^0.9.0",
"grunt-postcss-import": "0.0.1",
"grunt-prettify": "^0.4.0",
"postcss": "^8.3.2"
}
}
Gruntfile.js
postcss: {
options: {
map: {
inline: false,
annotation: 'dist/css/maps/'
},
processors: [
// require('pixrem')(),
require('autoprefixer')(),
//require('cssnano')()
]
},
dist: {
src: 'dist/css/bundle.css'
}
},
I made sure to first remove the grunt-autoprefixer and install autoprefixer which should be a postcss plugin.
It turns out it was just a version compatibility issue. I simply changed:
"autoprefixer": "^10.2.6",
with:
"autoprefixer": "^9.7.4",

Using Type Script w/ ASP.Net Core build errors from .xproj file

I'm working on a new ASP.Net Core project, and I've followed a blog post on setting it up with Angular 2 and Type Script. As soon as I add a Type Script file to my project, I'm given the following build errors from my xproj file.
Is there something I'm doing wrong? This is my project.json, package.json and systemjs.config.js along with the sole Type Script file in the project.
project.json
{
"title": "Manage Care Web",
"userSecretsId": "ManageCare-Apps-Web-c23d27a4-eb88-4b18-9b77-2a93f3b15119",
"dependencies": {
"Microsoft.AspNetCore.Razor.Tools": {
"version": "1.0.0-preview2-final",
"type": "build"
},
"Microsoft.Extensions.Configuration": "1.1.0",
"Microsoft.Extensions.Configuration.EnvironmentVariables": "1.1.0",
"Microsoft.Extensions.Configuration.Json": "1.1.0",
"Microsoft.Extensions.Configuration.UserSecrets": "1.1.0",
"Microsoft.Extensions.Logging": "1.1.0",
"Microsoft.Extensions.Logging.Console": "1.1.0",
"Microsoft.Extensions.Logging.Debug": "1.1.0",
"Microsoft.Extensions.Options.ConfigurationExtensions": "1.1.0",
"Microsoft.VisualStudio.Web.BrowserLink.Loader": "14.1.0",
"BundlerMinifier.Core": "2.2.306",
"Microsoft.ApplicationInsights.AspNetCore": "1.0.2",
"Microsoft.AspNetCore.Diagnostics": "1.1.0",
"Microsoft.AspNetCore.Identity": "1.1.0",
"Microsoft.AspNetCore.Mvc": "1.1.0",
"Microsoft.AspNetCore.Server.IISIntegration": "1.1.0",
"Microsoft.AspNetCore.StaticFiles": "1.1.0",
"Microsoft.NETCore.App": "1.1.0",
"Microsoft.AspNetCore.Server.Kestrel": "1.1.0",
"AspNet.Security.OAuth.Validation": "1.0.0-alpha2-final",
"OpenIddict": "1.0.0-*",
"OpenIddict.EntityFrameworkCore": "1.0.0-*",
"OpenIddict.Mvc": "1.0.0-*",
"Security.AspIdentity": "1.0.0-*",
"Microsoft.AspNetCore.Authentication.JwtBearer": "1.0.0",
"Security.Jwt": "1.0.0-*"
},
"tools": {
"Microsoft.AspNetCore.Razor.Tools": "1.0.0-preview2-final",
"Microsoft.AspNetCore.Server.IISIntegration.Tools": "1.0.0-preview2-final",
"Microsoft.Extensions.SecretManager.Tools": "1.0.0-preview2-final"
},
"frameworks": {
"netcoreapp1.0": {
"dependencies": {
"DataAccess.Abstraction": {
"target": "project"
},
"DataAccess.SqlServer": {
"target": "project"
},
"Domain.Provider": {
"target": "project"
},
"Domain.Security": {
"target": "project"
},
"Security.Abstractions": {
"target": "project"
},
"Services.Abstractions": {
"target": "project"
},
"Services.Provider": {
"target": "project"
}
},
"imports": [
"dotnet5.6",
"portable-net45+win8"
]
}
},
"buildOptions": {
"emitEntryPoint": true,
"preserveCompilationContext": true
},
"runtimeOptions": {
"configProperties": {
"System.GC.Server": true
}
},
"runtimes": {
"win10-x64": {},
"win7-x64": {}
},
"publishOptions": {
"include": [
"wwwroot",
"Views",
"Areas/**/Views",
"appsettings.json",
"web.config"
]
},
"scripts": {
"prepublish": [ "bower install", "dotnet bundle" ],
"postpublish": [ "dotnet publish-iis --publish-folder %publish:OutputPath% --framework %publish:FullTargetFramework%" ]
}
}
package.json
{
"version": "1.0.0",
"name": "managecare",
"private": true,
"scripts": {
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings"
},
"dependencies": {
"#angular/common": "^2.4.1",
"#angular/compiler": "^2.4.1",
"#angular/core": "^2.4.1",
"#angular/forms": "^2.4.1",
"#angular/http": "^2.4.1",
"#angular/platform-browser": "^2.4.1",
"#angular/platform-browser-dynamic": "^2.4.1",
"#angular/router": "^3.4.1",
"core-js": "^2.4.1",
"jquery": "^3.1.1",
"reflect-metadata": "^0.1.9",
"rxjs": "^5.0.2",
"systemjs": "^0.19.41",
"zone.js": "^0.7.4"
},
"devDependencies": {
"concurrently": "3.0.0",
"gulp": "^3.9.1",
"gulp-cssmin": "0.1.7",
"gulp-uglify": "2.0.0",
"gulp-concat": "2.6.1",
"rimraf": "2.5.4",
"typescript": "2.0.3",
"typings": "1.4.0"
}
}
systemjs.config.js
/**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'libs/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'#angular/core': 'npm:#angular/core/bundles/core.umd.js',
'#angular/common': 'npm:#angular/common/bundles/common.umd.js',
'#angular/compiler': 'npm:#angular/compiler/bundles/compiler.umd.js',
'#angular/platform-browser': 'npm:#angular/platform-browser/bundles/platform-browser.umd.js',
'#angular/platform-browser-dynamic': 'npm:#angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'#angular/http': 'npm:#angular/http/bundles/http.umd.js',
'#angular/router': 'npm:#angular/router/bundles/router.umd.js',
'#angular/forms': 'npm:#angular/forms/bundles/forms.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './ClientApp.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
}
}
});
})(this);
typings.config
{
"globalDependencies": {
"core-js": "registry:dt/core-js#0.0.0+20160725163759",
"jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
"node": "registry:dt/node#6.0.0+20160909174046"
}
}
tsconfig.json
{
"compileOnSave": true,
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules"
]
}
ClientApp.ts
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
// import { AppModule } from './App/app.module';
const platform = platformBrowserDynamic();
// platform.bootstrapModule(AppModule);
What am I doing wrong with this setup? I've never used Type Script before, but my impression was that this just worked out of the box in Visual Studio. Is there more that I have to do than what was described in the blog post I linked to?
update
I installed the typings npm package as recommended by an anonymous user, but when I run typings install dt~core-js --global --save I get the following exception.
C:\Users\Sully\AppData\Roaming\npm\node_modules\typings\node_modules\typings-core\node_modules\strip-bom\index.js:2
module.exports = x => {
^^
SyntaxError: Unexpected token =>
at exports.runInThisContext (vm.js:73:16)
at Module._compile (module.js:443:25)
at Object.Module._extensions..js (module.js:478:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at Object. >
(C:\Users\Sully\AppData\Roaming\npm\node_modules\typings\node_modules\typings-core\dist\utils\fs.js:5:16)
at Module._compile (module.js:460:26)
at Object.Module._extensions..js (module.js:478:10)
Please install nuget package : angularjs.TypeScript.DefinitelyTyped
https://www.nuget.org/packages/angularjs.TypeScript.DefinitelyTyped
Add the below in 'typings.json' file, it is working fine for me:
{
"globalDependencies": {
"core-js": "registry:dt/core-js#0.0.0+20160725163759",
"node": "registry:dt/node#6.0.0+20160831021119"
}
}
Below is my 'tsconfig.json' file:
{
"compilerOptions": {
"noImplicitAny": true,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": true,
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"skipLibCheck": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [ "es2015", "dom" ],
"types": ["node","js-base64"]
},
"exclude": [
"node_modules",
"wwwroot"
],
"compileOnSave": false
}
Also try to run the below if not done already:
typings install dt~core-js --global --save

Resources