How do I resolve the error that occurred when migrating a windows local reactjs application to Linux? - reactjs

I'm trying to migrate on linux centos8 an application in reactjs that runs well locally in w10 with localhost:3000 for react and localhost:3001 for nodejs.
I created in /home a folder for node in which I copied everything in the local node folder, except node_modules, I ran there npm install, I launched nodejs with the command node index.js, I tested some endpoints from postman, everything it's ok on the node side.
I created in /home a folder for the reactjs application, I copied everything in the local react folder except node_modules, I gave npm install, node_modules was created.
Then I give the command: npm start and get the error:
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 '/home/parcare-react-test/node_modules/colorette'
and the reacjs does not start.
What can I do?
Thanks,


Does /home/paracre-react-test/node_modules/colorette exist?
My hunch is that it's installed globally (outside the project) on the original machine.
Run npm ls -g colorette to see if that package is installed globally, and npm ls colorette from the app directory to see if it's installed locally.
If it's global on the original machine, you can install it on the destination machine with npm i -g colorette (or whatever the parent package name is if it's a dependency of something else.)
If that's the issue and you don't want to install it globally on the destination machine, just install it into the app dir with npm i -D colorette. (I'm assuming it's a devDependency. If I'm wrong about that omit the -D.)

Related

Issue with installing a local npm package

I've created a React app for a new shared component. I've used rollup.js to bundle the files into a dist folder in the app.
I copied the dist folder and pasted it underneath the src folder in a separate React app where I wanted to locally npm install the dist folder for test purposes.
This Stack Overflow question says that I should be able to locally npm install the dist with the following command:
npm install --save ./src/dist
I locally npm installed as described above, but when I try to npm start my test app, the following error message is written to the console:
Module not found: You attempted to import C:\apps\my-test-app/../dist which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
Any idea what I might be doing wrong here? Seems like I've done everything according to instructions but I'm sure that I'm not the first person who has experienced this

how can I run an exisiting project in react

I am new in react, and now I have an available project which is needed some kind of development. The whole project consists of app and build folder and both of them also have index.html file and some other staff. How can I launch this project for viewing its demo in linux?could anyone explain the process step by step?
thanks in advance

Approach 1: Via Node
Install Node Install Node on linux machine
Once successfully installed, go to project folder and run npm install to install dependencies.
Run command "npm start" or in background "nohup npm start &" will start default application on 3000 port, from browser check http://IP/domain name:3000
Approach 2 Via Yarn
Install Yarn on linux machine Install Yarn
from project folder run yarn install will install all dependencies.
run yarn build will create complied code in /build folder
Install apache or Ngnix and move build folder content to apache or ngnix web root folder
Access app from http://IP or domain name if seted up for ip.

How do I install npm dependencies to build a reactjs app using VSTS?

I am trying to build a reactjs using vsts (visual studio team services). I have a very simple pipeline outlined below. Everytime I run Build it fails. It fails because it cannot find the node_modules folder. It seems they are being installed at the wrong directory location.
How can I install the node modules at the correct location? It seems to me that I need to CD into the folder after the get source command but I cannot figure out how to do change directory before the npm install command is ran.
Here is my pipeline:
get source
install dependencies
build
zip the build
Like this in vsts:
The second step Install Dependencies, which reads the package.json file and installs the node_modules, does not place the node_modules in the correct location, this causes my next step, build, to fail.
The build error says this:
I can run this manually
To run this manually using VS Code and git I run the following commands and it works every time. Here are the commands and the output.
Open working folder:
git init
git clone [web url to package here]
ls
d----- 8/30/2018 10: 56 AM CairsWebClient
cd CairsWebClient
npm install
npm start
Runs perfect.
Here are the details of the install command in vsts:
I have tried adding the following to the package.json location field. It always fails.
./CairsWebClient - Fail
/CairsWebClient - Fail cannot find C:\CairsWebClient
CairsWebClient - Error: ENOENT: no such file or directory, stat 'D:\a\1\s\CairsWebClient'

You need to specify the folder path of your project's package.json in Working folder with package.json input box, otherwise, it will uses current process's working folder.

Yeoman angular generator and npm install

I have created a VM for a mean stack. The install of which went with no issues. node.js and others have been installed.
I am using angular-fullstack to generate a boiler plate. I am baffled by what happens when npm install is run. I see that the system downloading all the dependencies but it's not stored in node_modules folder. I believe it's being stored in the global folder. When I try to run the stack from the local folder it says missing dependencies of almost everything.
I tried sudo, fixing permissions of global folder adding global folder to NODE_PATH but to no avail. I m still trying to figure why npm install is not installing in the local folder.
Thanks
===============
This is the error i am getting when i run npm isntall
ERR! Error: EPERM: operation not permitted, rename '/vagrant/meandev/nal_angular_dashboard/node_modules/babel-plugin-transform-es2015-typeof-symbol' -> '/vagrant/meandev/nal_angular_dashboard/node_modules/.babel-plugin-transform-es2015-typeof-symbol.DELETE'

Uma, I've installed successfully on my machine angular-fullstack generator and beside some ruby and sass problems I managed to successfully start the app.
The node_modules were installed by the generator in the main project folder ... the one shared by server(nodejs) and client app(angularjs).

I was able to resolve this issue.
My dev environment is as follows
Windows 7 host and Ubuntu running in Virtual box. Ubuntu was provisioned and managed by Vagrant.
I found that when the Node.js project is in the shared folder (between windows and Ubuntu) npm install and grunt were throwing a bunch of errors related to permissions. This was specific to my work computer which had defender, bitlocker and other stuff turned on. The moment i moved my folder to pure UBuntu folder everything worked.

What is causing 'grunt serve' to throw 'No Bower components found'?

I am starting out angular app with angular-fullstack in my Windows 7 box. I installed bunch of npm packages with -g options, including grunt-bower-install. I created the application first by running
yo angular-fullstack appname
There were no exception during the application creation. After application was created successfully I tried to run the app using
grunt serve
expecting the server to run. But the 'grunt serve' failed with
Running "bower-install:app" (bower-install) task
Cannot find where you keep your Bower packages.
We tried looking for a .bowerrc file, but couldn't find a custom
directory property defined. We then tried bower_components, but
it looks like that doesn't exist either. As a last resort, we tried
the pre-1.0 components directory, but that also couldn't be found.
Unfortunately, we can't proceed without knowing where the Bower
packages you have installed are.
Fatal error: No Bower components found.
I did find .bowerrc file and it was pointing to app/bower_components. Unfortunately, bower_components file was no where to be found. I am not sure what should be the content of the file to create it myself. Is it the missing file causing this problem or is there a npm package, I did not install correctly?
I installed bower using npm as well *
Thanks

Confusingly, the grunt-bower-install task that comes with angular-fullstack doesn't install bower components. It doesn't install anything. This error is trying to let you know that it can't find the bower_components directly, so it can't do its thing.
To fix the issue, run bower install.
If you don't have Bower installed, run npm install -g bower first.

I had the same issue, here's what worked in my case:
installed ruby and compass (yeoman needs these)
verified that path to Ruby bin folder is added to %PATH%
installed Git
restarted cmd window and ran "bower install" in the app folder
After that, grunt serve command worked perfectly.
Note: maybe installing Git and running bower install would suffice in your case.

I faced the same problem but only did npm install -g bower and then bower install and got grunt serve working.
I did not need to do any of the things mentioned by Olga.
Hope this helps.

npm install -g bower doesn't install bower components, you should run as well bower install to have all bower's components installed and then run grunt serve. It should work fine

Try to do bower install. If its failing saying not able to connect to git then you can change repo pointing location by simply running below command
$ git config --global url.https://github.com/.insteadOf git://github.com/
This will ensure that you will be downloaded over https instead of git if its causing orginasation firewall to block it.

In my case, I added sudo for it to work. So, I ran sudo npm install -g bowerand then bower install. grunt serve then worked when I ran it.

The Bower installation requires the packages to be brought from the Git repository, so first you need to install the Git application in your system. You can download it from this link :https://git-scm.com/downloads . Now after your have downloaded it , there may be a chance that the PATH may not be set up, so go to ControlPanel -> System and Security -> System -> Advance System Settings (on the left-hand side), click it, then goto Environment Variables -> System Variables -> PATH , click edit , and write down the following paths :
;C:\Users\admin\AppData\Local\Programs\Git\bin;
C:\Users\admin\AppData\Local\Programs\Git\cmd ....Well the above path is where Git was installed in my system, you can crawl to the place in your system where Git was installed and select the paths from the "bin" and "cmd" folder and paste it on the PATH variable.
Now, after the GIT path is setup, you can now type in the command " $ bower install " , this will install all of your bower packages.

npm install -g bower
bower install
grunt serve
worked for me ...

npm install -g bower
bower install
grunt serve
It's worked too

Resources