Require packge.json and readline errors with webpack

Hey.

We've been getting issues with using this webpack. Kinda came as a double error

ERROR in ./~/asana/package.json
Module parse failed: /Users/kevin/projects/.../node_modules/asana/package.json Line 2: Unexpected token :
You may need an appropriate loader to handle this file type.
| {
|   "_args": [
|     [
|       "asana",
 @ ./~/asana/index.js 7:18-43

ERROR in ./~/asana/lib/auth/native_flow.js
Module not found: Error: Cannot resolve module 'readline' in /Users/kevin/projects/.../node_modules/asana/lib/auth
 @ ./~/asana/lib/auth/native_flow.js 1:15-34

Resolution to the first was to add .json to our webpack resolve extensions config.

resolve: {
 extensions: ['', '.js', '.jsx', '.json', '.scss']
}

This is all because teh dispatcher.js does var VERSION = require('../package.json').version

Second was kinda weirder, we added to our webpack config

node: {
 readline: 'empty'
}

We've got it running now, but it was a bit of a pain.

Hope that helps someone

Thanks for alerting us to this. We could change the way we snag the version to be more webpack-friendly somehow, any ideas as to how to do this without duplicating the version value from the package.json into code somewhere?

Hmm, perhaps as part of you build step, you just write it to a file? I'd say have a look at the way others do it, like pouchdb has a release.sh https://github.com/pouchdb/pouchdb/blob/2be37213b03c5d5da1d79bf8b714dd8fba8c09d1/bin/release.sh

Seems like a reasonable idea, thanks. We have a gulp build file so that seems probably pretty easy to slip in. We'll put it on our list, though if you send us a PR for us to review/edit it might move faster.

I'm seeing these errors as well. The readline fix works, but adding .json to the resolve extensions list does not. I'm a complete webpack neophyte, so I'm not sure how to diagnose any further.

My error, since it's slightly different:

ERROR in ./~/asana/package.json
Module parse failed: /Users/brianhv/WebstormProjects/untitled/node_modules/asana/package.json Line 2: Unexpected token :
You may need an appropriate loader to handle this file type.
| {
|   "name": "asana",
|   "version": "0.14.1",
|   "description": "Official NodeJS and BrowserJS client for the Asana API",
 @ ./~/asana/index.js 7:18-43

After learning a little more about webpack, I was able to solve the json issue here. It was just a matter of using the json-loader. I added the following to my webpack config after installing json-loader.

    module: {
        loaders: [
            { test: /\.json$/, loader: 'json' }
        ]
    }

Might be obvious to others, but it took me a while to figure it out...

Sorry, why does adding the following code solve the issue? @skinofstars, did you figure it out?

 node: { readline: 'empty' } 

Thank you @skinofstars for this issue! I just started my first react project with asana and immediately ran into the readline issue. Adding it to node in the webpack config after an eject (cry) on build-react-app and it works.

@rlucha here's what build-react-app says in the comments: Some libraries import Node modules but don't use them in the browser. Tell Webpack to provide empty mocks for them so importing them works.