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

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"
]
}
}

Related

cant use vue-i18n v.9 <i18n > blocks

I'm using nuxt 3 and i18n v.9.
I wanna to use new feature in i18n v.9 that allows you to make a block next to
script and template block and put translates there .
like this :
<template>
{{ $t('hi') }}
</template>
<i18n>
{
"en": {
"hi": "hello world!"
},
"ja": {
"hi": "こんにちは、世界!"
}
}
</i18n>
and this is nuxt.config.ts
import VueI18nVitePlugin from '#intlify/unplugin-vue-i18n/vite'
import path from 'path'
export default defineNuxtConfig({
modules: [
'#pinia/nuxt','#nuxtjs/tailwindcss' ,'#nuxt-hero-icons/outline/nuxt','#nuxt-hero-icons/solid/nuxt'
],
runtimeConfig: {
public: {
captchaKey: 'a',
apiUrl:'z'
}
},
vite: {
plugins: [
VueI18nVitePlugin({
include: [
path.resolve(__dirname, './components/*.*'),
path.resolve(__dirname, './pages/*.*'),
]
})
]
}
})
and this is the package.json
{
"private": true,
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
},
"devDependencies": {
"#intlify/unplugin-vue-i18n": "^0.7.0",
"#intlify/vite-plugin-vue-i18n": "^6.0.3",
"#nuxtjs/tailwindcss": "^5.3.3",
"nuxt": "3.0.0-rc.10",
"sass": "^1.55.0",
"sass-loader": "10.1.1",
"tailwindcss-flip": "^1.0.0",
"vue-i18n": "^9.2.2"
},
"dependencies": {
"#heroicons/vue": "^2.0.11",
"#kyvg/vue3-notification": "^2.4.1",
"#nuxt-hero-icons/outline": "^1.0.1",
"#nuxt-hero-icons/solid": "^1.0.1",
"#pinia/nuxt": "^0.4.2",
"#vueform/multiselect": "^2.5.2",
"axios": "^0.27.2",
"daisyui": "^2.28.0",
"jenesius-vue-modal": "^1.7.2",
"sweetalert2": "^11.4.33",
"vee-validate": "^4.6.7",
"vue-recaptcha-v3": "^2.0.1",
"vue3-loading-overlay": "^0.0.0",
"yup": "^0.32.11"
}
}
The problem is that translates doesn't come. How can I fix this?

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"
]}}

Sytles.css is being copied to dist folder as Styles.js when building with NX

I am in the early stages of migrating our existing angular applications to a mono-repo using nx as the framework to build.
After migrating my first application I am noticing the styles.scss file located within the styles dir is being copied over as .js rather than .css.
I cannot for the life of me figure out why.
angular.json:
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"LSApp": {
"projectType": "application",
"schematics": {},
"root": "apps/LSApp",
"sourceRoot": "apps/LSApp/src",
"prefix": "LSApp",
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/apps/LSApp",
"index": "apps/LSApp/src/index.html",
"main": "apps/LSApp/src/main.ts",
"polyfills": "apps/LSApp/src/polyfills.ts",
"tsConfig": "apps/LSApp/tsconfig.app.json",
"assets": [
"apps/LSApp/src/favicon.ico",
"apps/LSApp/src/assets"
],
"styles": [
"node_modules/#angular/material/prebuilt-themes/deeppurple-amber.css",
"apps/LSApp/src/styles/material-theme.scss",
"apps/LSApp/src/styles/styles.scss",
"apps/LSApp/src/styles/index.scss",
"node_modules/font-awesome/css/font-awesome.min.css",
"node_modules/tachyons/css/tachyons.min.css",
"node_modules/vis/dist/vis.min.css",
"node_modules/tether-shepherd/dist/css/shepherd-theme-arrows.css",
"node_modules/tether-shepherd/dist/css/shepherd-theme-arrows-fix.css",
"node_modules/tether-shepherd/dist/css/shepherd-theme-arrows-plain-buttons.css",
"node_modules/tether-shepherd/dist/css/shepherd-theme-default.css",
"./node_modules/froala-editor/css/froala_editor.pkgd.min.css",
"./node_modules/froala-editor/css/froala_style.min.css"
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "apps/LSApp/src/environments/environment.ts",
"with": "apps/LSApp/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": "10mb",
"maximumError": "10mb"
}
]
}
}
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "LSApp:build",
"port": 3000
},
"configurations": {
"production": {
"browserTarget": "LSApp:build:production"
}
}
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "LSApp:build"
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"apps/LSApp/tsconfig.app.json",
"apps/LSApp/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**",
"!apps/LSApp/**"
]
}
},
"test": {
"builder": "#angular-devkit/build-angular:karma",
"options": {
"main": "apps/LSApp/src/test.ts",
"tsConfig": "apps/LSApp/tsconfig.spec.json",
"karmaConfig": "apps/LSApp/karma.conf.js",
"polyfills": "apps/LSApp/src/polyfills.ts",
"styles": [
"src/styles/styles.scss"
],
"scripts": [],
"assets": [
"src/favicon.ico",
"src/assets"
]
}
}
}
},
"LSApp-e2e": {
"root": "apps/LSApp-e2e/",
"projectType": "application",
"architect": {
"e2e": {
"builder": "#angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "apps/LSApp-e2e/protractor.conf.js",
"devServerTarget": "LSApp:serve",
"port": 3000
},
"configurations": {
"production": {
"devServerTarget": "LSApp:serve:production"
}
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "apps/LSApp-e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"cli": {
"warnings": {
"typescriptMismatch": false,
"versionMismatch": false
},
"defaultCollection": "#nrwl/angular"
},
"defaultProject": "LSApp",
"schematics": {
"#nrwl/angular:application": {
"unitTestRunner": "karma",
"e2eTestRunner": "none"
},
"#nrwl/angular:library": {
"unitTestRunner": "karma"
},
"schematics": {
"#schematics/angular:component": {
"styleext": "scss"
}
},
"#nrwl/schematics:component": {
"styleext": "scss"
}
}
}
package.json
{
"name": "lsapp",
"version": "1.36.0",
"scripts": {
"test": "node --max_old_space_size=8000 ./node_modules/#angular/cli/bin/ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"build:prod": " node --max_old_space_size=8000 ./node_modules/#angular/cli/bin/ng build LSApp --prod",
"clean:dist": "npm run rimraf -- dist",
"rimraf": "rimraf",
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"affected:apps": "nx affected:apps",
"affected:libs": "nx affected:libs",
"affected:build": "nx affected:build",
"affected:e2e": "nx affected:e2e",
"affected:test": "nx affected:test",
"affected:lint": "nx affected:lint",
"affected:dep-graph": "nx affected:dep-graph",
"affected": "nx affected",
"format": "nx format:write",
"format:write": "nx format:write",
"format:check": "nx format:check",
"update": "ng update #nrwl/workspace",
"update:check": "ng update",
"workspace-schematic": "nx workspace-schematic",
"dep-graph": "nx dep-graph",
"help": "nx help"
},
"private": true,
"dependencies": {
"#acl/datepicker": "~2.0.9",
"#acl/grid": "^2.1.9",
"#angular/animations": "^8.2.14",
"#angular/cdk": "^8.0.1",
"#angular/common": "~8.2.14",
"#angular/compiler": "~8.2.14",
"#angular/core": "~8.2.14",
"#angular/forms": "~8.2.14",
"#angular/material": "^8.0.1",
"#angular/platform-browser": "~8.2.14",
"#angular/platform-browser-dynamic": "~8.2.14",
"#angular/router": "~8.2.14",
"#angularclass/hmr": "^1.2.2",
"#hos/ah-df-schematics": "^1.1.2",
"#hos/design-factory": "~7.1.0",
"#hos/hospitality": "^9.8.0",
"#ng-bootstrap/ng-bootstrap": "~5.2.1",
"#ng-select/ng-option-highlight": "~0.0.2",
"#ng-select/ng-select": "~3.0.7",
"#ngrx/effects": "^8.0.1",
"#ngrx/router-store": "^8.0.1",
"#ngrx/store": "^8.0.1",
"#ngrx/store-devtools": "^8.0.1",
"#ngx-translate/core": "^11.0.1",
"#ngx-translate/http-loader": "^4.0.0",
"#types/vis": "^4.21.17",
"angular-2-local-storage": "~2.0.0",
"angular-froala-wysiwyg": "^3.0.4",
"angular-sortablejs": "^2.7.0",
"autoprefixer": "^6.7.7",
"bootstrap": "~4.3.1",
"classlist.js": "^1.1.20150312",
"core-js": "^2.6.9",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"messageformat": "^1.1.1",
"moment": "~2.24.0",
"moment-timezone": "^0.5.25",
"ng2-validation": "^4.2.0",
"ng5-slider": "~1.2.4",
"ramda": "^0.24.1",
"reflect-metadata": "^0.1.13",
"reselect": "^3.0.1",
"rxjs": "~6.4.0",
"sortablejs": "^1.9.0",
"tachyons": "^4.11.1",
"tether-shepherd": "^1.8.1",
"text-mask-addons": "^3.7.2",
"tslib": "^1.9.0",
"url-search-params-polyfill": "^6.0.0",
"vis": "^4.21.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.800.0",
"#angular/cli": "~8.3.19",
"#angular/compiler-cli": "~8.2.14",
"#angular/language-service": "~8.2.14",
"#nrwl/angular": "^8.2.0",
"#nrwl/cli": "^8.2.0",
"#nrwl/workspace": "^8.2.0",
"#types/google-libphonenumber": "^7.4.17",
"#types/hammerjs": "^2.0.35",
"#types/jasmine": "^2.8.16",
"#types/node": "~8.9.4",
"#types/selenium-webdriver": "^2.53.43",
"#types/tapable": "^1.0.2",
"#types/tether-shepherd": "^1.2.28",
"#types/uglify-js": "^3.0.3",
"angular2-template-loader": "^0.6.2",
"codelyzer": "^5.0.0",
"dotenv": "6.2.0",
"find-root": "^1.1.0",
"gh-pages": "^0.12.0",
"jasmine": "^2.99.0",
"jasmine-allure-reporter": "^1.0.2",
"jasmine-core": "^2.99.1",
"jasmine-marbles": "^0.3.0",
"jasmine-spec-reporter": "^4.2.1",
"jasmine-tfs-reporter": "^1.0.2",
"jest": "^24.8.0",
"jest-preset-angular": "^7.1.1",
"jest-zone-patch": "^0.0.7",
"jquery": "^3.4.1",
"karma": "^4.1.0",
"karma-chrome-launcher": "^2.2.0",
"karma-coverage": "^1.1.2",
"karma-coverage-istanbul-reporter": "^2.0.5",
"karma-jasmine": "^1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-mocha-reporter": "^2.2.5",
"karma-remap-coverage": "^0.1.5",
"karma-spec-reporter": "^0.0.32",
"node-sass": "^4.14.1",
"optimize-js-plugin": "^0.0.4",
"parse5": "^3.0.3",
"prettier": "^1.15.3",
"protractor": "^5.4.2",
"request": "^2.86.0",
"rimraf": "^2.6.3",
"source-map": "^0.7.3",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"tslint-config-prettier": "^1.17.0",
"typedoc": "^0.15.0",
"typescript": "~3.4.3",
"wallaby-webpack": "^3.9.15"
}
}
Any help would be greatly appreciated!

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",

Nextjs 10.0 builds without styles

Hello guys can anybody help with Nextjs v10 build ? it builds without styles :|
here is my package.json and next.config.js
I import all styles in _app.js, it also comes in chrome network -> preview without styles
On vercel everything is ok, but when i try to build on my computer, it's without styles :|
**
next.config.js
**
module.exports = {
images: {
domains: ['localhost','assets.vercel.com','via.placeholder.com','mine-front-new.vercel.app'],
},
}
package.json
{
"name": "mine",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "next",
"build": "next build",
"start": "next start",
"prod:build": "SET NODE_ENV=production && next build && next export",
"export": "next build && next export"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"#fortawesome/fontawesome-free": "^5.13.1",
"#material-ui/core": "^4.11.0",
"#material-ui/icons": "^4.9.1",
"#material-ui/lab": "^4.0.0-alpha.57",
"add": "^2.0.6",
"axios": "^0.19.2",
"chart.js": "^2.9.3",
"date-fns": "^2.16.1",
"draft-js": "^0.11.7",
"es6-shim": "^0.35.6",
"js-cookie": "^2.2.1",
"jwt-decode": "^3.0.0",
"moment": "^2.27.0",
"next": "10.0.0",
"react": "17.0.1",
"react-chartjs-2": "^2.9.0",
"react-dom": "17.0.1",
"react-facebook": "^8.1.4",
"react-lottie": "^1.2.3",
"react-transition-group": "^4.4.1",
"yarn": "^1.22.10"
},
"devDependencies": {
"#types/cookie": "^0.4.0",
"clsx": "^1.1.1",
"cookie": "^0.4.1",
"prop-types": "^15.7.2",
"react-date-range": "^1.0.3",
"react-reveal": "^1.2.2",
"react-slick": "^0.26.1",
"react-toastify": "^6.0.8",
"slick-carousel": "^1.8.1",
"sweetalert2": "^9.15.2"
}
}
Make sure u use appropriate css loaders. I faced the same issue and resolved using this,
loaders: ['style-loader', 'css-loader', 'less-loader']
My next.config.js
module.exports = withImages({
target: 'serverless',
webpack: function (config, { webpack }) {
config.module.rules.push({
test: /\.(eot|svg|gif|md)$/,
loaders: ['style-loader', 'css-loader', 'less-loader']
})
return config
},
})

Resources