I am successfully using moment.js in my client-side JavaScript component built with typescript and webpack. Here are the versions of the components I am using:
"dependencies": {
"circular-dependency-plugin": "^5.2.2",
"ignore-loader": "^0.1.2",
"moment": "^2.29.1",
"moment-locales-webpack-plugin": "^1.2.0",
"ts-loader": "^9.2.3",
"typescript": "^4.3.5",
"webpack": "^5.45.1",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^4.0.0-beta.3"
}
To add Persian culture to my setup as shown in this example, I needed to include the following code:
import * as moment from "moment";
import "moment/locale/fa";
console.log(moment.locale()); // en
moment.locale("fa");
console.log(moment.locale()); // should be fa
However, I am currently experiencing an error which you can see here: https://i.sstatic.net/0rzpc.png
I suspect that webpack's extra processing of .js files and simulating the require() method might be causing this issue. I have searched for similar questions but haven't found any useful answers. Can someone help me identify the problem and configure webpack to resolve it?
UPDATE:
After spending hours going through my code, I discovered a temporary solution by changing the path from ../moment to moment in the related .js setting file for languages like Persian, as seen here: https://i.sstatic.net/HybUF.png
This workaround is not ideal, so I am seeking advice on how to solve this without modifying the moment source code. Perhaps tweaking path routing in tsc or webpack configuration could help. Any suggestions would be appreciated. Thank you.