Require packge.json and readline errors with webpack

[skinofstars]

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

[slobak]

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?

[skinofstars]

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

[slobak]

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.

[brianhv]

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

[brianhv]

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...

[rlucha]

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

 node: { readline: 'empty' } 

[jonathan-dejong]

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.