how do I use
OnceExit: result.messages = []
Or
var postcss = require('postcss');
module.export = postcss.plugin('postcss-warn-cleaner', function () {
return function (css, result) {
result.messages = [];
};
});
In my current postcss.config.js :
module.exports = {
plugins: {
OnceExit: result.messages = [],
autoprefixer: { grid: true },
"postcss-import": {},
"postcss-cssnext": {
warnForDuplicates: false,
map: true,
remove: false,
browsers: ["> 1%", "IE 11"],
extensions: {
"--phone": "(min-width: 544px)",
"--tablet": "(min-width: 768px)",
"--desktop": "(min-width: 992px)",
"--large-desktop": "(min-width: 1200px)"
}
},
"postcss-inherit": {},
"postcss-assets": {},
"postcss-nested": {},
cssnano: {
reduceIdents: false,
zindex: false
},
"postcss-hexrgba": {},
"postcss-reporter": {
clearMessages: true
}
},
sourceMap: true || "inline"
};
After recent migration I have hundreds of these warnings and they push our actuall errors to point it breaks development :( . Authors mentioned one of 2 above solution to supress these warnings, I struglle at right syntax on how to put that into existing config.
Related
I have a requirement where I need to map my libs as an expanded path in the Jest config moduleNameMapper configuration.
Along with that I also need to provide one axois as the name module mapping.
How can I do both in the moduleNameMapper in jest-e2e.js?
Here is my existing jest-e2e.js file:
const { pathsToModuleNameMapper } = require('ts-jest');
const { compilerOptions } = require('../../../tsconfig.json');
module.exports = {
moduleFileExtensions: ["js", "json", "ts"],
verbose: true,
rootDir: '.',
preset: "ts-jest",
testEnvironment: "node",
testRegex: ".e2e-spec.ts$",
transform: {
"^.+\\.(t|j)s$": "ts-jest"
},
moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths, { prefix: '"<rootDir>/../../../' }),
};
My tsconfig.json looks like:
{
"paths": {
"#app/logger": [
"libs/logger/src"
],
}
}
I want to add one more moduleNameMapping which is not there in the tsconfig.json.
Basically, I want to add this mapping as well:
moduleNameMapper: {
'^axios$': require.resolve('axios'),
}
How may I combine both the stuffs into the same moduleNameMapper clause in the jest config file.
This is what I have tried so far:
const { pathsToModuleNameMapper } = require('ts-jest');
const { compilerOptions } = require('../../../tsconfig.json');
const libNameMapping = pathsToModuleNameMapper(compilerOptions.paths, { prefix: '"<rootDir>/../../../' });
module.exports = {
moduleFileExtensions: ["js", "json", "ts"],
verbose: true,
rootDir: '.',
preset: "ts-jest",
testEnvironment: "node",
testRegex: ".e2e-spec.ts$",
transform: {
"^.+\\.(t|j)s$": "ts-jest"
},
moduleNameMapper: {
'^axios$': require.resolve('axios'),
...libNameMapping,
},
};
So basically how can both the axios and the nameMapping can be combined and applied to the moduleNameMapper portion of the configuration. That's the query here.
Now if I want to add it like without any helper, like below, it also does not work:
moduleNameMapper: {
'^axios$': require.resolve('axios'),
'^#app/(.*)$': '<rootDir>/../../../libs/$1/src',
},
The path are not resolved, gives this error:
Configuration error:
Could not locate module #app/common/const mapped as:
C:\Users\<>\clients\<>\<>\<>\<>\nest-services\libs\$1\src.
Please check your configuration for these entries:
{
"moduleNameMapper": {
"/^#app\/(.*)$/": "C:\Users\<>\clients\<>\<>\<>\<>\nest-services\libs\$1\src"
},
"resolver": undefined
}
1 | import { createParamDecorator, ExecutionContext } from '#nestjs/common';
> 2 | import { constants } from '#app/common/const';
I think I have to use the Jest helper method. But how can I do it combining both axois and my libs name mapping, is not getting it.
I want to create a simple web app using the quasar framework. to validate form inputs, I'm planning to use vuelidate and vuelidate-Error-Extractor. so I have installed these packages and created a boot file using quasar CLI "vuelidate-error-extractor". and also and add that filename into the plugin in quasar config
but there is a problem when initializing vuelidate-Error-Extractor. can someone help me to fix this
this is the error which i got when try to config this
this is the boot file
import { boot } from 'quasar/wrappers'
import Vuelidate from 'vuelidate'
import VuelidateErrorExtractor, { templates } from "vuelidate-error-extractor";
const messages = {
required: '{attribute} is required.',
requiredCustom: '{attribute} is required.',
min: "Field {attribute} should be exceeded 5 characters",
onlynumbers: '{attribute} should be numbers.',
maxLength: '{attribute} should be less than {max} characters.',
};
// "async" is optional;
// more info on params: https://v2.quasar.dev/quasar-cli/boot-files
export default boot( ({app,Vue}/* { app, router, ... } */) => {
// something to do
app.use(Vuelidate)
app.use(VuelidateErrorExtractor, {
messages,
attributes: {
name: "Name",
email: "Email",
text: "Text"
}
});
app.component("formWrapper", templates.FormWrapper);
})
quasar config
/*
* This file runs in a Node context (it's NOT transpiled by Babel), so use only
* the ES6 features that are supported by your Node version. https://node.green/
*/
// Configuration for your app
// https://quasar.dev/quasar-cli/quasar-conf-js
const { configure } = require('quasar/wrappers');
module.exports = configure(function (ctx) {
return {
// https://quasar.dev/quasar-cli/supporting-ts
supportTS: false,
// https://quasar.dev/quasar-cli/prefetch-feature
// preFetch: true,
// app boot file (/src/boot)
// --> boot files are part of "main.js"
// https://quasar.dev/quasar-cli/boot-files
boot: [
'i18n',
'axios',
'vuelidate'
],
// https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css
css: [
'app.css'
],
// https://github.com/quasarframework/quasar/tree/dev/extras
extras: [
// 'ionicons-v4',
// 'mdi-v5',
// 'fontawesome-v5',
// 'eva-icons',
// 'themify',
// 'line-awesome',
// 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!
'roboto-font', // optional, you are not bound to it
'material-icons', // optional, you are not bound to it
],
// Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build
build: {
vueRouterMode: 'hash', // available values: 'hash', 'history'
// transpile: false,
// publicPath: '/',
// Add dependencies for transpiling with Babel (Array of string/regex)
// (from node_modules, which are by default not transpiled).
// Applies only if "transpile" is set to true.
// transpileDependencies: [],
// rtl: true, // https://quasar.dev/options/rtl-support
// preloadChunks: true,
// showProgress: false,
// gzip: true,
// analyze: true,
// Options below are automatically set depending on the env, set them if you want to override
// extractCSS: false,
// https://quasar.dev/quasar-cli/handling-webpack
// "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain
chainWebpack (/* chain */) {
//
},
},
// Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-devServer
devServer: {
server: {
type: 'http'
},
port: 8080,
open: true // opens browser window automatically
},
// https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-framework
framework: {
config: {},
// iconSet: 'material-icons', // Quasar icon set
// lang: 'en-US', // Quasar language pack
// For special cases outside of where the auto-import strategy can have an impact
// (like functional components as one of the examples),
// you can manually specify Quasar components/directives to be available everywhere:
//
// components: [],
// directives: [],
// Quasar plugins
plugins: []
},
// animations: 'all', // --- includes all animations
// https://quasar.dev/options/animations
animations: [],
// https://quasar.dev/quasar-cli/developing-ssr/configuring-ssr
ssr: {
pwa: false,
// manualStoreHydration: true,
// manualPostHydrationTrigger: true,
prodPort: 3000, // The default port that the production server should use
// (gets superseded if process.env.PORT is specified at runtime)
maxAge: 1000 * 60 * 60 * 24 * 30,
// Tell browser when a file from the server should expire from cache (in ms)
chainWebpackWebserver (/* chain */) {
//
},
middlewares: [
ctx.prod ? 'compression' : '',
'render' // keep this as last one
]
},
// https://quasar.dev/quasar-cli/developing-pwa/configuring-pwa
pwa: {
workboxPluginMode: 'GenerateSW', // 'GenerateSW' or 'InjectManifest'
workboxOptions: {}, // only for GenerateSW
// for the custom service worker ONLY (/src-pwa/custom-service-worker.[js|ts])
// if using workbox in InjectManifest mode
chainWebpackCustomSW (/* chain */) {
//
},
manifest: {
name: `wedeliver`,
short_name: `wedeliver`,
description: `A Quasar Framework app`,
display: 'standalone',
orientation: 'portrait',
background_color: '#ffffff',
theme_color: '#027be3',
icons: [
{
src: 'icons/icon-128x128.png',
sizes: '128x128',
type: 'image/png'
},
{
src: 'icons/icon-192x192.png',
sizes: '192x192',
type: 'image/png'
},
{
src: 'icons/icon-256x256.png',
sizes: '256x256',
type: 'image/png'
},
{
src: 'icons/icon-384x384.png',
sizes: '384x384',
type: 'image/png'
},
{
src: 'icons/icon-512x512.png',
sizes: '512x512',
type: 'image/png'
}
]
}
},
// Full list of options: https://quasar.dev/quasar-cli/developing-cordova-apps/configuring-cordova
cordova: {
// noIosLegacyBuildFlag: true, // uncomment only if you know what you are doing
},
// Full list of options: https://quasar.dev/quasar-cli/developing-capacitor-apps/configuring-capacitor
capacitor: {
hideSplashscreen: true
},
// Full list of options: https://quasar.dev/quasar-cli/developing-electron-apps/configuring-electron
electron: {
bundler: 'packager', // 'packager' or 'builder'
packager: {
// https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options
// OS X / Mac App Store
// appBundleId: '',
// appCategoryType: '',
// osxSign: '',
// protocol: 'myapp://path',
// Windows only
// win32metadata: { ... }
},
builder: {
// https://www.electron.build/configuration/configuration
appId: 'wedelivershopapp'
},
// "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain
chainWebpackMain (/* chain */) {
// do something with the Electron main process Webpack cfg
// extendWebpackMain also available besides this chainWebpackMain
},
// "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain
chainWebpackPreload (/* chain */) {
// do something with the Electron main process Webpack cfg
// extendWebpackPreload also available besides this chainWebpackPreload
},
}
}
});
package.JSON file
{
"name": "wedelivershopapp",
"version": "0.0.1",
"description": "A Quasar Framework app",
"productName": "wedeliver",
"author": "test",
"private": true,
"scripts": {
"test": "echo \"No test specified\" && exit 0"
},
"dependencies": {
"#quasar/extras": "^1.0.0",
"axios": "^0.21.1",
"core-js": "^3.6.5",
"quasar": "^2.0.0",
"vue-i18n": "^9.0.0",
"vuelidate": "^0.7.7",
"vuelidate-error-extractor": "^2.4.1"
},
"devDependencies": {
"#quasar/app": "^3.0.0"
},
"browserslist": [
"last 10 Chrome versions",
"last 10 Firefox versions",
"last 4 Edge versions",
"last 7 Safari versions",
"last 8 Android versions",
"last 8 ChromeAndroid versions",
"last 8 FirefoxAndroid versions",
"last 10 iOS versions",
"last 5 Opera versions"
],
"engines": {
"node": ">= 12.22.1",
"npm": ">= 6.13.4",
"yarn": ">= 1.21.1"
}
}
I was just getting this same error while trying to get Hello.js working with Quasar. In my case it was happening because I had code that was trying to set a property on app.prototype, but with Quasar boot code you need to set the property on app.config.globalProperties instead. (Here's an example in Quasar's documentation section on Boot files)
So I had to change:
app.prototype.$hello = hello
to:
app.config.globalProperties.$hello = hello
So my guess is that in your case there's some similar line in the Vuelidate code that needs to be changed.
On development the app database works very well but when I generated APK it just not work, I can't use the database.
I found this answare of jbenzshawel:
1º: yarn add metro-minify-terser
2º: Update the metro config to keep class names and file names. Add the following to the metro.config.js transformer:
minifierConfig: {
ecma: 8,
keep_classnames: true,
keep_fnames: true,
module: true,
mangle: {
module: true,
keep_classnames: true,
keep_fnames: true,
},
},
So if you need to create metro.config.js add the following:
const { getDefaultConfig } = require('expo/metro-config');
const config = getDefaultConfig(__dirname);
config.transformer.minifierPath = 'metro-minify-terser';
config.transformer.minifierConfig = {
ecma: 8,
keep_classnames: true,
keep_fnames: true,
module: true,
mangle: {
module: true,
keep_classnames: true,
keep_fnames: true,
},
};
module.exports = config;
In my VUE project, there are several templates which have the same filename but located in different source sub-folders. I'm using webpack 3.12 to build it, and the devtool set to 'cheap-module-eval-source-map'.
After I run webpack-dev-server 2.11.1 to debug it, all template source files are put into the root folder 'webpack://' of the browser's sourcemap, so ONLY one of these files can exist, others are lost, I can't debug them.
Is there a way to make these files co-existing in the sourcemap?
module.exports = {
plugins: [
new VueLoaderPlugin()
],
context: path.resolve(__dirname, '../'),
entry: {
app: ['babel-polyfill', './src/main.js']
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production' ?
config.build.assetsPublicPath : config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'#': resolve('src'),
}
},
devtool: 'cheap-module-eval-source-map',
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
},
// these devServer options should be customized in /config/index.js
devServer: {
clientLogLevel: 'warning',
historyApiFallback: {
rewrites: [{
from: /.*/,
to: path.posix.join(config.dev.assetsPublicPath, 'index.html')
}, ],
},
hot: true,
contentBase: false, // since we use CopyWebpackPlugin.
compress: true,
host: HOST || config.dev.host,
port: PORT || config.dev.port,
open: config.dev.autoOpenBrowser,
overlay: config.dev.errorOverlay ?
{
warnings: false,
errors: true
} :
false,
publicPath: config.dev.assetsPublicPath,
proxy: config.dev.proxyTable,
quiet: true, // necessary for FriendlyErrorsPlugin
watchOptions: {
poll: config.dev.poll,
}
}
}
At last, I changed 'cheap-module-eval-source-map' to 'module-eval-source-map', the relative path of source files are kept.
I've read the official document of devtool, it says "it doesn't have column mappings, it only maps line numbers." if "cheap" mode used, I don't understand why the relative path is discarded.
eval-cheap-source-map - Similar to eval-source-map, each module is executed with eval(). It is "cheap" because it doesn't have column
mappings, it only maps line numbers. It ignores SourceMaps from
Loaders and only display transpiled code similar to the eval devtool.
eval-cheap-module-source-map - Similar to eval-cheap-source-map, however, in this case Source Maps from Loaders are processed for
better results. However Loader Source Maps are simplified to a single
mapping per line.
This worked for me when using vue-cli-service serve: https://github.com/vuejs/vue-cli/issues/2978#issuecomment-577364101
In vue.config.js:
let path = require('path')
module.exports = {
configureWebpack: config => {
if (process.env.NODE_ENV === 'development') {
// See available sourcemaps:
// https://webpack.js.org/configuration/devtool/#devtool
config.devtool = 'eval-source-map'
// console.log(`NOTICE: vue.config.js directive: ${config.devtool}`)
config.output.devtoolModuleFilenameTemplate = info => {
let resPath = path.normalize(info.resourcePath)
let isVue = resPath.match(/\.vue$/)
let isGenerated = info.allLoaders
let generated = `webpack-generated:///${resPath}?${info.hash}`
let vuesource = `vue-source:///${resPath}`
return isVue && isGenerated ? generated : vuesource
}
config.output.devtoolFallbackModuleFilenameTemplate =
'webpack:///[resource-path]?[hash]'
}
},
}
When I try to create an aurelia bundle and one already exists, I get an error basically saying it failed because a file already exists. The problem is that my force:true is set. Any help with this would be greatly appreciated.
var gulp = require('gulp'),
aureliaBundle = require('aurelia-bundler').bundle;
var aureliaBundleConfig = {
"force": true,
"baseUrl": ".",
"configPath": "js/config.js",
"bundles": {
"js/aurelia-bundle.min": {
"includes": [
"[js/**/*.js]",
"Templates/**/*.html!text"
],
"options": {
"inject": true,
"minify": true,
"depCache": false
}
},
"js/vendor-bundle": {
"includes": [
"lib/github/components/jquery#2.2.4",
"lib/github/signalr/bower-signalr#2.2.0",
"lib/npm/aurelia-bootstrapper#1.0.0-rc.1.0.1",
"lib/npm/aurelia-fetch-client#1.0.0-rc.1.0.1",
"lib/npm/aurelia-framework#1.0.0-rc.1.0.2",
"lib/npm/aurelia-router#1.0.0-rc.1.0.1",
"lib/npm/aurelia-animator-css#1.0.0-rc.1.0.0",
"lib/npm/aurelia-http-client#1.0.0-rc.1.0.0",
"lib/npm/aurelia-kendoui-bridge#0.11.8",
"lib/npm/aurelia-event-aggregator#1.0.0-rc.1.0.0",
"lib/npm/aurelia-templating-binding#1.0.0-rc.1.0.1",
"lib/npm/aurelia-templating-resources#1.0.0-rc.1.0.1",
"lib/npm/aurelia-templating-router#1.0.0-rc.1.0.1",
"lib/npm/aurelia-templating#1.0.0-rc.1.0.1",
"lib/npm/aurelia-loader-default#1.0.0-rc.1.0.0",
"lib/npm/aurelia-history-browser#1.0.0-rc.1.0.0",
"lib/npm/aurelia-logging-console#1.0.0-rc.1.0.0"
],
"options": {
"inject": true,
"minify": true,
"depCache": false
}
}
}
};
gulp.task('bundle:aurelia', function () {
return aureliaBundle(aureliaBundleConfig);
});