Vue CLI - No PostCSS config found - javascript

i have a package.json as this:
{
"name": "dashboard",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"apexcharts": "^3.8.4",
"axios": "^0.19.0",
"core-js": "^2.6.5",
"lodash": "^4.17.15",
"moment": "^2.24.0",
"vue": "^2.6.10",
"vue-apexcharts": "^1.5.1",
"vue-numerals": "^3.0.5",
"vue-router": "^3.1.3",
"vue-virtual-scroll-list": "^1.4.4",
"vuetify": "2.1.13",
"vuex": "^3.1.2",
"vuex-map-fields": "^1.3.6",
"vuex-persist": "^2.2.0"
},
"devDependencies": {
"#mdi/font": "^3.8.95",
"#vue/cli-plugin-babel": "^3.9.0",
"#vue/cli-plugin-eslint": "^3.9.0",
"#vue/cli-service": "^3.9.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"sass": "^1.17.4",
"sass-loader": "^7.1.0",
"typeface-roboto": "^0.0.75",
"vue-cli-plugin-vuetify": "^2.0.5",
"vue-template-compiler": "^2.6.10",
"vuetify-loader": "^1.2.2"
}
}
As I did the setup for this project via Vue cli I selected that options as Eslint, Babel and so on are incapsulated in the package.json. I put them in several files now: .eslintrc.js, babel.config.js, and postcss.config.js. Can I do this just like that - creating these files and remove the contents from the package.json?
The contents of the postcss.config.js is this:
module.exports = {
plugins: {
autoprefixer: {},
},
};
When I build this I always get this message:
Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: No PostCSS Config found in: /Users/dev/Sites/dev/src/node_modules/vuetify/src/directives/ripple
at /Users/dev/Sites/dev/src/resources/views/dashboard/node_modules/postcss-load-config/src/index.js:91:15
# /Users/dev/Sites/dev/src/node_modules/vuetify/src/directives/ripple/VRipple.sass 4:14-329 14:3-18:5 15:22-337
Before that I see this message at top:
65% building 852/919 modules 67 active /Users/dev/Sites/dev/src/resources/views/dashboard/node_modules/axios/lib/core/transformData.jsYou did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.
Does this mean that I need to use the sass-loader which is specified in the package.json in the postcss.config.js as well? I am bit puzzled, because on another project I have the same configuration and no other content in the postcss.config.js and I do not get error messages about missing plugins. Thanks!

I advise you to try launching vue ui in the console. After that in the "dependencies" category, you have to try to uninstall packages for CSS-processors and then reinstall it. Probably some of these packages are corrupted.

Related

Module not found: Error: Can't resolve 'core-js/modules/es.error.cause.js'

I am using Vuexy Dashboard in my project, Vuexy comes in with Vue 2, so I am trying to upgrade it to Vue 3, after fixing some errors, I'm stuck on this one, any help is much appreciated.
Thank you.
This is my package.json file :
{
"name": "vuexy-vuejs-react-html-laravel-admin-dashboard-template",
"version": "6.4.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve --skip-plugins #vue/cli-plugin-eslint",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#casl/ability": "4.1.6",
"#casl/vue": "1.1.1",
"#vue/cli-plugin-eslint": "^5.0.4",
"#vue/compat": "^3.1.0-0",
"#vue/composition-api": "^1.6.1",
"#vueuse/core": "4.0.0",
"animate.css": "4.1.1",
"apexcharts": "^3.35.2",
"assert": "^2.0.0",
"axios": "^0.27.2",
"axios-mock-adapter": "1.19.0",
"bootstrap": "4.6.0",
"bootstrap-vue": "2.21.1",
"buffer": "^6.0.3",
"chart.js": "2.9.4",
"core-js": "3.8.1",
"echarts": "4.8.0",
"jsonwebtoken": "8.5.1",
"leaflet": "1.6.0",
"portal-vue": "2.1.7",
"postcss-rtl": "1.7.3",
"prismjs": "^1.28.0",
"stream": "0.0.2",
"swiper": "5.4.5",
"uuid": "8.3.2",
"vue-perfect-scrollbar": "0.2.1",
"vue-prism-component": "1.1.1",
"vue-quill-editor": "3.0.6",
"vue-ripple-directive": "2.0.1",
"vue-router": "3.4.9",
"vue-select": "3.11.2",
"vue-slider-component": "3.2.11",
"vue-sweetalert2": "4.1.1",
"vue-toastification": "1.7.8",
"vue-tour": "1.5.0",
"vue-tree-halower": "1.8.3",
"vue2-leaflet": "2.5.2",
"vuedraggable": "2.24.3",
"vuex": "3.6.0"
},
"devDependencies": {
"#babel/core": "^7.12.16",
"#babel/eslint-parser": "^7.12.16",
"#vue/cli-plugin-babel": "^5.0.4",
"#vue/cli-plugin-router": "^5.0.4",
"#vue/cli-plugin-vuex": "^5.0.4",
"#vue/cli-service": "^5.0.4",
"#vue/compiler-sfc": "^3.1.0-0",
"#vue/eslint-config-airbnb": "^6.0.0",
"#vuepress/plugin-medium-zoom": "^1.7.1",
"eslint": "^7.32.0",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-vue": "^8.0.3",
"eslint-plugin-vuejs-accessibility": "^1.1.1",
"sass": "1.32.*",
"sass-loader": "^10.1.0"
}
}
And these are the errors I'm getting while running npm run serve :
ERROR in ./node_modules/#babel/runtime/helpers/esm/nonIterableSpread.js 1:0-43
Module not found: Error: Can't resolve 'core-js/modules/es.error.cause.js' in 'Desktop\consigliere-vue-laravel\e-commerce\frontend\node_modules\#babel\runtime\helpers\esm'
After searching a lot, what works for me was what I found in this blog post:
https://blog.csdn.net/Missbelover/article/details/123221351
Basically, what you need to do is...
Remove all your node_modules dependencies.
npm rm -rf node_modules
Install core-js first.
npm install --save core-js
Finally install everything else.
npm install
yarn install
After this everything should work as expected, a least for me is working now.
Have a good day!
My issue was having 2 projects that differ because they use yarn and npm. I made the mistake of installing jest globally with yarn so had conflicts with my jest version. I ran yarn remove global jest and it worked.

Can't resolve react-navigation/core

I'm trying to build a React Native app with some navigation, and i got this error whenever i build it, i'm using expo to build the app :
Android Bundling failed 6098ms
While trying to resolve module `#react-navigation/core` from file `/Users/laurent/Documents/Delivery/Tek3/DEV/B-DEV-501-LYN-5-1-redditech-laurent.cazette/node_modules/#react-navigation/native/src/ResourceSavingSceneView.js`, the package `/Users/laurent/Documents/Delivery/Tek3/DEV/B-DEV-501-LYN-5-1-redditech-laurent.cazette/node_modules/#react-navigation/core/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/Users/laurent/Documents/Delivery/Tek3/DEV/B-DEV-501-LYN-5-1-redditech-laurent.cazette/node_modules/#react-navigation/core/lib/module/index.js`. Indeed, none of these files exist:
* /Users/laurent/Documents/Delivery/Tek3/DEV/B-DEV-501-LYN-5-1-redditech-laurent.cazette/node_modules/#react-navigation/core/lib/module/index.js(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
* /Users/laurent/Documents/Delivery/Tek3/DEV/B-DEV-501-LYN-5-1-redditech-laurent.cazette/node_modules/#react-navigation/core/lib/module/index.js/index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
I think I've already installed all dependencies, but here is my package.json in case I forgot anything :
{
"main": "index.js",
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"web": "expo start --web",
"start": "react-native start"
},
"dependencies": {
"#react-native-community/masked-view": "^0.1.11",
"#react-navigation/core": "react-navigation/core",
"#react-navigation/native": "react-navigation/native",
"#react-navigation/stack": "5.9.0",
"expo": "~42.0.1",
"expo-splash-screen": "~0.11.2",
"expo-status-bar": "~1.0.4",
"expo-updates": "~0.8.1",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "0.63.4",
"react-native-gesture-handler": "~1.10.2",
"react-native-paper": "^4.9.2",
"react-native-reanimated": "~2.2.0",
"react-native-safe-area-context": "^3.3.2",
"react-native-screens": "~3.4.0",
"react-native-svg": "^12.1.1",
"react-native-unimodules": "0.14.10",
"react-native-vector-icons": "^8.1.0",
"react-native-web": "^0.17.5",
"react-navigation": "^4.4.4",
"react-navigation-stack": "^2.10.4",
"styled-components": "^5.3.1",
"styled-system": "^5.1.5"
},
"devDependencies": {
"#babel/core": "^7.9.0"
},
"private": true
}
I've already tried to update metro.config.js :
const { getDefaultConfig } = require('expo/metro-config');
module.exports = {
resolver: {
/* resolver options */
sourceExts: ['jsx', 'js', 'ts', 'tsx'],
},
maxWorkers: 2,
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
},
};
module.exports = getDefaultConfig(__dirname);
Do you guys have any idea on what's wrong ?
Why do you have it like this?
"#react-navigation/core": "react-navigation/core",
"#react-navigation/native": "react-navigation/native",
They need to be correct version numbers. Follow the documentation on official website to install the packages:
https://reactnavigation.org/docs/getting-started
https://reactnavigation.org/docs/stack-navigator/
expo install react-native-screens react-native-safe-area-context react-native-gesture-handler
yarn add #react-navigation/native #react-navigation/stack
And remove "#react-navigation/core": "react-navigation/core" from your package.json.
Try this:
Install react-navigation module.
Re-build your project.
Restart the packager by stopping the current
packager and then starting the packager again with react-native
start.
Unable to resolve module 'react-navigation'

"You require appropriate loaders", Using react native and expo. App fails to compile on the web, but runs on android

I'm using react native expo. The app works fine on android, but when run on the web gets a compilation error. It was working fine in before, but I suspect this started after installing some new package.
/ReactNativeFrontend/node_modules/#codler/react-native-keyboard-aware-scroll-view/lib/KeyboardAwareHOC.js 13:12
Module parse failed: Unexpected token (13:12)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| } from 'react-native'
| import { isIphoneX } from 'react-native-iphone-x-helper'
> import type { KeyboardAwareInterface } from './KeyboardAwareInterface'
|
| const _KAM_DEFAULT_TAB_BAR_HEIGHT: number = isIphoneX() ? 83 : 49
My babel config
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
};
};
My package.json
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"#codler/native-base": "^2.14.2",
"#material-ui/core": "^4.11.0",
"#react-native-community/art": "^1.2.0",
"#react-native-community/async-storage": "^1.11.0",
"#react-native-community/datetimepicker": "^2.4.0",
"#react-native-community/masked-view": "0.1.10",
"#react-native-community/voice": "^1.1.6",
"#risingstack/react-easy-state": "^6.3.0",
"axios": "^0.19.2",
"easy-peasy": "^3.3.1",
"expo": "~38.0.8",
"expo-camera": "^8.3.1",
"expo-constants": "^9.1.1",
"expo-font": "~8.2.1",
"expo-gl": "^8.3.1",
"expo-image-picker": "^8.3.0",
"expo-permissions": "^9.0.1",
"expo-pixi": "^1.2.0",
"expo-speech": "~8.2.1",
"expo-status-bar": "^1.0.2",
"i18n-js": "^3.7.1",
"lodash.memoize": "^4.1.2",
"native-base": "^2.13.12",
"proxy": "^1.0.2",
"react": "~16.11.0",
"react-dom": "~16.11.0",
"react-instantsearch-native": "^6.7.0",
"react-native-chatbot": "0.0.1-alpha.12",
"react-native-datepicker": "^1.7.2",
"react-native-dialogflow": "^3.2.2",
"react-native-elements": "^2.0.4",
"react-native-fade-in-view": "^1.1.0",
"react-native-gesture-handler": "~1.6.0",
"react-native-gifted-chat": "^0.16.3",
"react-native-localization": "^2.1.6",
"react-native-localize": "^1.4.1",
"react-native-no-flicker-image": "^1.0.2",
"react-native-paper": "^4.0.1",
"react-native-reanimated": "~1.9.0",
"react-native-safe-area-context": "~3.0.7",
"react-native-screens": "~2.9.0",
"react-native-signature-capture": "^0.4.10",
"react-native-star-rating": "^1.1.0",
"react-native-vector-icons": "^7.0.0",
"react-native-voice": "^0.3.0",
"react-native-web": "~0.11.7",
"react-navigation": "^4.4.0",
"react-navigation-stack": "^2.8.2",
"react-navigation-tabs": "^2.9.0",
"styled-components": "^5.1.1"
},
"devDependencies": {
"#babel/core": "^7.8.6",
"#babel/preset-env": "^7.11.0",
"babel-preset-expo": "~8.1.0",
"react-native": "^0.63.2"
},
"private": true,
"rnpm": {
"assets": "./assets/fonts"
},
"proxy": "http://localhost:19002"
}
How to add appropriate loaders, or identify the package causing this issue.
I had this exact same issue, I found a solution today.
Thanks to this kind user on the expo forums.
judipuak's post
Install the react-native-keyboard-aware-scroll-view package into your node_modules with yarn on npm
Navigate to native base/dist/src/basic and open Content.js
Find var _reactNativeKeyboardAwareScrollView=require('#codler/react-native-keyboard-aware-scroll-view')
Change this to var _reactNativeKeyboardAwareScrollView=require('react-native-keyboard-aware-scroll-view') (remove the #codler)
Update:
Here's a more permanent solution
courtesy of patarapolw
I downgrade two things, and upgrade one thing, in package.json
{
"dependencies": {
"native-base": "~2.11",
"react-native-web": "~0.11"
},
"resolutions": {
"react-native-keyboard-aware-scroll-view": "^0.9.0"
},
}
This is a native-base library problem. While You are using it's some Components there might error occur. I found that this error is not occurring in 2.11 or it's less version so try to install that specific version
npm install native-base#2.11

Plugin 0 specified, provided an invalid property of "default" (Jest React Native)

Hey all I am just trying to get a simple test running and I keep running into this error after running "yarn test" which is using jest.
Plugin 0 specified in "/Users/Documents/Dev/appname/node_modules/babel-preset-react-native/index.js" provided an invalid property of "default" (While processing preset: "/Users/Documents/Dev/appname/node_modules/babel-preset-react-native/index.js")
at Plugin.init (node_modules/babel-core/lib/transformation/plugin.js:131:13)
at Function.normalisePlugin (node_modules/babel-core/lib/transformation/file/options/option-manager.js:152:12)
at node_modules/babel-core/lib/transformation/file/options/option-manager.js:184:30
at Array.map (<anonymous>)
at Function.normalisePlugins (node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
at OptionManager.mergeOptions (node_modules/babel-core/lib/transformation/file/options/option-manager.js:234:36)
at node_modules/babel-core/lib/transformation/file/options/option-manager.js:265:14
at node_modules/babel-core/lib/transformation/file/options/option-manager.js:323:22
at Array.map (<anonymous>)
at OptionManager.resolvePresets (node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
Here is my package.json, what am I missing, im sure its a configuration issue and not a test issue.
{
"name": "appname",
"version": "0.0.1",
"private": true,
"rnpm": {
"assets": [
"resources/fonts"
]
},
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"axios": "^0.18.0",
"lodash": "^4.17.10",
"react": "16.4.1",
"react-native": "0.56.0",
"react-native-autocomplete-input": "^3.5.0",
"react-native-code-push": "^5.4.2",
"react-native-elements": "^1.0.0-beta2",
"react-native-form-validator": "^0.2.0",
"react-native-image-pan-zoom": "^2.1.9",
"react-native-image-zoom-viewer": "^2.2.18",
"react-native-material-dropdown": "^0.11.1",
"react-native-remote-svg": "^1.3.0",
"react-native-vector-icons": "^5.0.0",
"react-native-version-number": "^0.3.5",
"react-navigation": "^2.11.2"
},
"devDependencies": {
"babel-jest": "23.4.2",
"babel-preset-react-native": "^5",
"jest": "23.5.0",
"react-test-renderer": "16.4.1"
},
"jest": {
"preset": "react-native"
}
}
don't know if you solved that already but I had the same issue and I was able to make things work again with RN 0.56. I changed this:
"babel-preset-react-native": "^5",
to
"babel-preset-react-native": "4.0.0",
here's the full discussion around the issue: https://github.com/storybooks/storybook/issues/3897
if the above breaks your react-native env, another solution would be to install babel-bridge:
npm install babel-core#7.0.0-bridge.0 --save-dev

You seem to not be depending on "#angular/core". This is an error. Angular project

So I am trying the run the environment scripts and APIs for the development side of the website my team is building and every time I run ng build for each environment API this error pops up:
Example of the error that is being produced
now here is my pack.json file:
{
"name": "clark-gateway",
"version": "1.0.0-beta.4.0",
"description": "",
"main": "app.js",
"scripts": {
"start": "npm run gulp-tsc",
"build": "node_modules/.bin/gulp tsc",
"gulp-tsc": "node_modules/.bin/gulp start",
"lint": "node_modules/.bin/tslint --project ./src/**",
"pack": "npm run build && cp ./package.json ./dist && cd ./dist && zip -r ../dist.zip ./* & cd ..",
"zip": "cp ./package.json ./dist && cd ./dist && zip -r ../dist.zip ./* & cd ..",
"deploy": "eb deploy CLARK-Gateway-Production --label CLARK-Gateway-v$(node -p \"require('./package.json').version\")",
"document": "node_modules/.bin/typedoc --out ./docs/ ./src/"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#types/express-jwt": "0.0.38",
"#types/jsonwebtoken": "^7.2.3",
"#types/raven": "^2.1.3",
"#types/request-promise": "^4.1.39",
"#types/express": "^4.0.39",
"#types/node": "^8.0.32",
"concurrently": "^3.5.0",
"gulp": "^3.9.1",
"gulp-nodemon": "^2.2.1",
"gulp-typescript": "^3.1.7",
"pre-commit": "^1.2.2",
"tslint": "^5.7.0",
"tslint-config-airbnb": "^5.3.0",
"typedoc": "^0.9.0",
"typescript": "^2.3.4"
},
"dependencies": {
"#cyber4all/clark-entity": "^2.1.0-beta.0.4",
"#cyber4all/clark-taxonomy": "^2.0.0",
"#types/socket.io": "^1.4.33",
"aws-sdk": "^2.147.0",
"body-parser": "^1.17.1",
"cookie-parser": "^1.4.3",
"cors": "^2.8.4",
"dotenv": "^4.0.0",
"express": "^4.15.2",
"express-http-proxy": "^1.1.0",
"express-jwt": "^5.3.0",
"helmet": "^3.6.1",
"jsonwebtoken": "^7.4.1",
"morgan": "^1.9.0",
"multer": "^1.3.0",
"ngx-cookie": "^2.0.1",
"raven": "^2.3.0",
"request": "^2.85.0",
"serverless-http": "^1.5.3",
"socket.io": "^2.1.0"
},
"pre-commit": [
"lint"
],
"prettier": {
"singleQuote": true,
"trailingComma": "all"
}
}
Things that I have tried:
- I have deleted the node modules folder numerous times (3 times to be exact)
- npm installed 3 times also deleted the pack-lock.json file
- Also I did the recommended commands and it gave me more errors such as
PS C:\Clark-Development\CLARK-Environment-master\cart-service> ng
build
Local workspace file ('angular.json') could not be found.
Error: Local workspace file ('angular.json') could not be found.
at WorkspaceLoader._getProjectWorkspaceFilePath (C:\Clark-Development\CLARK-Environment-master\cart-service\node_modules\#angular\cli\models\workspace-loader.js:37:19)
at WorkspaceLoader.loadWorkspace (C:\Clark-Development\CLARK-Environment-master\cart-service\node_modules\#angular\cli\models\workspace-loader.js:24:21)
at BuildCommand._loadWorkspaceAndArchitect (C:\Clark-Development\CLARK-Environment-master\cart-service\node_modules\#angular\cli\models\architect-command.js:180:32)
at BuildCommand. (C:\Clark-Development\CLARK-Environment-master\cart-service\node_modules\#angular\cli\models\architect-command.js:47:25)
at Generator.next ()
at C:\Clark-Development\CLARK-Environment-master\cart-service\node_modules\#angular\cli\models\architect-command.js:7:71
at new Promise ()
at __awaiter (C:\Clark-Development\CLARK-Environment-master\cart-service\node_modules\#angular\cli\models\architect-command.js:3:12)
at BuildCommand.initialize (C:\Clark-Development\CLARK-Environment-master\cart-service\node_modules\#angular\cli\models\architect-command.js:46:16)
at Object. (C:\Clark-Development\CLARK-Environment-master\cart-service\node_modules\#angular\cli\models\command-runner.js:87:23)
This error occurs after I execute the command npm install --save-dev #angular/core#latest
So it turns out I was running the wrong commands, which explains why its saying it needs angular-cli to use the command I was using. I used npm start which worked flawlessly

Categories

Resources