Module not found: Error: Can't resolve '../moment' with Webpack and TypeScript

[pmwmedia]

Describe the bug

If I try to compile my TypeScript app with webpack, I get an error for each locale that '../moment' can't be resolved.

This error is repeated for every other locale:

ERROR in ./node_modules/moment/locale/km.js
Module not found: Error: Can't resolve '../moment' in 'C:\PROGS\dev\var\private\moment-test\node_modules\moment\locale'
 @ ./node_modules/moment/locale/km.js 5:50-70
 @ ./node_modules/moment/locale sync ^\.\/.*$
 @ ./node_modules/moment/moment.js
 @ ./src/app.ts

To Reproduce

src/app.ts

import * as moment from "moment";
console.log(moment().format("YYYY"));

package.json

{
	"private": true,
	"dependencies": {
		"moment": "2.23.0"
	},
	"devDependencies": {
		"awesome-typescript-loader": "5.2.1",
		"typescript": "3.2.2",
		"webpack": "4.28.3",
		"webpack-cli": "3.2.1"
	}
}

tsconfig.json

{ "include": [ "./src/" ] }

webpack.config.js

module.exports = {
    entry: "./src/app.ts",
    output: { filename: "bundle.js" },
    resolve: { extensions: [".ts"] },
    module: { rules: [ { test: /\.ts$/, use: { loader: "awesome-typescript-loader" } } ] }
}

Expected behavior

yarn run webpack -p should work without any error.

Moment-specific environment

• Windows 10
• Node 10.15.0
• moment 2.23.0
• TypeScript 3.2.2
• Webpack 4.28.3
• Time zone: CET (UTC+1)

Please run the following code in your environment and include the output:

console.log((new Date()).toString())
console.log((new Date()).toLocaleString())
console.log((new Date()).getTimezoneOffset())
console.log(navigator.userAgent)
console.log(moment.version)

This code fails with the same errors!

[marwahaha]

Thanks for opening this request.
This is a great question for Stack Overflow.

[pmwmedia]

This is a bug, isn't it? Stack Overflow is good for question, but nobody will fix bugs there.

I interpret your answer to mean that you do not support WebPack with TypeScript. Too bad!

[marwahaha]

There are various tutorials on the internet about using Moment with Webpack and TypeScript. It seems that many others use them together just fine. If more people have this issue, and there is enough community knowledge to fix it, then we can try to do so.

[gary-archer]

I had the same problem by the way - seems to be caused by moment locales, which I didn't care about. I found a solution in this online article, which was good enough in my case, to ignore the locales plugin:

plugins: [
new webpack.IgnorePlugin(/^./locale$/, /moment$/)
]

This seems like a pretty mainstream usage scenario, so I'd recommend linking to the above page from the TypeScript section of the docs.

[marwahaha]

@authguidance-examples PRs are welcome at https://github.com/moment/momentjs.com !

[sanjayyadav19]

I was facing the same issue, here was the issue-

• I installed it using customised command npm i --save react-moment, which just got added in package.json file but lib was not there in node_modules, so to do so I execute
• npm install --save moment react-moment
• and now it is working as expected.

[adrihle]

anyone know why always show like "a few seconds ago"? whatever the date is it

[emidsnithin]

i added the moment in reactjs : import * as moment from "moment"; and in the dependecy injection added : "moment": "2.23.0", but getting the

undefined error... in reactjs,
Kindly help...

[chiefkana]

Why isn't this branch closed? Last comment on December 2nd, 2019. @marwahaha