2

I'm seeing the following warning when building with Webpack v4 (using babel-loader for the JS files):

Warning in ./src/components/Foo
"export 'ADDENDUM' was not found in '../../types'
...

The import in ./src/components/Foo is:

import { ADDENDUM } from '../../types';

../../types:

import { each } from 'lodash';

export const typesDict = {
  ADDENDUM: 'addendum',
};

each(typesDict, (type, typeConstant) => {
    exports[typeConstant] = type;
});

This isn't causing a build error, just a warning. The warning is wrong though, since I am exporting ADDENDUM (though dynamically), and everything works as it should.

Is there a way for Webpack to handle these dynamic imports, or to at least turn off the warning? I'm upgrading from Webpack v1 right now, and v1 does not have this problem (or if it does, it's being hidden somehow).

Also please note: I do NOT want to silence all Webpack warnings, such as via the devServer config. I just want to silence this one type of warning.

Matthew Herbst
  • 29,477
  • 23
  • 85
  • 128

1 Answers1

0

Based on your ../../types file i assume your approach was to skip writing again the components in the exports object.

Instead of silencing the warning, try something simpler to fix the issue. Since you don't want to write twice the same names, take a look at my example.

No lodash is required, no loops are used and exported constants are written once.

../../types:

export const ADDENDUM = 'addendum';
export const ADDENDUM2 = 'addendum2';
export const ADDENDUM3 = 'addendum3';

That is all, no more dynamic imports, no more warnings.

UPDATE:

Your code is indeed valid, but when you use dynamic exports/imports, compilers/bundlers loose trace of your exports(in your case) since they don't check the contents of your exports object, thus the warning you receive, because the compiler(babel) didn't find exports.ADDENDUM in your code, only you know that it's there, therefore the compiler thinks you're using an unexisting component.

As of imports, it's the same story, the same type of warning was emitted by webpack when something like require('/path/to/' + someVar + '/some.file.js'), because webpack wanted to make a chunk out of it, but that wasn't a full path for webpack and it couldn't find the file because it was a concatenated string (dynamic import). (i don't know if this changed over the years, but i'm sure you understand/knew this perfectly well too)

darklightcode
  • 2,738
  • 1
  • 14
  • 17
  • This is not an acceptable answer. I know perfectly well that I can do the above. I do what I have in my code to reduce the amount of export writing I need to do, and what I do is perfectly valid JS. – Matthew Herbst Dec 28 '18 at 16:54
  • @MatthewHerbst Please check my updated answer. PS: I honestly don't understand how you reduce code since i one-lined all your logic there. I mean, i wrote it **once** in a valid state for the compiler. I hope you reconsider the downvote tho – darklightcode Dec 28 '18 at 18:18
  • I do understand why the issue is happening. I'm not necessarily asking for solving it, just at minimum for silencing the warnings, which did not appear when I was using Webpack v1 and Babel v6. The code I posted is a MVP example of a drastically more complicated piece that I did not originally write, and where that pattern exists in hundreds if not thousands of places within the codebase I am working on, and changing that is not in scope of the work I am currently doing. If I were writing this today I would of course have done it as an export on each line. – Matthew Herbst Dec 28 '18 at 20:46
  • I do appreciate you taking the time to write an answer. I just have a very specific question that I'm hoping to get a resolution to, and I doubt I'm the only person who has to deal with dynamic exports in their code. – Matthew Herbst Dec 28 '18 at 20:49