webpack: Re-exported JSON imports are undefined

Do you want to request a feature or report a bug? Bug

What is the current behavior? I have a module that imports some JSON objects and re-exports them as named exports, e.g.:

import someJson1 from './some-json-1';
import someJson2 from './some-json-2';

export {
  someJson1,
  someJson2
};

Then when I import these exports in another module they are undefined, e.g.:

import { someJson1, someJson2 } from 'jsonModule';

someJson1 and someJson2 are now undefined.

However, the two imports are valid within the jsonModule, and if I copy them to local variables and then export those then it does work, e.g.:

import someJson1_ from './some-json-1';
import someJson2_ from './some-json-2';

const someJson1 = someJson1_;
const someJson2 = someJson2_;

export {
  someJson1,
  someJson2
};

Now when I import these exports in an other module (as above) they are no longer undefined.

If the current behavior is a bug, please provide the steps to reproduce. See current behaviour above

What is the expected behavior? I expect imported JSON should be able to be re-exported without it being undefined, and without having to copy the imports before re-exporting them.

Please mention other relevant information such as the browser version, Node.js version, webpack version, and Operating System. webpack@^4.1.0 macOS 10.13.3 (17D102) node v9.7.1

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 3
Comments: 31 (14 by maintainers)

Commits related to this issue

handle reexporting json default export correctly fixes #6700 — committed to webpack/webpack by sokra 6 years ago

Most upvoted comments

I can confirm that this is a bug

sokra on Mar 8, 2018

a.json

{
   "nameA": "A"
}

b.json

{
   "nameB": "B"
}

export.js

export * from './a.json'
export * from './b.json'

import.js

import * as ns from './x.js' ✅ 
import { nameA, nameB } from './x.js' ✅ 
import { a, b } from './x.js' ❌ 

console.log(nameA, nameB)
// => 'A', 'B'
console.log(ns.nameA, ns.nameB)
// => 'A', 'B'

Otherwise you need to reassign it

export.js

import a from './a.json'
import b from './b.json'

const c = Object.assign({}, a, b)

export default c

import.js

import c from './c.js' ✅ 
import { nameA, nameB } from './c.js' ❌ 

console.log(c)
// => { nameA: '', nameB: '' } {Object}

ES Modules (especially export) syntax is very weird… 😛

michael-ciniawsky on Mar 7, 2018

Is the bug related to the fact that what I was attempting works in production mode, or that it doesn’t work in development mode?

afhole on Mar 9, 2018

OK I have a working repro: https://github.com/afhole/webpack-6700

The issue seems to occur when using babel-loader to load the .js files - I have have excluded the json.js file from babel-loader to match my production repo (the JSON module I am using is used as an NPM dependency)

afhole on Mar 8, 2018

You need to reassign an ImportSpecifier since they are (live) bindings (in theory)

x.js

export { a } from './some.json'
export { b } from './other.json'

import { a, b } from './x.js'

should work

michael-ciniawsky on Mar 7, 2018