Error: Cannot find module; Typescript error in react project - node.js

I have a .js file called load_routes.js file in the node_express folder. This load_routes.js file loads all my routes for the project. I have a package.json file in which the load_routes.js is used to load the routes. So, this part was working fine, until I changed the file extension of load_routes.js file to .ts file. I started getting
Error: Cannot find module '/*****/***/****/****/****/node_express/load_routes.ts'
I have not changed the location of the files. And the node_express folder is a sibling or present at the same level as that of package.json file.
package.json file:
"scripts": {
"build": "react-scripts build && echo \"const version='$(git rev-parse HEAD)'; module.exports=version\" > ./node_express/version/release-version.js",
"eject": "react-scripts eject",
"server": "NODE_ENV=localhost PORT=**** node --max-http-header-size 81000 ./node_express/load_routes.ts",
"start": "react-scripts start",
},
Can someone help me with this. The file load_routes.ts is for sure there. The path to that file seems correct as it worked when it was a .js file. Why do I get this error? I am stuck on this for quite some time. Any help would be appreciated.

Don't specify the file extension at all. The require call will figure out the right file automatically.

Related

NextJs vercel deployment error "routes-manifest.json" couldn't be found

My nextjs app was working properly I added some files to update my code now it is not deploying my app on vercel. gives this error
I tried googling the error but my case in unique.
This is the git repo
https://github.com/usman-174/google-calendar-frontend
These are my script tags from package.json
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start",
"export": "next export",
"lint": "next lint",
"lint-fix": "next lint --fix"
},
next.config.js
module.exports = {
distDir: 'build',
}
I also ran into this error because the root directory of my app was not in the top-level directory of my Git repository, so Vercel was unable to find the .next folder.
I fixed it by going to the Vercel dashboard for my Vercel project, then -> Settings -> General and setting Root Directory to the subdirectory path to my application:
Issue was we were using 'latest' in package.json for next version. I fixed it to previous version of nextjs which is 12.3.1 for us seems to have fixed the deployment for now.
But still waiting for vercel support for best way to update nextjs version in deployment for vercel or is it some sort of bug their end.
Run npm run build (check all files in builded folder)
Create .next folder and move all files from build folder to .next
Commit your .next folder to vercel or maybe git.
In my case, make sure please if the folder within the project is called "web", the json name inside should be "web"!
In my case I had a few errors in my files
Error: `'` can be escaped with `'`, `‘`, `'`, `’`. react/no-unescaped-entities
Which were being hidden in the Vercel build log because I forgot I had the following in next.config.js
eslint: {
ignoreDuringBuilds: true,
}
Which just showed me the error you have instead of the actual reason it failed.
Enabling eslint indirectly solved my issue as it led me to find the real error.
Overriding the build folder fixed my issue.

Nodemon Creating a dist folder on save

I am using nodemon in a straight forward express app, something has recently happened and every-time I save a child file in a folder, a dist folder is created and a child file created with the same name - with the addition of .dev. in the filename.
As far as I understand a dist file is created only once I finally compile the app for production - not when in development?
How can I stop the dist file from getting created each time I save?
My package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "nodemon index.js"
},
i.e
Before Save
- routes
- tests.route.js
After Save
- routes
- dist
- tests.route.dev.js
- tests.route.js
I was using a plugin called: Sass/Less/Typescript/Jade/Pug Compile Hero Plugin with VScode, it was creating a new dist file on every save.
I followed this to fix it: Vs code create folder automatically with (dist) name - Basically you want to uninstall the plugin.
For fixing it I follow these steps Given bellow and it is solved:-
Click on Extensions button of VS Code or press Ctrl+Shift+X.
Search for Hero Extension which shown bellow.
Click on Disable.
Click on Reloade.

Node.js tests failing on toLocaleString

Good morning,
I have a native js Date object, that I render in to my component with .toLocaleString("en-GB")
In the browser I get 29/12/2021, 09:00:00; however when I run a unit test with react-testing-library and jest:
expect(screen.getByText("29/12/2021, 09:00:00")).toBeInTheDocument();
The assertion fails because the locale date has been output as 2021-12-29T09:00:00.000Z
I have found the following ticket, https://github.com/nodejs/node/issues/8500 which says I need to build it with --with-intl=full-icu or --with-intl=system-icu, and I have also referred to the documentation at https://nodejs.org/docs/latest-v10.x/api/intl.html#.
I have tried adding this to my package.json under scripts as :
"start": "react-scripts start --with-intl=full-icu",
"build": "react-scripts build --with-intl=full-icu",
"test": "react-scripts test --with-intl=full-icu"
But when I do npm run test while I see it on the executed command it doesn't make a difference.
I am using node v10.16.0.
How can I get node to honour .toLocaleString("en-GB") when running tests, please?
Thank you.

Run create-react-app in a certain browser

Is it possible to launch create-react-app App in a certain browser of my choice? Currently, it always runs in the Chrome while I want it to do that in the Chrome Canary. Does anybody know?
You can use BROWSER environment variable to set which browser you wanna open the app in. For example,
BROWSER=firefox yarn start
or
BROWSER=firefox npm start
will open the app in firefox.
So, you can put something like this in your package.json
"scripts": {
"start": "BROWSER=firefox react-scripts start",
"build": "react-scripts build && sw-precache --config=sw-precache-config.js",
"test": "react-scripts test --env=jsdom",
You can read more about it in this pull request thread
With current iterations of create-react-app this can be accomplished by adding a .env file to the project with a "BROWSER" key. It's described in the Advanced Configuration section of the documentation.
If you want to use Google Chrome Canary for your development browser (as I do) then you'll need to create that .env file in the root of the project with the following contents:
# Override default browser for npm start in react-script
BROWSER=Google Chrome Canary
Be sure you don't get overzealous and quote it or add a semi-colon at the end. I did both and scratched my head at first why it didn't work.
You can use .env file with BROWSER=firefox
https://create-react-app.dev/docs/advanced-configuration/
This worked for me:
Set Chrome Canary as default browser in PowerShell (choose the right path first)
$chromePath = "${Env:ProgramFiles(x86)}\Google\Chrome\Application\"
$chromeApp = "chrome.exe"
$chromeCommandArgs = "--make-default-browser"
& "$chromePath$chromeApp" $chromeCommandArgs
(answer from)
https://stackoverflow.com/a/17536704/11878186
Set variable BROWSER=Chrome in .env file in root directory

Does nodejitsu support makefile functionality?

For example, if your package.json file contains:
"scripts": {
"start": "make start",
"test": "make test",
}
^ Will nodejitsu be able to parse and implement "make start"?
If the server.js file contains the static file path of the following directory then only the makefile functionality will work.
Nodejitsu should parse this just fine. Just be sure that you are calling node <app file>.js in your Makefile somewhere, or you change it to make start && node <app file.js>. Nodejitsu uses npm start to start your application, so the Makefile exiting without starting the app would cause the deployment to fail.

Resources