Can I use a custom node_modules path with create-react-app - node.js

I'm working on a project inside a VM (really docker on windows via vscode remote-containers). I would like to avoid building my react app at $(pwd)/node_modules, because everything under $(pwd) is synced to my windows file system which causes serious performance issues.
I'm fairly new to nodejs in general, but I'm surprised how difficult this seems to figure out.
I successfully started with this:
yarn --modules-folder /tmp/vendor
This gave me a /tmp/vendor folder with expected dependencies listed.
For the next step, I want to run the development server, so I run this:
yarn --modules-folder /tmp/vendor start
I get /bin/sh: react-scripts: command not found. I figure yarns --modules-folder doesn't reconfigure PATH information when running commands (yarn start calls react-scripts start). So I just added my own PATH as a workaround:
PATH=$PATH:/tmp/vendor/.bin/ yarn --modules-folder /tmp/vendor start
But now I get this:
[root#352b76226b83 owio]# PATH=$PATH:/tmp/vendor/.bin/ yarn --modules-folder /tmp/vendor start
yarn run v1.22.5
$ react-scripts start
internal/modules/cjs/loader.js:965
throw err;
^
Error: Cannot find module 'react-dev-utils/crossSpawn'
Require stack:
- /tmp/vendor/react-scripts/bin/react-scripts.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:962:15)
at Function.Module._load (internal/modules/cjs/loader.js:838:27)
at Module.require (internal/modules/cjs/loader.js:1022:19)
at require (internal/modules/cjs/helpers.js:72:18)
at Object.<anonymous> (/tmp/vendor/react-scripts/bin/react-scripts.js:18:15)
at Module._compile (internal/modules/cjs/loader.js:1118:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1138:10)
at Module.load (internal/modules/cjs/loader.js:982:32)
at Function.Module._load (internal/modules/cjs/loader.js:875:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12) {
code: 'MODULE_NOT_FOUND',
requireStack: [ '/tmp/vendor/react-scripts/bin/react-scripts.js' ]
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command
Since it is complaining about missing modules, I also set the NODE_PATH (I guess yarn doesn't forward this variable either):
NODE_PATH=/tmp/vendor PATH=$PATH:/tmp/vendor/.bin/ yarn --modules-folder /tmp/vendor start
With this, I get:
./src/index.jsx
Line 0: Parsing error: Cannot find module 'eslint-scope' from '/tmp/vendor/eslint/lib/api.js'
I'm stuck here, because eslint-scope does exist, and I've already what I can to work around path problems.
I'm half tempted to start trying other tools outside of CRA and yarn but I don't really know the ecosystem well enough yet to understand how to port my application over. Any advice would be greatly appreciated.
EDIT:
I've gotten closer by changing vendor to node_modules. I guess this convention is somehow necessary. I also added NODE_PATH=/tmp/node_modules to a .env file, and the --modules-folder /tmp/node_modules to a .yarnrc file.
EDIT 2:
I made a symlink for $(pwd)/node_modules -> /tmp/node_modules as suggested and this seems to have worked this time around, given that I added the NODE_PATH to .env.
It seems all the react-script stuff is working now, but when compiling the local source files under src/components/, I get errors about not resolving modules from /tmp/node_modules that do indeed exist.

After some tinkering and support from Estus, I found that having the following things works for me:
.env file with NODE_PATH=/tmp/node_modules
.yarnrc file with --modules-folder /tmp/node_modules
symlink for $(pwd)/node_modules -> /tmp/node_modules
I'm not sure why the symlink is necessary, and would love to know if anyone has a .env like solution. It seems my local source files are compiled against this folder regardless of having NODE_PATH set.
Other oddities I don't understand, but maybe someone will:
I could not just have NODE_PATH as a variable in my yarn command. It seems having the value in .env changed how modules within node_modules were compiled.
I could not use a name other than node_modules. No idea why.
As an aside:
For anyone landing here having the same issue (slow docker performance on windows or mac), you may need to make sure you're editor is not indexing node_modules. For example, I have set files.watcherExclude in my .vscode/settings.json to include "**/node_modules": true,".

Related

Tailwind CSS EACCESS Error When Running Project In Node Docker Container (Docker Compose)

I have a project that is using svelte-kit and Tailwind CSS. I recently moved it over to using docker compose. When I run my containers, I run them in WSL because they usually run better there. When I start the container that runs the development server, it starts up and runs just fine, but when I open the URL in my browser, I get the following error.
Error: EACCES: permission denied, mkdir '/root/.tailwindcss/touch'
at Object.mkdirSync (node:fs:1325:3)
at Object.<anonymous> (/var/www/html/node_modules/tailwindcss/jit/lib/setupContext.js:44:8)
at Module._compile (node:internal/modules/cjs/loader:1109:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1138:10)
at Module.load (node:internal/modules/cjs/loader:989:32)
at Function.Module._load (node:internal/modules/cjs/loader:829:14)
at Module.require (node:internal/modules/cjs/loader:1013:19)
at require (node:internal/modules/cjs/helpers:93:18)
at Object.<anonymous> (/var/www/html/node_modules/tailwindcss/jit/index.js:7:22)
at Module._compile (node:internal/modules/cjs/loader:1109:14)
I'm unsure what's causing this error but I think it has something to do with tailwind.
Here is a link to my docker-compose file: https://github.com/DriedSponge/GorillianCurrencyConversion/blob/master/docker-compose.yml
If you want to try it out yourself, here is a link to the repo and the steps to reproduce:
https://github.com/DriedSponge/GorillianCurrencyConversion
Install Packages: docker-compose run npm install
Start Dev Server: docker-compose --profile dev up -d --build
Please let me know if you have any ideas on what's happening, or if you need any additional information from me. Thanks in advance!
It looks like Tailwind is trying to create a touch file which has something to do with watching for file changes during development, specifically when Tailwind is in JIT mode.
You might be able to fix this by either:
Allowing write access to /root/.tailwindcss.
Disabling touch by setting the TAILWIND_DISABLE_TOUCH environment variable.
Changing the touch file directory by setting the TAILWIND_TOUCH_DIR environment variable to a location where writing is allowed.
To set environment variables, it might be most convenient to set those in your package.json file. Simply add the environment variable in front of the relevant command under scripts, such as:
"dev": "TAILWIND_TOUCH_DIR='/var/www/html/.tailwindcss/touch' svelte-kit dev"
Be careful not to point this directory to one containing important files, since Tailwind will delete all the files inside that directory.
None of these options are documented anywhere except for comments in the source so I'm not entirely sure what the consequences of this are, especially during development mode. I believe that this is used for communicating when files have changed, so option 1 or 3 might be the safest choices.

The event in which npx create-react-app Error occurred

I keep getting errors when I do npx create-react-app. Please help me!!!!!!!!!!!!!
I tried yarn create react-app, but the result was the same.
Please let me know how I can solve this problem.
Error: Cannot find module 'C:\Users\me\React_projects\react-basic\test\node_modules\fs-extra\lib\index.js'. Please verify that the package.json has a valid "main" entry
at tryPackage (internal/modules/cjs/loader.js:303:19)
at Function.Module._findPath (internal/modules/cjs/loader.js:516:18)
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:867:27)
at Function.Module._load (internal/modules/cjs/loader.js:725:27)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (internal/modules/cjs/helpers.js:88:18)
at Object.<anonymous> (C:\Users\me\React_projects\react-basic\test\node_modules\react-scripts\scripts\init.js:17:12)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32) {
code: 'MODULE_NOT_FOUND',
path: 'C:\\Users\\me\\React_projects\\react-basic\\test\\node_modules\\fs-extra\\package.json',
requestPath: 'fs-extra'
}
Aborting installation.
node has failed.
Deleting generated file... node_modules
Deleting generated file... package.json
Deleting generated file... yarn.lock
Deleting test/ from C:\Users\me\React_projects\react-basic
Done.
Solutions 1:
This issue related maybe to node module, path is updated and not targeted to index.js, so that its cant be load, or its happen since you have more than dirctory with the same file name...
any way, to resolve this issue, try to do this:
Remove package-lock.json
Remove node_modules
Then install it again
Then start
if you do this, you will remove old module and lock packagest and install it like a first install
==================
Solutions 2:
if prev steps not work, please make sure to test run via node direct, for example, get a copy for your project to desktop and try to install it and run it direct via node index.js and look what will be happen...
==================
Solutions 3:
check your package.json and make sure the npm start is call a truth file-name / file-path which its exists...like "dev": "...../myProject/app.js" (its package.json in above level of app.js...
==================
Solutions 4:
make sure your node and npm/yarn its install globally and its can be accessed every where...via node -v for example...
==================
Solutions 5:
make sure theirs no suffix empty space in file name or directory name
====================
for me, usually solution 1 or 3 or 5 resolve issue most time for our team issue like this...
I wish one of these solution is work for you...

How to deploy Nuxt.js to Elastic Beanstalk?

I am very new to AWS and i have been following the tutorials out there but couldn't find the answer. So, what i did was i created simple nuxt application, no changes to the framework's script or anything. I set my elastic beanstalk to run node.js settings. and then i tried to deploy my /dist folder(using nuxt build) with the application's json folder as told by every tutorials. but it gives me this this is what it looks on my webpage
I think i have something wrong with which folders i deploy or do i have to actually deploy via the aws CLI, would that make a difference at all?
eb log :
-------------------------------------
/var/log/nodejs/nodejs.log
-------------------------------------
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /tmp/.npm/_logs/2019-09-29T16_00_28_939Z-debug.log
> portfolio#1.0.0 start /var/app/current
> cross-env NODE_ENV=production node server/index.js
internal/modules/cjs/loader.js:638
throw err;
^
Error: Cannot find module '/var/app/current/server/index.js'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
at Function.Module._load (internal/modules/cjs/loader.js:562:25)
at Function.Module.runMain (internal/modules/cjs/loader.js:831:12)
at startup (internal/bootstrap/node.js:283:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)
The nodejs logs indicate to me that there is an issue with the build, an issue with how it's zipped, or an issue with your start command.
The most common is incorrectly zipping source files
When you create a ZIP file in Mac OS X Finder or Windows Explorer, make sure you zip the files and subfolders themselves, rather than zipping the parent folder.
In other words, do not right click the dist folder and click "zip", select all the files and folders (including hidden ones) and zip those. Elastic beanstalk, and many other AWS services, expect the zip to unpack into a flat structure, and not contain the parent folder when unzipped.
If this does not solve your problem, make sure you're zipping the correct folder. Try deleting your .nuxt and /dist folders, and running npm run build locally. The folder that is produced (defaults to .nuxt) is the folder whose contents need to be zipped.
The reason it is throwing that error is because your launch command starts with cross-env. When it sees that it tries to run the globally installed package cross-env but it is not available globally, so it throws that error. There are a few possible ways to address this:
The easiest is to just change the start command to use a relative path to the locally installed version of cross-env, so your command should look something like this:
node_modules/cross-env/src/bin/cross-env.js node server/index.js
You might also try adding npx to the front of your command, like so:
npx cross-env NODE_ENV=production node server/index.js
This should work but I have found that sometimes I get errors with specific packages, from what I can tell it is a bug with npx but I haven't had time to look into it. Notably I did see this bug with a nuxt js app specifically so you might too, however I was using the nuxt cli which you are not.
The third option is you could look into installing the package globally using ebextensions. In my work I haven't come across a situation where that has been necessary.

''adonis' is not recognized as an internal or external command' problem even though I installed the CLI globally

My Windows 10 PC forces me to install CLI and assign environment varriables (happens when I install ionic). This time, same trouble with Adonis. First, the problem is 'adonis' is not recognized as an internal or external command'
To solve this, I have installed Adonis locally in C:\Users\mq003\AppData\Local\node_modules. Which I receive is the only #Adonis directory and it doesn't come with a .cmd file so I can't use this. Therefore, I imported directly the cli from github with npm i -save #adonisjs/cli and copy the .cmd files in npm directory, while others will be put in node_modules (because my Path declare I put the cmd there).
As you can see, all ngrok, ionic, etc. commands belong here. They all work perfectly fine in every terminals.
When I try to type adonis commands, this time, it said.
PS D:\adonis project> adonis --help
internal/modules/cjs/loader.js:626
throw err;
^
Error: Cannot find module 'C:\Users\mq003\AppData\Roaming\#adonisjs\cli\index.js'
?[90m at Function.Module._resolveFilename (internal/modules/cjs/loader.js:623:15)?[39m
?[90m at Function.Module._load (internal/modules/cjs/loader.js:527:27)?[39m
?[90m at Function.Module.runMain (internal/modules/cjs/loader.js:837:10)?[39m
?[90m at internal/main/run_main_module.js:17:11?[39m {
code: ?[32m'MODULE_NOT_FOUND'?[39m,
requireStack: []
}
I think it requires #adonisjs directory outside, not in node_modules. So I get that directory out (as you can see in the picture). However, the error still exists.
Editted: I found an issue posted on Github seems relevant to my problem. I will link here in case it helps.
Github

How to resolve Node.js: "Error: ENOENT: no such file or directory"

I have a Node.js web application currently running on a server successfully. Now I'm trying to set up a local copy on my development server.
I currently have Node.js, NPM and MongoDB Installed just like what I have in production server. However, the error below occurs when I try to start the Node.js server.
What could be causing this issue?
cd ~/node/nodeapp
node app.js
Output:
fs.js:640
return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
^
Error: ENOENT: no such file or directory, open '/home/embah/node/nodeapp/config/c
onfig.json'
at Error (native)
at Object.fs.openSync (fs.js:640:18)
at Object.fs.readFileSync (fs.js:508:33)
at Object.<anonymous> (/home/embah/node/nodeapp/config/config.js:4:28)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (/home/embah/node/glorby/app.js:13:16)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.runMain (module.js:604:10)
at run (bootstrap_node.js:394:7)
at startup (bootstrap_node.js:149:9)
at bootstrap_node.js:509:3
Your app is expecting to find a file at /home/embah/node/nodeapp/config/config.json but that file does not exist (which is what ENOENT means). So you either need to create the expected directory structure or else configure your application such that it looks in the correct directory for config.json.
After going through so many links and threads and getting frustrated over and over again, I went to the basics and boom! it helped. I simply did:
npm install
I don't know, but it might help someone :)
Regarding:
92% additional asset processing scripts-webpack-plugin× 「wdm」: Error: ENOENT: no such file or directory, open....
If anyone faced to such an error, you should do followings:
you should check if the file path is correct in the angular.json file.
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.js"
],
you should press Ctrl + C and rerun the project.
olleh's answer worked, because npm install will create a node_modules directory in the current path where it is executed. So, while using the file server system module, the below declaration locate files from the top level directory of node_modules.
const fs = require('fs')
In my case the issue was caused by using a file path starting at the directory where the script was executing rather than at the root of the project.
My directory stucture was like this:
projectfolder/
├── package.json
├── scriptFolder/
│ ├── myScript.js
And I was calling fs.createReadStream('users.csv') instead of the correct fs.createReadStream('scriptFolder/users.csv')
If you have the same error while using Express.js in your project this worked for me:
In my project, when I ran an Express.js application, I noticed that the current working directory was the root directory of the project (while I was trying to read a file that was located in the script's directory).
It could not run the file since process.cwd() !== __dirname.
You can check it out and console log process.cwd() in the script you are trying to read the JSON file with.
I just changed the path to:
const fs = require('fs');
fs.readFileSync(`${__dirname}\\FILENAME`);
I also had this issue, because I had another console window open that was running the application and I was attempting to rerun yarn start in another console window.
The first Yarn executing prevented the second from writing. So I just killed the first process and it worked.
In my case, the issue occurred after I switched from a Git branch to another, references to some old files remained in the scripts inside the "node_modules/.cache" directory.
Deleting the "node_modules", "build" directories and "package-lock.json" file and then issuing the "npm install" command has fixed the issue for me.
I solved this error by simply creating a blank file at that location for which I got the error. If you are getting the error for a directory, you can try by also creating an empty directory.
If there isn't any layout folder, just use it like this in your routing:
app.get('/', (req, res) => {
res.render('something', { layout: false });
})
Here change something with your folder name.
I was facing this issue with ng-package.json file, while creating a plugin. I found out I was providing the wrong path in angular.json. Fixed my file path, issue was resolved.
May be helpful for someone.
Make sure your angular.json file has the "style" and "scripts" array as below (for Angular 12 and above):
"styles": [
"src/styles.css",
"./node_modules/bootstrap/dist/css/bootstrap.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.js"
]
Once this is done, press Ctrl + C and then ng serve.
I don't know if anyone would see this, but I'll say my answer.
First you need to be in the app directory that you created with the following command:
npx create-react-app [app-name]
Next run:
sudo npm install
to make it install all dependencies from
package.json
Then run:
sudo npm start
and make sure to run them with the sudo command, because sometimes it is absolutely necessary.
I added the PM2_HOME environment variable on the system level and now it works all right.
Running
npm run scss
npm run start
in that order in the terminal solved the issue for me.
If you're coding with TypeScript, remember that the transpiled-JS folder is where JavaScript would be searching for your file and will definitely not be able to find your html-file; hence such error.
Therefore, you'd need to copy the file into the transpiledJS folder for it to be located.
This is a helpful link on the multer GitHub page.
But for me, I also have to create a public folder in the server folder. It's like -cb(null,'public/').
Sometimes you see this issue in the following scenario.
Let's assume that you have a folder structure like node-projects (folder) → my-blog (folder) → my-blog (folder where the actual project exists), but you are in the my-blog directly, and it is an immediate child of node-project. Try to run your command in that directory.
As the project is present in my-blog that is an immediate child of my-blog. So, in this case, it searches your config.json file in my-blog (which is an immediate child of node-projects) rather than finding the config.json file in my-blog that is an immediate child of my-blog.
Just transfer your directory by hitting the command cd my-blog in your terminal and that's it. The problem is resolved!
Weirdly, in my project, I always get this error first time I add/remove a package, but then I run the same command again and it works on the second run.
My mistake was not adding / before the path. Correct path: /Users/mee/Documents/file_name.jpg
I had a Node.js version mismatch. Installing the right version of Node.js via nvm worked.
I had this error while uninstalling Bootstrap from the project, so I just deleted the script and style from file angular.json.
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js"
]
Cleared this to
"styles" : [ ],
"scripts" : [ ]
This solved my issue.
I work with Visual Studio Code, Git and Nx and often have the problem that Visual Studio Code performs an auto staging.
In combination with Nx, it comes very often to problems. Simply unstaging the files in Visual Studio Code often helps.
In my case
import { Object } from '../config/env';
gave me the error.
I solved it with change the address like this:
import { Object } from './../config/env';
It’s happened with me. I deleted some CSS files by mistake and then copied back. This error appeared at that time. So I restarted all my Docker images and other servers and then it went away.
I tried something and got this error:
Error: ENOENT: no such file or directory, open 'D:\Website\Nodemailer\Nodemailer-application\views\layouts\main.handlebars'
The fix I got was to literally construct the directory as it is seen. This means labeling the items exactly as shown. It is weird that I gave the computer what it wanted.

Resources