create-react-app build error "Expected a pseudo-class or pseudo-element." - create-react-app

I create a app using create-react-app and am encountering an error when trying to build a production-optimized version yarn build:
> yarn build help
yarn run v1.9.4
$ react-scripts build help
Creating an optimized production build...
Failed to compile.
Expected a pseudo-class or pseudo-element.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
This is unfortunately not a very useful error. Googling around for it seems to turn-up stuff about postcss but I'm not sure exactly how that's related to create-react-app, or how to go about resolving the issue.
Has anyone encountered similar issues before?
Note that the app compiles fine in dev mode:
Compiled successfully!
You can now view note-app in the browser.
Local: http://localhost:3000/
On Your Network: http://192.168.0.54:3000/
Note that the development build is not optimized.
To create a production build, use yarn build.


Error message 'Expected a pseudo-class or pseudo-element.' may suggest some syntax error of pseudo-classes in one of the CSS files imported.
For example:
**header nav li:last-child {
margin-right: 0;
}**
were wrote as:
**header nav li: last-child {
margin-right: 0;
}**


It indicates there's a syntax error in one of the css files imported in the project. For example - //

Related

Cannot find module 'tailwindcss'

I am trying out tailwindcss with my Vue project and while I solved some issue I had with the routing (while trying to break down my code into smaller components), I think I broke something else.
The code was compiling before I added my new routes. I can't seem to find what is wrong in this case.
Failed to compile.
./src/components/SiteHeader.vue?vue&type=style&index=0&lang=css& (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/SiteHeader.vue?vue&type=style&index=0&lang=css&)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: Cannot find module 'tailwindcss'
you can check out this repo, has very few files https://github.com/anaivanm/vue-tw/

First :
npm run dev
Then
npm install -D tailwindcss#latest postcss#latest autoprefixer#latest
For More Info :
Tailwind Docs
Also check this out :Restarting NPM

run sample test case of uiveri5 show error "Reference Error: describe is not defined"

I installed the #ui5/uiveri5 globally correctly. I download the ui-uiveri5 repository, then I go to directory of sample\apiTesting, and run the command
uiveri5 APITesting.spec
it report following error:
C:\src\open\ui5-uiveri5\sample\apiTesting\APITesting.spec.js:2
describe('APITesting', function() {
^
ReferenceError: describe is not defined
Please guide me on how to solve this issue. ( It report the same issue after I install the jasmine-node, mocha globally).

No need to install jasmine or mocha, just install uiveri5 globally with npm install #ui5/uiveri5 -g. Can you please try again, I merged a fix for another small issue. And with it, this sample starts fine.

React Native Error: Unable to resolve module `./index`

I have a newly created application using React Native. The app contains a simple login form and a fetch query, nothing complicated, few css and components.
I tried to implement Facebook, and after a LOOOT of struggle, I stopped receiving Facebook errors, while now, I get this error which makes no sense when I run react-native run-android :
No screen shown, nothing, diretcly this 500 error.
I searched all over and over for a solution, I even added the form for Gradle, re-installed all npm packages after rm rf node_modules.. still the same error.
implementation ("com.facebook.react:react-native:0.58.5"){force = true}

Used npm start -- --reset-cache to run Metro Bundler and it worked. Found this solution looking for the answer to the same issue, SO post that helped me.

I think this question might be related to Unable to resolve module `./index` So the question is, did you try to run the app before you connected facebook? If it worked before then we might have a different issue. However, it's similar to this bug: https://github.com/facebook/react-native/issues/24112
A fix has been released a few hours ago. Please upgrade to react-native 0.59.2.
react-native upgrade
The full guide on how to upgrade: https://facebook.github.io/react-native/docs/upgrading

Thats an error of your backendserver ... look inside the config and remove the module which can't be found

You can run npm install then react-native upgrade to solve this problem.

create a new project with react-native init "projectName"
go to "node_modules\react-native\scripts\packager.sh" of the new project you have created.
copy it and replace it with the one of the old project which is having issue...
This worked for me. I found out it was an upgrade to react-native 0.59.2 that caused it..

I was able to solve this (RN 0.61.2) by adding an index.android.tsx file at the project root (above ./src).
That file just contains:
import "./src/App";
Previously it worked fine with index.tsx in ./src, not sure why it broke as of 0.61.2.

Solution 1:
react-native start -- --reset-cache
Solution 2:
make metro.config.js file at the root of your project and paste below code
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
},
};
Solution 3:
run these commands
rm -rf $TMPDIR/react-*; rm -rf $TMPDIR/haste-*; rm -rf $TMPDIR/metro-*; watchman watch-del-all
# Start Metro Bundler directly
react-native start

It is clearly written in the error
Unable to resolve module ./index from /Applications/XAMPP/xamppfiles/htdocs/projects/jobifier-mobile/.: The module ./index could not be found from /Applications/XAMPP/xamppfiles/htdocs/projects/jobifier-mobile/.. Indeed, none of these files exist
Please check and see if you have given the correct path.

Trying to uninstall rn-fetch-blob

I am having issues uninstalling.
I have run rm -rf node_modules, yarn and react-native link, and then removed compile project(':rn-fetch-blob') from build.gradle, as other question suggested, but now I am getting more errors in the source code for Android when I try to run react-native run-android (probably will happen for iOS too).
> Task :app:compileDebugJavaWithJavac FAILED
/.../MainApplication.java:6: error: package com.RNFetchBlob does not exist
import com.RNFetchBlob.RNFetchBlobPackage;
^
/.../MainApplication.java:29: error: cannot find symbol
new RNFetchBlobPackage(),
^
symbol: class RNFetchBlobPackage
2 errors
I need help. This module feels like malware.

Best bet is to look at the manual installation steps for rn-fetch-blob and do the opposite of what they are saying
https://github.com/joltup/rn-fetch-blob/blob/master/README.md#user-content-installation
Manual installation instructions
https://github.com/joltup/rn-fetch-blob/wiki/Manually-Link-Package#index

I exactly did the opposite of installation and it worked

Error with gulp-sass

I get the following error when trying to run 'gulp serve':
[14:14:52] Plumber found unhandled error:
Error in plugin 'gulp-sass'
Message:
#import directives are not allowed inside mixins and functions
Details:
fileName: ./bower_components/bootswatch/spacelab/_bootswatch.scss
lineNumber: 8
I upgraded to the latest node version. Ran "npm rebuild node-sass" and "npm rebuild gulp-sass". I tried reinstalling bower packages and npm packages. Is there any sort of assumption I can make. I can try to reinstall npm packages by hand, but there is about 50 and I am afraid it won't do anything.
Any pointers welcome. Will be here until I solve this. 'npm gulp-sass version' gives the same version as my team has and build works for all of them.

I checked the original source of the Bower component you included and saw the following happening on the line mentioned there:
#mixin web-font($path){
#import url("#{$path}");
}
As far as I know, "imports" are not allowed in libsass (which is the base for gulp-sass), as it would be a conditional import (which isn't allowed for various reasons) and could lead to possible errors. Ruby Sass is a little more forgiving there.
You might want use a different Bootswatch package there (like bootswatch-sass).