Consider documenting required webpack configuration about libphonenumber-js

[rponnuru0518]

Hey Guys, I am trying to use libphonenumber-js in my angular application with webpack 2.2.1, I installed libphonenumber-js through npm and then imported "import { parser, format, asYouType } from 'libphonenumber-js';"
I get an error message saying cannot find module 'libphonenumber-js'
Any ideas? I am I missing any steps?

[aaugustin]

I think it's config.module.loaders in webpack1, config.module.rules in webpack2.

I had to change my extensions setting because I overrode the default with ['.js', '.jsx', '.css', '.sass'] -- I didn't include '.json' because I didn't need it until I faced an error when trying to use libphonenumbers-js

BTW thanks for a great alternative to Google's library :-)

[aaugustin]

To be honest I'm not an expert with webpack and I'm not sure what happens exactly.

I followed your (very standard) instructions:

npm install libphonenumber-js --save

import { asYouType } from 'libphonenumber-js'

and I was surprised to see my build crash.

The error most likely originates at this line in node_modules/libphonenumber-js/build/as you type.js:

var _metadata = require('../metadata.min');

I was easy enough to debug. I thought I'd report it in case you wanted to document the requirements in order to save other users some trouble. No big deal either way :-)

---

EDIT: will that line work with bundlers other than webpack? perhaps there's in fact a build problem?

[aaugustin]

I'm sorry if I'm being thick — we can stop this discussion if it isn't interesting for you; I have solved my problem; I'm just trying to understand.

In case you're still with me... as far as I can tell:

• node_modules/libphonenumber-js/package.json says: "main": "index.common.js"
• node_modules/libphonenumber-js/index.common.js says: exports.asYouType = require('./build/as you type').default
• node_modules/libphonenumber-js/build/as you type.js says: var _metadata = require('../metadata.min')

How I could that work without having something (webpack in my case) take these files inside node_modules, convert require calls into something that browsers can handle, including require('../metadata.min')?

The latter seems to require webpack with some options, which are enabled by default.

My config excludes node_modules from babel-loader. However I don't think that's relevant here.

I can't comment on how many users override extensions or whether they know what they are doing. FWIW some popular boilerplates do that and omit .json. But, yeah, anecdote, not data :-)

[aaugustin]

We're in agreement :-)

[catamphetamine]

Did you mean module.config.loaders instead of config.module.rules?
config.resolve.extensions doesn't need to be set, it has json by default:
webpack/webpack.js.org#68

[catamphetamine]

Oh, so webpack 2 conflicts with webpack 1.
I guess then the project will stick with webpack 1 until webpack 2 is released.

[catamphetamine]

Oh, I get it now, you're bundling it with Webpack and json loader is required.
Yes, I guess I will specify the default .json extension then, and after that it should be working.
And as for json loader, I think webpack should enable it by default (that would be logical).

[catamphetamine]

Anyway, I don't know how your Webpack even made it into /node_modules/ folder.
Didn't you exclude /node_modules/ from your js-loader config?

[catamphetamine]

Ok, I think, this is gonna be the answer:

• By overriding the default extensions you take the responsibility of including .json there, so it's not a bug, it's intended to work that way
• Webpack team should have enabled json-loader by default for .json files. If they chose to impose that responsibility on Webpack users then there's nothing to be done here.

[catamphetamine]

The users most likely won't have any trouble because most of the users don't override extensions, and those who do must understand exactly what they're doing, so your case is very rare.
Also, the fact that Webpack even parses node_modules folder is also very rare and I don't know why didn't you exclude node_modules from babel-loader.

[catamphetamine]

I'm open to any discussion which can clarify bugs or inconveniences, especially if those are inside my code.
Ok, I get it, seems that Webpack actually needs that json-loader to process json files correctly.
webpack/webpack#965
But, I think it's Webpack's bug rather than something that needs to be changed in this repo.
The Node.js convention is that .js and .json requires are always valid so Webpack team should do something about that.
The popular boilerplates may be "popular" which doesn't imply "correct", so if they exclude .json then it means they're wrong.

[catamphetamine]

Webpack is a neccessary and irreplaceable tool ("this city needed a hero") and a giant piece of work for a single developer which is kinda cool that @sokra managed to pull it off all by himself just for fun.
At the same time Webpack lacks a lot in terms of user-friendliness, usability and sensible defaults.
But since Webpack Foundation has been formed recently, I think they'll get it right eventually.
Consider it the first try which is almost always discarded to later be rebuilt properly from scratch.

[catamphetamine]

@aaugustin Ok, I added the notes for Webpack since this is likely a common case. Have a look if the notes are correct and exhaustive.

[aaugustin]

Great! Thanks!