Next JS Cannot resolve fs when running npm run build - node.js

I have created a web application using Next JS which runs fine with npm run dev. But when I tried to run it in production mode with npm run build, I get the errors given below. I have tried changing the permissions of node_modules directory, running npm install, trying to update NodeJS and NPM however nothing works. I could not find much about this on the internet as well.
> html#0.1.0 build /var/www/app/html
> next build
Creating an optimized production build
Failed to compile.
./node_modules/mysql/lib/protocol/sequences/Query.js
Module not found: Can't resolve 'fs' in '/var/www/app/html/node_modules/mysql/lib/protocol/sequences'
> Build error occurred
Error: > Build failed because of webpack errors
at build (/var/www/app/html/node_modules/next/dist/build/index.js:13:917)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! html#0.1.0 build: `next build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the html#0.1.0 build script.
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! /root/.npm/_logs/2020-08-14T04_54_38_531Z-debug.log

I have finally found the solution and my problem has been fixed. This error was showing up because there were some serverless-mysql DB files in the pages directory and the error disappeared after I moved those non-page files outside of the pages directory.
Source: https://github.com/vercel/next.js/issues/9768#issuecomment-663835978

Related

NextJS not running on MacOS even after installing modules

So I've just created a NextJS project using create-next-app which went smoothly as expected. Then ran npm i just to be sure and saw all modules installed into node_modules
When I try to run npm run dev to start my nextjs app. it just says
sh: next: command not found
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! test#0.1.0 dev: `next dev`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the test#0.1.0 dev script.
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! /Users/john.v.n.pakson/.npm/_logs/2022-10-06T08_01_29_725Z-debug.log
It seems like npm is not detecting the node_modules i have installed.
Not sure if this is a mac or a zsh issue.
I'm using node version 12.22.12
Upgraded to 16.17.1 and still see the same error
> test#0.1.0 dev
> next dev
/var/folders/6y/xtlzp4z16dj0stxnqx8znj8w0000gn/T/dev-01c08137.sh: line 1: next: command not found
Okay I figured it out. It was caused by my file path on macos. My project was on a folder called Project/Test which might have confused zsh or mac. This in turn caused npm to not be able to find the correct scripts on my node_modules
When I moved my project to another folder I was already able to run npm run dev properly.
Cheers!

NPM run dev error after requiring Tailwind CSS

I'm just dipping my toes into using Laravel for the first time, and I've had many issues so far. I've figured them out myself so far, but this one is driving me crazy!
After adding the line require('tailwindcss') in my webpack.mix.js file, I keep getting the following error when I run.
npm run dev
✖ Mix
Compiled with some errors in 452.52ms
ERROR in ./resources/css/app.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: Cannot read property 'config' of undefined
at getTailwindConfig (/home/timothy/blog/node_modules/tailwindcss/lib/lib/setupTrackingContext.js:81:62)
at /home/timothy/blog/node_modules/tailwindcss/lib/lib/setupTrackingContext.js:124:92
at /home/timothy/blog/node_modules/tailwindcss/lib/processTailwindFeatures.js:41:11
at plugins (/home/timothy/blog/node_modules/tailwindcss/lib/index.js:20:104)
at LazyResult.runOnRoot (/home/timothy/blog/node_modules/postcss/lib/lazy-result.js:339:16)
at LazyResult.runAsync (/home/timothy/blog/node_modules/postcss/lib/lazy-result.js:393:26)
at LazyResult.async (/home/timothy/blog/node_modules/postcss/lib/lazy-result.js:221:30)
at LazyResult.then (/home/timothy/blog/node_modules/postcss/lib/lazy-result.js:206:17)
at processResult (/home/timothy/blog/node_modules/webpack/lib/NormalModule.js:751:19)
at /home/timothy/blog/node_modules/webpack/lib/NormalModule.js:853:5
at /home/timothy/blog/node_modules/loader-runner/lib/LoaderRunner.js:399:11
at /home/timothy/blog/node_modules/loader-runner/lib/LoaderRunner.js:251:18
at context.callback (/home/timothy/blog/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
at Object.loader (/home/timothy/blog/node_modules/postcss-loader/dist/index.js:142:7)
1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack compiled with 2 errors
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! # development: `mix`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the # development script.
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! /home/timothy/.npm/_logs/2022-01-18T04_24_37_451Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! # dev: `npm run development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the # dev script.
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! /home/timothy/.npm/_logs/2022-01-18T04_24_37_460Z-debug.log
I've looked into my version of Node.js and PostCSS being an issue, as my version of node.js has been an issue that caused other problems I've had so far, but those two seem fine. If it matters, this is a Laravel project created with Composer on Ubuntu 20.04 with Laravel installer 4.2.9.
Just run this comman. Tailwind config file is missing.
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

npm cannot find index.html when launching REACT front end

The problem occurs when I try to launch the front end of the app. I do this from within the frontend directory with the command: npm start. It is a MERN stack application. I am using git for version control. Others with access to the git can run npm start with no problems on their machines, so I think the problem could be related to the windows file or path systems, but haven't been able to find out.
The error given:
Could not find a required file.
Name: index.html
Searched in: C:\Users\Liam\OneDrive\Desktop\COP4935\Project\DemocracyToken\public
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! frontend#0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the frontend#0.1.0 start script.
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! C:\Users\Liam\AppData\Roaming\npm-cache\_logs\2021-09-03T17_01_09_900Z-debug.log
npm appears to be trying to access the public directory from the project root (DemocracyToken) when the public directory is located in DemocracyToken/frontend/
I have tried:
rerunning npm install,
uninstalling and reinstalling node,
moving the location of the public folder,
and moving the location of index.html.
Here is the file structure of our app:

angular SSR using #nguniversal/express-engine package get this error (ERROR in error TS6053: File '/project/src/server.ngtypecheck.ts' not found.)

I am using #nguniversal/express-engine to Server Side Rendering in angular.When I run $ nmp build:ssr or $ npm run dev:ssr i get this error.
ERROR in error TS6053: File 'C:/dev/web/workspace/project/src/server.ngtypecheck.ts' not found.
error TS6053: File 'C:/dev/web/workspace/project/src/server.ts' not found.
error TS6053: File 'C:/dev/web/workspace/project/src/src/main.server.ngtypecheck.ts' not found.
error TS6053: File 'C:/dev/web/workspace/project/src/src/main.server.ts' not found.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! client#0.0.0 build:ssr: `ng build --prod && ng run client:server:production`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the client#0.0.0 build:ssr script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
Had the same issue, the doubling-up of src/src is occurring from tsconfig.server.json. I encountered this error running build:ssr for Angular, the solution as described here: npm run build:ssr does not work in angular 8 is quite simple. We need to edit the src/tsconfig.server.json.
I had to make two changes; both were described in that solution.
Navigate to src/tsconfig.server.json
Change src/main.server.ts to main.server.ts,
Change server.ts to ../server.ts.
Props to the other thread for the solution really,

Parcel command not found

In my project, I use Parcel to bundle everything. Now, I am at the point where I need to deploy my app.
I clone my git repo with my React app and I put in the Node server.
I tried every command possible to install parcel, but I always get the following error :
> pp-react#0.1.0 build /home/volodymk/react
> parcel build index.html
sh: parcel: command not found
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! pp-react#0.1.0 build: `parcel build index.html`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the pp-react#0.1.0 build script.
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! /home/volodymk/.npm/_logs/2020-01-12T19_26_22_634Z-debug.log
How can I fix this ?
To run any installed node package (not just Parcel), use npx, the utility command shipped with npm. It executes packages that come with a runtime command in your node_modules/packagename/.bin directories.
As in npx parcel build index.html
More information available in the npx readme.

Resources