Cannot read config.json correctly (TypeScript, Webpack)

Question

UPDATE: the issue is fixed by this PR

Be ware of that the reason that the problem comes out and normal pure JavaScript ways cannot solve it could be because that server.ts is using TypeScript and Webpack. Check Gant's answer. And track this issue on github.

I am using angular/universal-starter as starter. I have a file config.json

{
  "api": "123"
}

When I read config in server.ts:

import * as config from '../config.json';
// const config = require('../config.json');  will be same result
console.log(config);

It shows this in the terminal:

{
  "api": "123"
}

However, when I try to read config.api in server.ts:

import * as config from '../config.json';
// const config = require('../config.json');  will be same result
console.log(config.api);

It shows undefined.

This is my folder structure (other part same like angular/universal-starter).

my-app
  - config.json
  + src
    - server.ts

And when I launch the app, I use npm start.

What may cause this? Thanks

import config from './config.json';. If its in node, you can just require it. const config = require('./config.json'). — Swaraj Giri
– Swaraj Giri, Commented Aug 17, 2016 at 14:22
@SwarajGiri then both console.log(config); and console.log(config.api); will show undefined — Hongbo Miao
– Hongbo Miao, Commented Aug 17, 2016 at 14:24
I don't see any files named config.json in that repository. — Skam
– Skam, Commented Aug 17, 2016 at 14:29
Are you using a relative or absolute path? Can you share what your file structure looks like? — Skam
– Skam, Commented Aug 17, 2016 at 14:31

Aurelia · Accepted Answer · 2016-08-17 15:32:16Z

3

Your configuration file is inlined by webpack, so it follows the ES6 module spec and returns the JSON as a string and not an object as you'd expect from Node.

Is there a reason you build the server with webpack in the first place?

answered Aug 17, 2016 at 15:32

Aurelia

1,0626 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Hongbo Miao Over a year ago

Hmm, no specific reason, just because official angular/universal-starter uses it, so I just use it directly to quick start

Hongbo Miao Over a year ago

thanks! I also aware of that console.log(config); returns a string instead of a json actually! That is why I tried JSON.parse and then it works

Aurelia Over a year ago

@HongboMiao it's a really weird thing to do. It breaks some assumptions you can make about running under node and adds compile time for something that doesn't need to be bundled (just compiled). I'll see if I can get an issue up later.

Hongbo Miao Over a year ago

that is a point! maybe you can help create an issue on github.com/angular/universal-starter to avoid people meet problems in the future?

John Siu · Accepted Answer · 2016-08-18 08:45:50Z

1

Method 1 is wrong as it does not match the question configuration. The webpack configuration in question use raw-loader for json file, while this answer is using json-loader.

Use the method 2

Both methods tested with nodejs + webpack.

Method 1

var config = require(__dirname + '/config.json');
console.log(config['api']);

Method 2

var config = JSON.parse(fs.readFileSync(__dirname + '/config.json', 'utf8'));
console.log(config.api);

edited Aug 18, 2016 at 8:45

answered Aug 17, 2016 at 16:15

John Siu

5,1042 gold badges29 silver badges49 bronze badges

2 Comments

Aurelia Over a year ago

The first one doesn't work because the boilerplate uses loader-raw for JSON files.

John Siu Over a year ago

@Gant You are right, I didn't clone to the repo and was using my own webpack config which use json-loader. My bad.

Hongbo Miao · Accepted Answer · 2016-09-20 03:59:00Z

1

UPDATE: the issue is fixed by this PR

Be ware of that the reason that the problem comes out and normal pure JavaScript ways cannot solve it could be because that server.ts is using TypeScript and Webpack. Check Gant's answer. And track this issue on github.

I found the problem:

import * as config from '../config.json';
// const config = require('../config.json'); also works


const json = JSON.parse(config);  // <- need this line
console.log(json.api);  // 123

edited Sep 20, 2016 at 3:59

answered Aug 17, 2016 at 15:10

Hongbo Miao

50.7k68 gold badges204 silver badges336 bronze badges

4 Comments

Amin Shah Gilani Over a year ago

I'd considered that but that shouldn't have been true in JS. Maybe it's Typescript thing. Please add the Typescript tag to your question. And make the title more descriptive, e.g. "Cannot parse JSON file in TypeScript" to avoid more downvotes.

Hongbo Miao Over a year ago

@amingilani oh, you got it, I think that is why this problem happens!

Aurelia Over a year ago

@amingilani see my response, the boilerplate uses webpack to compile the server and the module loader for typescript automatically inlines the JSON, so you get the ES6 behavior. The node require is never actually used.

John Siu Over a year ago

@HongboMiao require works, but need to use string index. you can check my answer.

Collectives™ on Stack Overflow

Cannot read config.json correctly (TypeScript, Webpack)

3 Answers 3

4 Comments

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related