Develop Reference

My app was working fine, until i installed tailwindcss, My Metro FAILD :(

When I run:android, the app launch on my device but the metro server faild
it gives me this error
I've installed the package from here: https://www.nativewind.dev/
My Package.JSON:
{
"name": "react-native-starter",
"version": "2.1.0",
"private": false,
"resolutions": {
"deprecated-react-native-listview": "0.0.6"
},
"scripts": {
"start": "react-native start",
"test": "jest",
"test:update": "jest -u",
"test:coverage": "jest --coverage",
"run:ios": "react-native run-ios",
"run:android": "react-native run-android",
"lint": "./node_modules/eslint/bin/eslint.js src",
"lint:fix": "./node_modules/eslint/bin/eslint.js src --fix",
"flow": "./node_modules/flow-bin/cli.js",
"e2e:build": "detox build --configuration ios.sim.debug",
"e2e:test": "detox test --configuration ios.sim.debug"
},
"dependencies": {
"#react-native-community/cli": "^4.10.1",
"#react-native-community/masked-view": "^0.1.9",
"#react-native-community/toolbar-android": "^0.1.0-rc.2",
"#react-navigation/bottom-tabs": "^5.2.6",
"#react-navigation/drawer": "^5.4.1",
"#react-navigation/native": "^5.1.5",
"#react-navigation/stack": "^5.2.10",
"global": "^4.4.0",
"i18n-js": "^3.2.1",
"jetifier": "^1.6.5",
"lodash": "^4.17.13",
"moment": "^2.24.0",
"nativewind": "^2.0.11",
"react": "16.9.0",
"react-native": "0.63.1",
"react-native-calendars": "1.265.0",
"react-native-gesture-handler": "^1.5.0",
"react-native-gifted-chat": "^0.11.3",
"react-native-lightbox": "^0.8.0",
"react-native-linear-gradient": "^2.5.6",
"react-native-localize": "^1.3.1",
"react-native-modal": "^9.0.0",
"react-native-modal-datetime-picker": "^6.0.0",
"react-native-modal-dropdown": "0.7.0",
"react-native-paper": "^3.1.1",
"react-native-reanimated": "^1.8.0",
"react-native-safe-area-context": "^0.7.3",
"react-native-screens": "^2.5.0",
"react-native-ui-lib": "^3.39.0",
"react-native-vector-icons": "^6.6.0",
"react-redux": "^6.0.1",
"recompose": "^0.30.0",
"redux": "^4.0.1",
"redux-logger": "^3.0.6",
"redux-persist": "^5.10.0",
"redux-promise": "^0.6.0",
"redux-thunk": "^2.3.0",
"victory-native": "^31.0.0"
},
"devDependencies": {
"#babel/core": "^7.5.0",
"#babel/preset-flow": "^7.0.0",
"#babel/runtime": "^7.5.0",
"#react-native-community/eslint-config": "^0.0.3",
"babel-eslint": "^10.0.1",
"babel-jest": "^24.1.0",
"danger": "^7.0.2",
"enzyme": "^3.7.0",
"enzyme-adapter-react-16": "^1.7.0",
"eslint": "^5.9.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-config-prettier": "^3.6.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.1.2",
"eslint-plugin-react": "^7.11.1",
"flow-bin": "^0.105.0",
"jest": "^24.1.0",
"jsdom": "13.0.0",
"jsdom-global": "3.0.2",
"metro-react-native-babel-preset": "^0.51.1",
"plop": "^2.2.0",
"prettier": "^1.16.1",
"react-addons-test-utils": "^15.6.2",
"react-dom": "^16.6.3",
"react-test-renderer": "16.8.1",
"sinon": "^7.1.1",
"tailwindcss": "^3.2.2"
},
"jest": {
"preset": "react-native",
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
},
"collectCoverage": true,
"collectCoverageFrom": [
"src/**/*.{js,jsx}",
"!**/node_modules/**",
"!android/**",
"!ios/**",
"!assets/**"
],
"coverageDirectory": "jest_coverage",
"setupFiles": [
"./jest-setup.js"
],
"testPathIgnorePatterns": [
"/node_modules/",
"/e2e/"
]
},
"rnpm": {
"assets": [
"./assets/fonts/"
]
},
"detox": {
"configurations": {
"ios.sim.debug": {
"binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/ReactNativeStarter.app",
"build": "xcodebuild -UseModernBuildSystem=NO -project ios/ReactNativeStarter.xcodeproj -scheme ReactNativeStarter -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build",
"type": "ios.simulator",
"name": "iPhone XS"
},
"ios.sim.release": {
"binaryPath": "ios/build/Build/Products/Release-iphonesimulator/ReactNativeStarter.app",
"build": "xcodebuild -UseModernBuildSystem=NO -project ios/ReactNativeStarter.xcodeproj -scheme ReactNativeStarter -configuration Release -sdk iphonesimulator -derivedDataPath ios/build",
"type": "ios.simulator",
"name": "iPhone 7"
}
},
"test-runner": "jest"
}
}
I deleted node_modules folder it didn't work
And my config for that package was correct as the official doc
Anyone has this problem before because I've been searching many hours .

How to tell Babel to target ES2021?

I have the following babel.config.js (not .rc) file:
module.exports = function (api) {
api.cache(true);
return {
"presets": [
"#babel/preset-react",
[
"#babel/preset-env",
{
"useBuiltIns": "entry",
"corejs": "3.8",
targets: {
chrome: 97 // January 2022
},
"modules": false
}
]
],
"plugins": [
["#babel/plugin-transform-react-jsx", {
"throwIfNamespace": false, // defaults to true
"runtime": "automatic" // defaults to classic
}],
"#babel/plugin-proposal-class-properties",
"#babel/plugin-transform-object-assign",
"#babel/plugin-proposal-object-rest-spread",
["module:fast-async", { "spec": true }]
]
}
I find that even though I have targeted a modern browser (Chrome v97, released Jan 2022) Babel still transpiles async/await to promise-based code.
I would like to target ES2021 so Babel doesn't need to transpile async/await.
Additionally I want to use the ?? and ?. operators. In fact, anything ES2021 supports.
I know there are plugins to emulate most things but the browser I'm targeting already supports ES2021. I just don't know how to tell Babel "don't transpile if browser supports it already.".
How would I do this?
Here is my package.json:
{
"name": "scts-expenses",
"version": "0.1.0",
"description": "",
"scripts": {
"build": "webpack --config tools/webpack/config/build",
"ci": "webpack --config tools/webpack/config/integration",
"dev": "webpack --config tools/webpack/config/dev",
"lint": "node_modules/.bin/eslint src -c .eslintrc --ext js",
"start": "npm run dev",
"test": "node_modules/.bin/jest",
"watch-dev": "webpack --config tools/webpack/config/dev --watch"
},
"author": "scott",
"license": "MIT",
"devDependencies": {
"#babel/cli": "^7.18.10",
"#babel/core": "^7.12.10",
"#babel/node": "^7.18.10",
"#babel/plugin-proposal-class-properties": "^7.18.6",
"#babel/plugin-proposal-object-rest-spread": "^7.12.1",
"#babel/plugin-syntax-dynamic-import": "^7.8.3",
"#babel/plugin-transform-object-assign": "^7.18.6",
"#babel/plugin-transform-react-jsx": "^7.18.10",
"#babel/preset-env": "^7.12.11",
"#babel/preset-react": "^7.18.6",
"autoprefixer": "^9.8.6",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "^23.4.2",
"babel-loader": "^8.2.5",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"bluebird": "^3.7.2",
"browser-sync": "^2.26.13",
"browser-sync-webpack-plugin": "^2.3.0",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^5.1.2",
"cors": "^2.8.5",
"cross-env": "^5.2.0",
"css-loader": "^3.6.0",
"eslint": "^6.8.0",
"eslint-plugin-babel": "^5.3.1",
"eslint-plugin-jest": "^23.20.0",
"eval": "^0.1.4",
"fast-async": "^6.3.8",
"filemanager-webpack-plugin": "^2.0.5",
"imagemin-webpack-plugin": "^2.4.2",
"jest": "^24.9.0",
"jest-axe": "^3.5.0",
"mini-css-extract-plugin": "^0.8.2",
"node-sass": "^4.14.1",
"postcss": "^7.0.35",
"postcss-css-variables": "^0.13.0",
"postcss-custom-properties": "^9.2.0",
"postcss-loader": "^3.0.0",
"preact": "^10.10.6",
"preact-render-to-json": "^3.6.6",
"preact-render-to-string": "^5.2.2",
"sass-loader": "^8.0.2",
"style-loader": "^1.3.0",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0",
"webpack-hot-middleware": "^2.25.0",
"webpack-merge": "^4.2.2"
},
"dependencies": {
"#microsoft/applicationinsights-web": "^2.5.10",
"abortcontroller-polyfill": "^1.7.3",
"core-js": "^3.25.0",
"custom-event-polyfill": "^1.0.7",
"element-closest-polyfill": "^1.0.2",
"es6-object-assign": "^1.1.0",
"form-request-submit-polyfill": "^2.0.0",
"picturefill": "^3.0.3",
"promise-polyfill": "^8.2.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"storm-modal": "^1.2.1",
"storm-tabs": "^1.3.3",
"unfetch": "^4.2.0",
"url-search-params-polyfill": "^8.1.0"
}
}

OK, I found out how to use the latest (or, as modern as I need) features.
The key is to use babel/preset-env and deny Internet Explorer as browser targets.
I discovered this by tinkering around at https://babeljs.io/repl/ . When I found the settings that produced modern code (no converting await/async to promises, for example) I copied them to my babel config.
Here's my babel config:
module.exports = function (api) {
api.cache(true);
return {
"presets": [
"#babel/preset-react",
[
"#babel/preset-env",
Object.assign({}, process.env.NODE_ENV === "test"
? {
"loose": true,
"targets": {
"node": 8,
"browsers": [">0.25%","not IE"]
}
}
: {
"useBuiltIns": "entry",
"corejs": "3.8",
"targets": {
"browsers": "defaults, not ie 11, not ie_mob 11"
},
"modules": false
}
)
]
],
"plugins": [
["#babel/plugin-transform-react-jsx", {
"throwIfNamespace": false, // defaults to true
"runtime": "automatic" // defaults to classic
}]
]
}
};
And here's my package.json. Note: I believe some/all of the polyfills referenced (such as es6-object-assign and promise-polyfill) are no longer required. I will remove them in my project - please do not include them in yours unless necessary.
{
"name": "NeverYouMind ;)",
"version": "0.1.0",
"description": "",
"scripts": {
"ci": "webpack --config tools/webpack/config/integration",
"dev": "webpack --config tools/webpack/config/dev",
"lint": "node_modules/.bin/eslint src -c .eslintrc --ext js",
"start": "npm run dev",
"test": "node_modules/.bin/jest",
"watch-dev": "webpack --config tools/webpack/config/dev --watch"
},
"author": "Scotty T",
"license": "MIT",
"devDependencies": {
"#babel/cli": "^7.18.10",
"#babel/core": "^7.12.10",
"#babel/node": "^7.18.10",
"#babel/plugin-proposal-class-properties": "^7.18.6",
"#babel/plugin-proposal-object-rest-spread": "^7.12.1",
"#babel/plugin-syntax-dynamic-import": "^7.8.3",
"#babel/plugin-transform-object-assign": "^7.18.6",
"#babel/plugin-transform-react-jsx": "^7.18.10",
"#babel/preset-env": "^7.12.11",
"#babel/preset-react": "^7.18.6",
"autoprefixer": "^9.8.6",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "^23.4.2",
"babel-loader": "^8.2.5",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"bluebird": "^3.7.2",
"browser-sync": "^2.26.13",
"browser-sync-webpack-plugin": "^2.3.0",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^5.1.2",
"cors": "^2.8.5",
"cross-env": "^5.2.0",
"css-loader": "^3.6.0",
"eslint": "^6.8.0",
"eslint-plugin-babel": "^5.3.1",
"eslint-plugin-jest": "^23.20.0",
"eval": "^0.1.4",
"fast-async": "^6.3.8",
"filemanager-webpack-plugin": "^2.0.5",
"imagemin-webpack-plugin": "^2.4.2",
"jest": "^24.9.0",
"jest-axe": "^3.5.0",
"mini-css-extract-plugin": "^0.8.2",
"node-sass": "^4.14.1",
"postcss": "^7.0.35",
"postcss-css-variables": "^0.13.0",
"postcss-custom-properties": "^9.2.0",
"postcss-loader": "^3.0.0",
"preact": "^10.10.6",
"preact-render-to-json": "^3.6.6",
"preact-render-to-string": "^5.2.2",
"sass-loader": "^8.0.2",
"style-loader": "^1.3.0",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0",
"webpack-hot-middleware": "^2.25.0",
"webpack-merge": "^4.2.2"
},
"dependencies": {
"#microsoft/applicationinsights-web": "^2.5.10",
"abortcontroller-polyfill": "^1.7.3",
"core-js": "^3.25.0",
"custom-event-polyfill": "^1.0.7",
"element-closest-polyfill": "^1.0.2",
"es6-object-assign": "^1.1.0",
"form-request-submit-polyfill": "^2.0.0",
"picturefill": "^3.0.3",
"promise-polyfill": "^8.2.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"unfetch": "^4.2.0",
"url-search-params-polyfill": "^8.1.0"
}
}

Firestore field delete only making the field null instead of removing

I have a script which is being weird! When I run it, it won't delete the field on the document but instead sets the field to null. Never seen this before.
Code:
await firebase
.firestore()
.collection('devices')
.doc('W4ajAVxml4Mffwnqfo23')
.update({
exampleField: firebase.firestore.FieldValue.delete(),
});
This should result in exampleField being removed from document W4ajAVxml4Mffwnqfo23 in the collection devices. Instead, it's value is set to null.
From package.json:
"firebase": "^8.2.1"
Package.json contents:
{
"name": "app",
"version": "1.18.76",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"test:e2e": "vue-cli-service test:e2e",
"lint": "vue-cli-service lint",
"functions": "firebase serve --only functions --port 5001"
},
"dependencies": {
"#capacitor-community/bluetooth-le": "^1.8.2",
"#capacitor-community/fcm": "^2.0.2",
"#capacitor-community/http": "^1.4.1",
"#capacitor-community/keep-awake": "^2.1.1",
"#capacitor/android": "^3.5.1",
"#capacitor/app": "1.1.1",
"#capacitor/camera": "^1.3.1",
"#capacitor/core": "3.5.1",
"#capacitor/device": "^1.1.2",
"#capacitor/filesystem": "^1.1.0",
"#capacitor/haptics": "1.1.4",
"#capacitor/ios": "^3.5.1",
"#capacitor/keyboard": "1.2.2",
"#capacitor/network": "^1.0.7",
"#capacitor/push-notifications": "^1.0.9",
"#capacitor/splash-screen": "^1.2.2",
"#capacitor/status-bar": "1.0.8",
"#capacitor/storage": "^1.2.5",
"#ionic/pwa-elements": "^3.1.1",
"#ionic/vue": "^6.0.0",
"#ionic/vue-router": "^6.0.0",
"#robingenz/capacitor-badge": "^1.2.1",
"#sentry/cli": "^2.0.4",
"#sentry/tracing": "^7.1.1",
"#sentry/vue": "^7.1.1",
"axios": "^0.27.2",
"buffer": "^6.0.3",
"cordova-plugin-ionic": "^5.5.2",
"cordova-plugin-whitelist": "^1.3.5",
"core-js": "^3.6.5",
"dotenv": "^16.0.0",
"firebase": "^8.10.1",
"google-polyline": "^1.0.3",
"mapbox-gl": "^2.8.2",
"marked": "^4.0.15",
"vue": "^3.2.21",
"vue-json-pretty": "^2.1.1",
"vue-router": "^4.0.12"
},
"devDependencies": {
"#capacitor/cli": "3.5.1",
"#sentry/webpack-plugin": "1.18.4",
"#types/jest": "^27.0.2",
"#typescript-eslint/eslint-plugin": "^5.6.0",
"#typescript-eslint/parser": "^5.6.0",
"#vue/cli-plugin-babel": "~5.0.0-rc.1",
"#vue/cli-plugin-e2e-cypress": "~5.0.0-rc.1",
"#vue/cli-plugin-eslint": "~5.0.0-rc.1",
"#vue/cli-plugin-router": "~5.0.0-rc.1",
"#vue/cli-plugin-typescript": "~5.0.0-rc.1",
"#vue/cli-plugin-unit-jest": "~5.0.0-rc.1",
"#vue/cli-service": "~5.0.0-rc.1",
"#vue/eslint-config-typescript": "^9.1.0",
"#vue/test-utils": "^2.0.0-rc.16",
"#vue/vue3-jest": "^27.0.0-alpha.3",
"babel-jest": "^27.3.1",
"cypress": "^8.7.0",
"eslint": "^8.4.1",
"eslint-plugin-vue": "^8.2.0",
"jest": "^27.3.1",
"ts-jest": "^27.0.7",
"typescript": "^4.3.5"
},
"description": "An Ionic project"
}
This is an Ionic 6 project btw. Not sure if that matters but it uses the Firebase JavaScript NPM package.

Vue Cli 3 Production build fails while development build works fine

I have a VueJS app scaffolded with VueCLI 3 that I would like to deploy. The development version run with npm run serve works fine and everything works perfectly. But when running with npm run build and then serve -s dist I'm getting a plethora of errors. Some of those errors are:
Error: "Unable to find required dependency e"
TypeError: "this.userDataStorage is undefined"
TypeError: "this.user is undefined
Unhandled promise rejection TypeError: "t.auth is undefined"
It's like the dist package generated might be missing something, and I have no clue on what's wrong or what I might be missing. Any help to unblock this issue will be much appreciated. Maybe it could be one dependency (like vue-inject, which I use as IoC framework) could be the culprit?
Here are my packages.json and vue.config.js respectively:
{
"name": "myapp",
"description": "",
"keywords": [],
"version": "0.1.0",
"dependencies": {
"bootstrap": "3.3.2",
"d3": "^5.7.0",
"d3-gantt-chart": "^0.2.8",
"d3-layout-timeline": "^1.0.3",
"d3-transition": "^1.1.1",
"d3plus-text": "^0.9.32",
"foundation-sites": "^6.5.0-rc.3",
"jquery": "^3.3.1",
"jquery-ui": "^1.12.1",
"jwt-decode": "^2.2.0",
"lodash": "^4.17.11",
"tinycolor": "latest",
"underscore": "^1.9.1",
"vue": "^2.5.17",
"vue-formio": "^3.0.1",
"vue-inject": "^2.1.1",
"vue-router": "^3.0.1",
"vue-slider-component": "^2.8.0",
"vuejs-datepicker": "^1.5.3",
"vuex": "^3.1.0",
"what-input": "^5.1.2"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.3.0",
"#vue/cli-plugin-e2e-nightwatch": "^3.3.0",
"#vue/cli-plugin-eslint": "^3.3.0",
"#vue/cli-plugin-unit-jest": "^3.3.0",
"#vue/cli-service": "^3.3.1",
"#vue/eslint-config-prettier": "^4.0.1",
"#vue/test-utils": "^1.0.0-beta.28",
"ajv": "^6.5.3",
"axios": "^0.18.0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^23.6.0",
"babel-runtime": "^6.26.0",
"bootstrap-sass": "^3.3.7",
"css-loader": "^1.0.1",
"eslint": "^5.12.1",
"eslint-config-prettier": "^3.6.0",
"eslint-config-standard": "^12.0.0",
"eslint-friendly-formatter": "^4.0.1",
"eslint-loader": "^2.1.1",
"eslint-plugin-html": "^5.0.0",
"eslint-plugin-import": "^2.15.0",
"eslint-plugin-node": "^8.0.1",
"eslint-plugin-prettier": "^3.0.1",
"eslint-plugin-promise": "^4.0.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^5.1.0",
"husky": "^1.3.1",
"lint-staged": "^8.1.0",
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
"script-loader": "^0.7.2",
"stylelint": "^9.10.1",
"stylelint-config-sass-guidelines": "^5.3.0",
"stylelint-config-standard": "^18.2.0",
"vue-drag-drop": "^1.1.4",
"vue-hot-reload-api": "^2.3.0",
"vue-template-compiler": "^2.5.17",
"vue2-dropzone": "^3.5.2"
},
"author": "devops#myapp.io",
"contributors": [],
"license": "Unlicense",
"readmeFilename": "Readme.md",
"repository": {
"type": "git",
"url": ""
},
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:e2e": "vue-cli-service test:e2e",
"test:unit": "vue-cli-service test:unit"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.js": [
"vue-cli-service lint",
"git add"
],
"*.vue": [
"vue-cli-service lint",
"git add"
],
"*.css": [
"stylelint --fix",
"git add"
],
"*.scss": [
"stylelint --syntax=scss",
"git add"
]
}
}
var webpack = require("webpack");
var path = require("path");
module.exports = {
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
jquery: "jquery"
})
],
resolve: {
extensions: [".js", ".vue", ".json"],
alias: {
jquery: "jquery/src/jquery.js",
"jquery-ui": "jquery-ui",
d3: "d3",
modules: path.join(__dirname, "node_modules")
}
}
}
};

Vue-cli-3: Add babel transpile and minify/obfuscate

I am running a project created with vue-cli-3 which uses webpack4. I am new to all this and cannot for the life of me figure out how to have my code transpiled to ES5 code and have it minified/obfuscated. There seems to be absolutely zero documentation on this subject... Can someone help me out?? I want to transpile for IE11 and newer browsers.
package.json
{
"name": "dashboard",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:e2e": "vue-cli-service test:e2e",
"test:unit": "vue-cli-service test:unit"
},
"dependencies": {
"papaparse": "^4.6.2",
"vue": "^2.5.17",
"vue-router": "^3.0.1",
"vuetify": "^1.3.0",
"vuex": "^3.0.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.1.1",
"#vue/cli-plugin-e2e-nightwatch": "^3.1.1",
"#vue/cli-plugin-eslint": "^3.1.1",
"#vue/cli-plugin-unit-jest": "^3.1.1",
"#vue/cli-service": "^3.1.1",
"#vue/eslint-config-prettier": "^4.0.0",
"#vue/test-utils": "^1.0.0-beta.20",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^23.6.0",
"eslint": "^5.8.0",
"eslint-plugin-vue": "^5.0.0-0",
"node-sass": "^4.9.0",
"sass-loader": "^7.0.1",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.1",
"uglifyjs-webpack-plugin": "^2.0.1",
"vue-cli-plugin-vuetify": "^0.4.5",
"vue-template-compiler": "^2.5.17",
"vuetify-loader": "^1.0.5"
}
}
babel.config.js
module.exports = {
presets: [
'#vue/app'
]
}
vue.config.js
module.exports = {
productionSourceMap: false
}

Add this to your package.json
  "browserslist": [
    "IE 11"
  ],