Problem with CSS module not found when deploying to vercel - next.js

This is the error log. And I cannot for the life of me fix this. everything works fine in dev but on deployment it fails. :(
23:12:53.687 Failed to compile.
23:12:53.687 ModuleNotFoundError: Module not found: Error: Can't resolve '../../styles/Homebody.module.css' in '/vercel/workpath0/components/Home'
23:12:53.687 > Build error occurred
23:12:53.688 Error: > Build failed because of webpack errors
23:12:53.688 at /vercel/workpath0/node_modules/next/dist/build/index.js:15:918
23:12:53.689 at runMicrotasks (<anonymous>)
23:12:53.689 at processTicksAndRejections (internal/process/task_queues.js:93:5)
23:12:53.689 at async /vercel/workpath0/node_modules/next/dist/build/tracer.js:3:470
23:12:53.704 npm ERR! code ELIFECYCLE
23:12:53.704 npm ERR! errno 1
23:12:53.707 npm ERR! next_front#0.1.0 build: `next build && next export`
23:12:53.707 npm ERR! Exit status 1
23:12:53.707 npm ERR!
23:12:53.707 npm ERR! Failed at the next_front#0.1.0 build script.
23:12:53.707 npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
23:12:53.714 npm ERR! A complete log of this run can be found in:
23:12:53.714 npm ERR! /vercel/.npm/_logs/2021-02-24T23_12_53_708Z-debug.log
23:12:53.719 Error: Command "npm run build" exited with 1

One thing is to start all .module.css files with a capital letter. Sometimes. however, you will still get the same error. To make matters worse, the error keeps occurring for varying .module.css files. So sometimes you will get A.module.css not found, and another time you get B.module.css not found.
I then deleted node_modules and ran npm i. No result; same error.
What did work for me was to make a new project with:
yarn create next-app
…and then add all the files from the old module one by one while redeploying the app each time to check it still works.
This isn't elegant, but it's fast enough and it does the trick.

This is an old question but I hope I can help someone in the future!
I was able to solve this issue by moving my CSS module file out of a subfolder into the root Styles folder.
Before:
-Styles
--Pages
---FileName.module.css
After:
-Styles
--FileName.module.css

Related

Cannot npn run sass

I am in folder C:\Users\borka\Desktop\Courses\HTML & CSS (Traversy)\Sandbox\13_sass, using a bash terminal in VSCode and npm version 6.14.8.
I have successfully run npm init -y and npm install node-sass, then edited the package.json file to contain "scripts": { "sass": "node-sass -w scss/ -o dist/css/ --recursive" }.
Then, I created a scss directory with main.scss inside, as well as a dist directory. And finally, I run npm run sass, but it fails and here's what I get:
> 13_sass#1.0.0 sass C:\Users\borka\Desktop\Courses\HTML & CSS (Traversy)\Sandbox\13_sass
> node-sass -w scss/ -o dist/css/ --recursive
'CSS' is not recognized as an internal or external command,
operable program or batch file.
internal/modules/cjs/loader.js:883
throw err;
^
Error: Cannot find module 'C:\Users\borka\Desktop\Courses\node-sass\bin\node-sass'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
at Function.Module._load (internal/modules/cjs/loader.js:725:27)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
at internal/main/run_main_module.js:17:47 {
code: 'MODULE_NOT_FOUND',
requireStack: []
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! 13_sass#1.0.0 sass: `node-sass -w scss/ -o dist/css/ --recursive`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the 13_sass#1.0.0 sass 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\borka\AppData\Roaming\npm-cache\_logs\2021-01-31T16_01_42_707Z-debug.log
Notice how the Error: Cannot find module line displays a totally wrong path, one that doesn't even exist.
I've never worked with sass before and I have no idea what the problem is.
I can't make a comment yet, but I think that the package you are looking for to compile your SASS into CSS is this one. I noticed your using node-sass instead of regular sass. You can install it by running:
npm install -g sass
To install it globally on your system, and then compile your SASS.
Try with the one I'm sharing, or, if your are using an IDE like VSCode, you can dowload an extension like Live Sass Compiler (that's the one I normally use).
Apparently the ampersand in the path was the cause. I removed it from folder name "HTML & CSS", and now everything's fine.

Unhandled JS Exception: Requiring unknown module "1"

How do I fix this error?
Unhandled JS Exception: Requiring unknown module "1". If you are sure the module exists, try restarting Metro. You may also want to run yarn or npm install.
I installed react-navigation, react-native-elements through npm when I believe the error occurred. So I uninstalled them and I still get the same error.
I also ran yarn and npm install
Here are my dependencies
"dependencies": {
"#react-native-firebase/app": "^8.2.0",
"#react-native-firebase/auth": "^8.2.0",
"react": "16.13.1",
"react-native": "0.63.0"
}
app.js and the error screen
hello you just need to put ctrl+c in your termial so you can stop the server
than tap
npm start
or
yarn start
You have some syntax error probably
Attach snippets of App.js and the exact error stack trace you are getting with screenshots if possible.
Setup your node_modules from scratch again
Execute these:
1. rm -r node_modules
2. rm package-lock.json
3. expo upgrade
4. npm start -c
And install your dependencies once again either with npm or yarn.
Note: Use any one (npm or yarn)

Why does my babel-chaining (&&) does not work?

I`m doing a tutorial on server-side-rendering with React/Express/Firebase.
This tutorial was created in 2017 and unfortunately, I struggle on the script section with babel in which I try to chain some commands.
Please take note that each command for itself works fine, but chaining them leads to the following error:
**Der Befehl "node_modules" ist entweder falsch geschrieben oder konnte nicht gefunden werden.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! nonssr#1.0.0 babel: babel src -d functions/src && node_modules/.bin/babel index.js -d
functions
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the nonssr#1.0.0 babel 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\Thorsten\AppData\Roaming\npm-cache_logs\2020-03-16T08_46_28_887Z-debug.log**
The script command is th following:
"scripts": {
"babel": "node_modules/.bin/babel src -d functions/src && node_modules/.bin/babel index.js -d functions"
},
Is there a general mistake in this line of code?
Do you need additional code to analyse the mistake?
Best regards!
I found the solution by myself, but maybe someone can explain why it is like it is.
This code works:
"scripts": {
"babel": "node_modules/.bin/babel src -d functions/src && babel index.js -d functions"
},
I had to remove the second "node_modules/.bin/babel ...", just typed in "babel ..."

Firebase Cloud Functions Invalid tag name "glob" error in my Command Line

I following this link to organize my firebase cloud functions and not have all my code in one index.ts file. However, when I'm running the line:
npm i -S glob, camelcase
in my console, it's retuning this:
npm ERR! code EINVALIDTAGNAME
npm ERR! Invalid tag name "glob,": Tags may not have any characters that encodeURIComponent encodes.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/johndoe/.npm/_logs/2018-12-24T19_46_03_264Z-debug.log
Use npm i glob camelcase instead. The comma is not correct here. The -S is not even a documented flag for npm (at least not on the man page for my installation).

Meteor NPM : Couldn't run `npm shrinkwrap`

I've looked high and low for how to fix this, couldn't figure it out.
Running a React - Meteor app, meteorhacks:npm and browserify.
Error:
While building package npm-container:
error: couldn't run `npm shrinkwrap`: Command failed: npm ERR! Error: Problems were encountered
npm ERR! Please correct and try again.
npm ERR! missing: react#^0.14.7, required by react-addons-transition-group#0.14.7
npm ERR! missing: react#^0.14.7, required by react-addons-update#0.14.7
npm ERR! missing: react#^0.14.7, required by react-addons-create-fragment#0.14.7
npm ERR! missing: react#^0.14.7, required by react-addons-pure-render-mixin#0.14.7
npm ERR! at shrinkwrap_
Packages.json
{
"externalify" : "0.1.0",
"react-tap-event-plugin": "0.2.2",
"react-mixin" : "3.0.3",
"material-ui" : "0.13.4",
"formsy-react" : "0.17.0",
"formsy-material-ui" : "0.3.3"
}
The strange thing though is I had this working, then once I tried updating from material-ui 0.13.4 to 0.14.4, the whole package stopped working. I then reverted back to 0.13.4 and the same error persisted. I've tried removing meteorhacks:npm and the npm-container folder, as well as clearing npm cache.
The error disappears if I downgrade material-ui to 0.13.1, though I'm still trying to fix as I need to upgrade to 0.14.
I finally solved it. The only way I found was to upgrade meteor to the 1.3 beta, which includes modules import, so I could remove npm-package.
There was a bit of refactoring, where you have to remove any packages which load react, import the relevant packages on every jsx file, and another small bug caused by material-ui (again) with npm (it loads react as well so you need to delete react folder from your_project/node_modules/material-ui/node_modules/react).

Resources