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.
Related
I recently had put banner and interstitial ads on my application. After which, I decided to incorporate RevenueCat. Once the pod was installed, I had many errors that I could not fix. I decided to remove the CocoaPod. Once that was completed, I had been getting the following problems.
AVFoundation.h – AVFCore/AVFcore.h file not found
RPBroadCastExtension.h. – Could not build module AVFoundation
GameKit.h. – Could not build module ReplayKit
FIRGameCenterAuthProvider.m – Could not build module GameKit
I have been trying for 2-3 days to fix the problem. Here is what I have been doing.
I tried removing all pods and reinstall all the pods.
I try to clean the build. Same error came back.
I tried to add and remove RevenueCat.
I changed build setting to enable module c & Objective C. I added use_modular_headers! to Pod file.
my pod file
target 'FetalGrowthPercentile' do
# Comment the next line if you don't want to use dynamic frameworks
use_frameworks!
use_modular_headers!
# Pods for FetalGrowthPercentile
pod 'Firebase/Firestore'
pod 'Google-Mobile-Ads-SDK'
pod 'Firebase/Auth'
end
None of which helps. I am lost. Please advise!!
Louis
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.
Trying to build an Angular project and I'm getting the errors below. This project built fine last week. I made some changes to other projects that use the Dlls from this project, but no changes to this project. I already spent a lot of time troubleshooting it with no luck and appreciate any help.
ERROR: PostCSS received undefined instead of CSS string
An unhandled exception occurred: PostCSS received undefined instead of CSS string
This can sometimes happen if node-sass was compiled for a different version of Node.js than you're currently running (ie if you've recently changed your Node.js version). You can fix that with:
npm rebuild node-sass
if you are using webpack, and trying to use sass-loader, also add sass
I had this same issue when attempting to test an Angular library, and the issue was I had [``] instead of [] in the styles property of my component metadata.
Wrong
#Component({
selector: 'my-input',
template: `
<input
... />
`,
styles: [``],
Right
#Component({
selector: 'my-input',
template: `
<input
... />
`,
styles: [],
I had similar problem. I was trying to build an angular library and the message below appeared:
Building Angular Package
------------------------------------------------------------------------------
Building entry point 'library-name'
------------------------------------------------------------------------------
Compiling TypeScript sources through ngc
ERROR: PostCSS received undefined instead of CSS string
An unhandled exception occurred: PostCSS received undefined instead of CSS string
See "/tmp/ng-itlEgm/angular-errors.log" for further details.
[12:03:38] 'compile' errored after 17 s
[12:03:38] Error: Command `ng build library-name --prod` exited with code 127
at ChildProcess.handleSubShellExit (/node_modules/gulp-run/command.js:166:13)
at Object.onceWrapper (events.js:422:26)
at ChildProcess.emit (events.js:315:20)
at ChildProcess.EventEmitter.emit (domain.js:505:15)
at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
[12:03:38] 'build' errored after 17 s
I was using gulp-run to execute the command ng build library-name --prod. But, executing the command ng build library-name --prod directly on the terminal, the log error was smaller, but similar too.
The problem was in one component. The component had one styleURL (Angular component decorator), like this:
...component.css
but, the library uses scss. So, I changed the path to:
...component.scss
and I executed the command 'ng build library-name --prod'. So, the error didn't appear again.
I was using NVM v0.35.2 (allow to have more than one NodeJS version installed in my machine); NodeJS v12.18.2; Ubuntu x64 18.0.4 LTS and Angular CLI 9.1.9.
I faced the same situation now and the command that helped me is -
npm i node-sass -D
Check the node version, see if the version of node changes cause this problem. I use node version 16.14.2 which occured this error, after switch to 12.16.1 it works well. Just check your node-sass and node version will find a way out.
This can happen due to change in version of node. I had same issue with a NUXT app. What I did was
using yarn, in the root directory of your project, run yarn. But if you're using npm run npm install
start your project again.
To see the main problem, please review a code snippet from yarn.lock:
moment#<2.26.0:
version "2.25.3"
resolved "https://registry.yarnpkg.com/moment/-/moment-2.25.3.tgz#252ff41319cf41e47761a1a88cab30edfe9808c0"
"moment#>= 2.9.0", moment#>=2.14.0, moment#^2.10.2, moment#^2.22.2, moment#^2.8.2, moment#^2.9.0:
version "2.26.0"
resolved "https://registry.yarnpkg.com/moment/-/moment-2.26.0.tgz#5e1f82c6bafca6e83e808b30c8705eed0dcbd39a"
How did I end up here?
deleted node_modules
edited package.json: replaced "moment": "2.24.0", with "moment": "<2.26.0",
yarn install
Now when doing yarn start the app doesn't start. I get TS compilation error, which is caused by mixing incompatible versions: https://github.com/ant-design/ant-design/issues/24377
It looks like a TS dependency hell. How to resolve it? why are there 2 'moment' libraries with different versions?
How to resolve it?
merge two entries manually
moment#<2.26.0, "moment#>= 2.9.0", moment#>=2.14.0, moment#^2.10.2, moment#^2.22.2, moment#^2.8.2, moment#^2.9.0:
version "2.25.3"
resolved "https://registry.yarnpkg.com/moment/-/moment-2.25.3.tgz#252ff41319cf41e47761a1a88cab30edfe9808c0"
and run yarn install
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');