I'm using clean and latest Laravel 5.4.
I have an error on npm run dev
ERROR Failed to compile with 4 errors
This dependency was not found:
* -!../../../node_modules/css-loader/index.js?{"url":true,"sourceMap":false}!../assets/fonts/jquery.filer-icons/jquery-filer.css in ./~/css-loader?{"url":true,"sourceMap":false}!./~/postcss-loader?{"sourceMap":false}!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","sourceMap":true}!./resources/assets/sass/app.scss
To install it, you can run: npm install --save -!../../../node_modules/css-loader/index.js?{"url":true,"sourceMap":false}!../assets/fonts/jquery.filer-icons/jquery-filer.css
app.scss:
#import "node_modules/jquery.filer/css/jquery.filer";
jquery.filer.css:
#import url('../assets/fonts/jquery.filer-icons/jquery-filer.css');
I tried to change this path but it doesn't works anyway
Related
I am building a Next JS application. To admit, this is my first exposure to Next JS. Now, I am having a problem using SCSS with my Next JS application. I have created a file called, assets/auth.scss. Then I imported it into pages/_app.js as follow.
import '../assets/auth.scss';
When I run "npm run dev", I am getting the following error.
./node_modules/next/dist/compiled/css-loader/cjs.js??ruleSet[1].rules[2].oneOf[7].use[1]!./node_modules/next/dist/compiled/postcss-loader/cjs.js??ruleSet[1].rules[2].oneOf[7].use[2]!./node_modules/nex
t/dist/compiled/resolve-url-loader/index.js??ruleSet[1].rules[2].oneOf[7].use[3]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[2].oneOf[7].use[4]!./assets/auth.scss
Error: Node Sass version 6.0.1 is incompatible with ^4.0.0 || ^5.0.0.
Error: Cannot find module 'C:\Users\Acer\Desktop\shar-kya-mal-next-js\nextjs-blog\.next\build-manifest.json'
Require stack:
Then I tried installing node-sass package too. It still does not work. How can I fix it?
Do you use npm install sass or node sass? Every next project where i will use scss i use npm install sass and it works normally. Do you do something different?
Try to use npm install sass or yarn install sass
Suddenly I received the following error:
app.js:28823 Uncaught Error: Cannot find module 'os'
at webpackMissingModule (app.js:28823)
at Object../node_modules/laravel-mix/src/File.js (app.js:28823)
at __webpack_require__ (app.js:79613)
at Object../resources/js/app.js (app.js:6700)
at __webpack_require__ (app.js:79613)
at app.js:79751
at Function.__webpack_require__.O (app.js:79650)
at app.js:79753
at app.js:79755
I tried deleting the node_module folder and the package-lock.json file, and run npm install, to no avail.
When I launch npm run dev I get the following error:
Error: Can't resolve 'os' in 'C:\...\node_modules\clean-css\lib\options'" -t "Laravel Mix"
UPDATE: I run npm install --save os and this problem was solved. But another one arose! Error: Can't resolve 'fs' and this one doesn't resolve with npm install --save fs
NPM version: 7.18.1
SOLVED: I don't know how in the top of resources\js\app.js file appeared this line:
const { exists } = require("laravel-mix/src/File");
I just deleted it and npm run dev didn't give any more errors.
I hope this answer will help someone else.
This all happens when you auto-import the modules using any extension.
Solution:
delete the package-lock.json file and run:
npm i
it works for me.
Another solution is to remove the
import { exists } from 'laravel-mix/src/File'
from the react component first line and it works.
I try to create a custom plugin. Wheni import Image from '#ckeditor/ckeditor5-image/src/image' i get an error
This dependency was not found:
* -!../../../css-loader/index.js??ref--6-oneOf-3-1!../../../postcss- loader/src/index.js??ref--6-oneOf-3-2!./#ckeditor/ckeditor5-theme- lark/theme/mixins/_rwd.css in ./node_modules/css-loader??ref--6-oneOf-3-
1!./node_modules/postcss-loader/src??ref--6-oneOf-3-
2!./node_modules/#ckeditor/ckeditor5-image/theme/textalternativeform.css
To install it, you can run: npm install --save -!../../../css-
loader/index.js??ref--6-oneOf-3-1!../../../postcss-loader/src/index.js??
ref--6-oneOf-3-2!./#ckeditor/ckeditor5-theme-lark/them
How should i fix it? I've installed this package https://github.com/ckeditor/ckeditor5-theme-lark and there is no effect.
Make sure you have created the vue.config.js file and included the details from
https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs.html
Make sure #ckeditor/ckeditor5-theme-lark is installed
npm install --save #ckeditor/ckeditor5-theme-lark
That should then fix the issue
after modified the vue.config.js make sure you are re-run again your VUE application
npm run dev
or
npm run serve
In my case, I got same error because I did not follow the guide very well. After read it I had to run this:
npm install #ckeditor/ckeditor5-theme-lark
npm install --save #ckeditor/ckeditor5-vue2 #ckeditor/ckeditor5-dev-webpack-plugin #ckeditor/ckeditor5-dev-utils postcss-loader#4 raw-loader#4
For specific modules selected, something like this:
npm install --save #ckeditor/ckeditor5-basic-styles #ckeditor/ckeditor5-editor-classic #ckeditor/ckeditor5-horizontal-line #ckeditor/ckeditor5-alignment #ckeditor/ckeditor5-autosave #ckeditor/ckeditor5-adapter-ckfinder #ckeditor/ckeditor5-essentials #ckeditor/ckeditor5-font #ckeditor/ckeditor5-heading #ckeditor/ckeditor5-image #ckeditor/ckeditor5-indent #ckeditor/ckeditor5-link #ckeditor/ckeditor5-list #ckeditor/ckeditor5-paragraph #ckeditor/ckeditor5-paste-from-office #ckeditor/ckeditor5-remove-format #ckeditor/ckeditor5-typing #ckeditor/ckeditor5-basic-styles
Then, in my case I use VUE 2+ version, so I had to modify the vue.config.js file, accorging the official documentation: https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/frameworks/vuejs-v2.html
Plase check the documentation with your specific framework: https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/frameworks/overview.html
I am facing issue while using the following command
npm run production
after execute following command i see following error
ERROR Failed to compile with 5 errors
error in ./resources/assets/sass/app.scss
Module build failed: ModuleBuildError: Module build failed: TypeError: Cannot read property 'map' of undefined
at preparePluginsArray (E:\wamp\www\smm.yasmalik.com\node_modules\svgo\lib\svgo\config.js:64:20)
at module.exports (E:\wamp\www\smm.yasmalik.com\node_modules\svgo\lib\svgo\config.js:32:28)
at new module.exports (E:\wamp\www\smm.yasmalik.com\node_modules\svgo\lib\svgo.js:21:19)
at E:\wamp\www\smm.yasmalik.com\node_modules\postcss-svgo\dist\index.js:95:16
at Object.creator [as postcssSvgo] (E:\wamp\www\smm.yasmalik.com\node_modules\postcss-svgo\node_modules\postcss\lib\postcss.js:150:35)
at E:\wamp\www\smm.yasmalik.com\node_modules\cssnano\dist\index.js:295:40
at Array.forEach (<anonymous>)
at E:\wamp\www\smm.yasmalik.com\node_modules\cssnano\dist\index.js:282:29
at creator (E:\wamp\www\smm.yasmalik.com\node_modules\cssnano\node_modules\postcss\lib\postcss.js:150:35)
at processCss (E:\wamp\www\smm.yasmalik.com\node_modules\css-loader\lib\processCss.js:199:16)
It was issue with my node_modules folder. there were some extra useless packages so simply i just deleted node_modules and install it again with following commands
Step 1
Delete node_modules manually
Step 2
Install the node_modules folder again:
npm i
Step 3
Update existing packages
npm update
That's it!
Probably you have some conflicts with versions of some npm packages.
Try to reinstall npm:
rm -rf node_modules
npm install
I have installed font-awesome with npm with following command :
npm install font-awesome --save
And then i have add following line in app.scss
#import "~font-awesome/scss/font-awesome";
Then i have run npm run watch
I have checked manually font-awesome folder is there inside the node_modules directory.
But in my webpage icon not displayed and in console i have seen following Error
GET
http://localhost/fonts/vendor/font-awesome/fontawesome-webfont.woff2?af7ae505a9eed503f8b8e6982036873e
net::ERR_ABORTED GET
How do i resolve the issue?
Since your are using Laravel, you need to write the following line in resources/asset/sass/_variables.scss:
$fa-font-path: "~font-awesome/fonts/";
Now in your resources/assets/sass/app.scss, write:
#import "~font-awesome/scss/font-awesome";