webpack loaders can't resolve some image files - css

I'm getting the following error:
ERROR in ./app/styles/index.scss (./node_modules/css-loader/dist/cjs.js??ref--12-1!./node_modules/resolve-url-loader??ref--12-2!./node_modules/sass-loader/lib/loader.js??ref--12-3!./app/styles/index.scss)
Module not found: Error: Can't resolve '../../images/global/univers/characters/border-universe-top.png' in '/home/wolf/app/styles'
# ./app/styles/index.scss (./node_modules/css-loader/dist/cjs.js??ref--12-1!./node_modules/resolve-url-loader??ref--12-2!./node_modules/sass-loader/lib/loader.js??ref--12-3!./app/styles/index.scss) 81:42-115
# ./app/styles/index.scss
# ./app/core/app.js
# multi ./node_modules/react-app-polyfill/ie11.js ./app/core/app.js
Now, the weird parts:
I made sure the path is correct
In that very same SCSS file, another image file is used through url(). This file is in the same directory as border-universe-top.png and is loaded just fine.
the two files are very similar (although it might not be relevant, they are both ~2kb)
I thought it might come from some webpack config options, but since some files are correctly resolved, I'm starting to winder if it might not come from something totally different.

Have you tried npm rebuild node-sass ?
I experienced this in the past and this resolved it.

Related

Where do webpack:// files live, and how are they generated?

I am very much a novice regarding the Node ecosystem, and my intention is to update my team's React/Typescript app from react-scripts 4.x to 5.x. I'm seeing an error which I don't understand (actually a warning, but CircleCI is failing b/c it's on strict mode) when I execute npx react-app-rewired build --aot --no-watch --no-progress:
static/css/main.109f02ad.css from Css Minimizer plugin
postcss-svgo:: Invalid character in tag name
> 1 | <svg+xmlns="http://www.w3.org/2000/svg"+width="1"+height="1"+viewBox="0+0+1+1"><…
| ^
webpack://./src/app/styles/genome-extraction-datatable.css:1:0
My app does have a styles/genome-extraction-datatable.css but the text svg and xmlns do not appear in it. So this webpack:// file must be generated ... but how?
Also, removing the source CSS file does not resolve the error. It complains about a different CSS file in that case.
Is this enough information to help me get started? Please let me know what additional information would be useful here. I know nothing about webpack.

Laravel scss npm run dev - Can't resolve '../images/bg-main.png'

I have Laravel project and I want to generate css file from scss. My webpack.mix.js file looks like this:
mix.sass('resources/assets/sass/style.scss', 'public/css/style.css');
when I run command npm run dev I have error:
ERROR in ./resources/assets/sass/style.scss
Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve '../images/bg-main.png' in '/var/www/html/bitpay/resources/assets/sass'
ERROR in ./node_modules/css-loader??ref--4-2!./node_modules/postcss-loader/lib??postcss!./node_modules/resolve-url-loader??ref--4-4!./node_modules/sass-loader/lib/loader.js??ref--4-5!./resources/assets/sass/style.scss
Module not found: Error: Can't resolve '../images/bg-main.png' in '/var/www/html/bitpay/resources/assets/sass'
# ./node_modules/css-loader??ref--4-2!./node_modules/postcss-loader/lib??postcss!./node_modules/resolve-url-loader??ref--4-4!./node_modules/sass-loader/lib/loader.js??ref--4-5!./resources/assets/sass/style.scss 7:14663-14695
# ./resources/assets/sass/style.scss
# multi ./node_modules/laravel-mix/src/builder/mock-entry.js ./resources/assets/sass/style.scss
ERROR in ./node_modules/css-loader??ref--4-2!./node_modules/postcss-loader/lib??postcss!./node_modules/resolve-url-loader??ref--4-4!./node_modules/sass-loader/lib/loader.js??ref--4-5!./resources/assets/sass/style.scss
Module not found: Error: Can't resolve '../images/bg-recommendations.png' in '/var/www/html/bitpay/resources/assets/sass'
# ./node_modules/css-loader??ref--4-2!./node_modules/postcss-loader/lib??postcss!./node_modules/resolve-url-loader??ref--4-4!./node_modules/sass-loader/lib/loader.js??ref--4-5!./resources/assets/sass/style.scss 7:17599-17642 7:22181-22224
# ./resources/assets/sass/style.scss
# multi ./node_modules/laravel-mix/src/builder/mock-entry.js ./resources/assets/sass/style.scss
How to add images folder to compilation?
The problem is that mix cannot find the image bg-main.png that you are referring to inside style.scss.
You can either add the mix option not to process css urls as shown here:
mix.options({
processCssUrls: false
});
That has some consequences:
mix will not check for the image's existence.
mix will not automatically copy the image to the public directory.
The better solution is to place the image where mix expects it: mix expects ../images/bg-main.png to be inside directory resources/images/
References:
https://laravel-mix.com/docs/6.0/url-rewriting
https://laravel-mix.com/docs/6.0/faq#why-is-it-saying-that-an-image-in-my-css-file-cant-be-found-in-node_modules
That image files maybe not exist.
It is an incorrect path error, you used ./images/bg-main.png somewhere in your CSS. So locate that instance and change the path thus background-image:url('~/images/bg-main.png');

Storybook cannot find fetch-mock module

None of my storybooks stories are working anymore, and I am not sure if its an environmental or code issue.
It cannot find modules in fetch-mock/es5/client.js importing js/modules/es6.*.
The only difference that I can think of is that I added a new node module (react-syntax-highlighter). However nothing in the stack trace points to that... it is just pointing to "fetch-mock"
ERROR in ./node_modules/fetch-mock/es5/client.js
Module not found: Error: Cannot find module 'core-js/modules/es6.regexp.match'
# ./node_modules/fetch-mock/es5/client.js 113:0-43
# ./stories/cyberdashImport.stories.js
# ./stories sync \.stories\.js$
# ./.storybook/config.js
# multi ./node_modules/#storybook/core/dist/server/common/polyfills.js ./node_modules/#storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware
/client.js?reload=true
I solved this by switching over to npm instead of yarn.
I deleted my node_modules, and then did a npm install, and everything works fine. Yarn seems to have problems resolving dependencies with storybook.

convert .WAR for auto deploy in karaf/servicemix

I've got very simple .WAR containing example servlet. I'm able to deploy it in servicemix using the following command:
osgi:install file:///home/seiho/apache-servicemix-4.4.2/deploy/TestServlet.war?Bundle-SymbolicName=TestServlet&Webapp-Context=/TestServlet
And then see it in my browser. But only with full path to a file, e.g.: localhost:8080/TestServlet/index.html or localhost:8080/TestServlet/TestServlet (my servlet is TestServlet class).
I'd like to launch the index.html page automatically after entering: localhost:8080/TestServlet
how to do it?
MORE IMPORTANT
I need a way to convert the .WAR file or servlet project (I've got the sources) so that new .WAR file can be auto-deployed by copying it to $SERVICEMIX_HOME/deploy directory.
I've tried editing the MANIFEST.MF file, but with no success. Probably I'm doing something wrong.
Thanks for any advice/help.
To be recognised as a wab, you need to add a context path header to your manifest:
Web-ContextPath: TestServlet
It's working now! I was doing my MANIFEST.MF according to this page: http://team.ops4j.org/wiki/display/ops4j/Pax+Web+Extender+-+War+-+OSGi-fy
The problem was that for some reason "Bundle-Version: 1.0" line was required as opposed to optional as stated on that page.
Honestly, just adding the Bundle-Version fix-it.
I knew it was something wrong with the MANIFEST.MF and after Holly Cummins' question I played with it a bit more. Thanks Holly.
I still can't do anything with the manual site launching (have to manually enter the index.html).
http://localhost:8080/TestServlet/ gives me this:
HTTP ERROR 404
Problem accessing /TestServlet/. Reason:
Not Found
Powered by Jetty://
http://localhost:8080/TestServlet/index.html gives me proper site.

Compile error in empty cocos2d 2.0 (iPhone)

When I try to compile new cocos2d+box2d project in xcode4.
I got error message like:
/Users/bla-bla/Cocos2d testing/Cocos2d testing/libs/cocos2d/CCDirector.h:32:9: fatal error: 'kazmath/mat4.h' file not found [2]
/Users/bla-bla/Cocos2d testing/Cocos2d testing/libs/cocos2d/CCNode.h:37:9: fatal error: 'kazmath/kazmath.h' file not found [2]
File I checked, what is wrong?
This is caused by having a space in the path name to your project. To work around this, you'll need to add the following under your project's configuration... in Build Settings, in the group of Search Paths, set the Header Search Paths to the following value:
"${SRCROOT}/Cocos2d testing/libs/kazmath/include"
Be sure to include the double-quotes.
did you check in Finder to see if there is a real folder named kazmath in the same path as where CCNode is ? if not, there is probably a flaw in the templates install script for that version of coco. But dont rely on the 'tree view' of the Xcode project navigator to really know whether a file is present or not. If the path is wrong in the include, suggest you report it to the coco team. You could temporarily fix the import statements to get going, but that would be throw-away code :) when coco issues another release candidate, presumably fixed.
Ensure you are editing the right header search paths for the right target. 1 hour of my life wasted editing the main project or the app rather than the test!

Resources