How do I fix my "No valid exports main found" compile error? - reactjs

I tried to compile the files using
npm start
but it doesn't works.
In my chrome and terminal, it says like this way.
Failed to compile
./src/index.css (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./src/index.css)
Error: No valid exports main found for 'C:\Users\Jiwoo\Desktop\movie_app_2020\node_modules\colorette'
I tried to delete folder [node_modules] and typing "npm i" but it doesn't works too.
How can I fix my error?

upgrade node.js and also remove create-react-app globally by using below command
npm uninstall -g create-react-app
and using:
npx create-react-app myapp

I am using Windows 7 and the latest working Node version is 13.6. Therefore to make it run the only option is to downgrade autoprefixer: npm i autoprefixer#9.8.0
Downgrading colorette module to 1.2.0 didn't help.
The ultimate solution is to upgrade Node, however, it's not possible on Windows 7. Alternatively, one can try to compile it on a VM or with a docker image that supports Node 14+.

For windowss 7 user who are using any of the 12+ version just download the last 13 version which is v13.14.0. Before installing this version make sure to uninstall the previous version installed.
Here's the download link
Download the .msi file instead of exe file
Hope it will work
Thanks

Related

Typescript version in VScode

I have a CRA app in VSCode.
My global TS version is:
My project TS version is (package.json):
VSCode uses the latest:
Now, when I try to add a 4.0 TS feature, the terminal shows a compilation error:
I tried to change the package.json TS version to latest and ran npm install but it didn't help.
My Questions are:
Why doesn't it compile?
Which TS version is used for PROBLEMS pane and which for terminal? I would expect the same error in both locations.
Thanks in advance!
When you run tsc -v in the terminal, you are calling a globally installed Typescript package which is showing you have version 4.8.4 installed.
You can verify this by running npm list -g --depth 0 which will list all the global packages you have installed, along with their versions.
However, when using npm scripts (e.g in CRA npm run build) the Typescript package inside your node_modules folder is called. Since this version of Typescript is 3.x the compilation will fail. By changing VSCode to use the workspace version, the same error will be shown.
Upgrading the version inside your package.json to the latest should fix this error. To be sure the correct version is being used, try using an npm script to list the version by including this vers script in your package.json
"scripts": {
"...": "your other scripts",
"vers": "tsc -v"
}
then run npm run vers in your terminal.
TLDR:
Q1.
The Typescript version used when running the CRA build script (3.x)
is targeted which will fail when using 4.x syntax.
Q2.
The problems pane in VSCode uses the VSCode Typescript version
(depends how up to date your VSCode is) unless manually switched to
use the workspace version (node_modules version).
The terminal will target your globally installed version.
NPM scripts will target the version inside your node_modules folder.

React-native-reanimated: Unable to resolve "./useValue"

I am trying to build a react native app. I have caught an error on the terminal saying
Unable to resolve "./useValue" from "node_modules\react-native-reanimated\src\Animated.js"
I reinstalled react-native-reanimated to the expected version range.
`Some of your project's dependencies are not compatible with currently installed expo package version:
react-native-reanimated - expected version range: ~1.9.0 - actual version installed: ^1.10.1
Your project may not work correctly until you install the correct versions of the packages. To install the correct versions of these packages, please run: expo install [package-name ...]`
Thus, I run the code as follow: npm install react-native-reanimated#1.9.0, but still run into the error code.
I could realy use some help on this.
try uninstalling the package ==> close ide (all instances) ==> open the ide ==> install the package again ==> run "expo start -c"
Only do this:
expo start --clear
From Expo Documentation at Expo Start command.
--clear, -c | Clear the React Native Packager cache.

Doesn't work "npx create-react-app my-new-app --typescript"

Please help me. When I try to generate a project (creative-react-app), I get an error, you can look in the screenshot. The screen also shows the versions of node, npm and npx. I am using Linux Ubuntu 18.04.4 LTS.
Try to uninstall your nightly Node version and install the stable version of Node. In the error, it says that babel isn't compatible with your version of Node.
It also could be that you have an old version of React installed locally. So if the first fix doesn't work try
npm uninstall react

Can't create WebStorm React project

I'm trying to create a React project in WebStorm 2016.3.1
It's asking me for a create-react-app but I have no idea what that is and I can't find any reference on Google.
What is it and where can I find the value?
You need to install create-react-app npm module, before you use this feature.
npm install -g create-react-app
You can read more about this feature on the official release blog of WebStorm.
Excerpt from the documentation :
Make sure that you have create-react-app installed globally on your computer, for that run npm install -g create-react-app. Then to start your new project, double click on the start task in the npm tasks tool window to run it. That’s it!
I had ie installed create-react-app globally using yarn and webstorm failed to find it. Then I used npm, not to mention globally and its working like a charm.
TL;DRNo need to install anything. Just enter npx create-react-app in the create-react-app field & it should work like a pycharm, I mean charm :)
Side note: npx is pre-bundled with npm since npm version 5.2.0.
I created webStrom react app following this steps.
Download node.js
Open command line console and type "npm install -g create-react-app"
Create react app project from web-storm.
Make sure you provided the correct file path of create-react-app , by default it is
installed in ~\AppData\Roaming\npm\node_modules\create-react-app
use
npm start: to start development server
If you are using asdf or any other tool to manage multiple versions of nodejs, you will need to set up the path to create-react-app manually
I'm on mac, so for me the path was
/Users/<USER>/.asdf/installs/nodejs/12.16.2/.npm/lib/node_modules/create-react-app

Ionic 2 - Can't generate pages via the CLI how to resolve error?

This may be just my lack of experience working with ionic 2 but I'm getting an error when tying to generate pages via the CLI.
The syntax I'm using: "ionic g page TestPage"
It returns an error (below). Does anyone know how to resolve this error? It seems the "templates" directory does not exist on my machine which I gather is why this is happening, but not sure how to get it there or fix the issue. The first part of the path does exist: C:\apps\sampleapp\node_modules\ionic-angular\, but not the "templates/page" part.
Error: ENOENT: no such file or directory, scandir 'C:\apps\sampleapp\node_modules\ionic-angular\templates\page'
at Error (native)
at Object.fs.readdirSync (fs.js:808:18)
at getTemplatesInDir (C:\Users\m411\AppData\Roaming\npm\node_modules\ionic\node_modules\#ionic\app-generator
at Generator.renderAndWriteTemplates (C:\Users\m411\AppData\Roaming\npm\node_modules\ionic\node_modules\#ion
at C:\Users\m411\AppData\Roaming\npm\node_modules\ionic\node_modules\#ionic\app-generators\index.js:25304:26
Ionic Framework Version: 2.0.0-beta.11
Ionic CLI Version: 2.1.0-beta.1
Ionic App Lib Version: 2.1.0-beta.0
OS: Windows 8.1
Node Version: v4.5.0
Downgrade your ionic version to beta 22.. I think it works by uninstalling and then updating npm just in case and then reinstalling a lower ionic version.
How do you completely remove Ionic and Cordova installation from mac?
And I would suggest trying "npm install" in the project directory after this too.
Okay, for anyone where downgrading is not an option:
The Ionic Team did some major API updates and some restructuring.
You need to follow these upgrade steps:
Sidenote: If you did uninstall and reinstall the package AND did run the command with sudo and hit the command ionic start --v2 myApp in the same terminal, then you need to update the rights in your folder with:
sudo chown -R username ./pathToAppFolder
https://github.com/driftyco/ionic/blob/master/CHANGELOG.md#steps-to-upgrade-to-rc0
npm i -g ionic#2.0.0 - Solved the issue.
Thank you.
npm i -g ionic#2.0.0-beta.37
resolved the issue for me, was previously on ionic 2.0.0 beta 11

Resources