Strange warning stating that export does not exist when it does

Bug report

What is the current behavior?

Not sure if this is a problem with a loader or webpack itself, but on a project that is using typescript, I’m getting a warning:

    WARNING in ./React/src/components/_shared/form/form-model.ts
    17:0-39 "export 'IValidation' was not found in '_types/IValidation'"
        at HarmonyExportImportedSpecifierDependency._getErrors (C:\project\node_modules\webpack\lib\dependencies\HarmonyExportImportedSpecifierDependency.js:352:11)
        at HarmonyExportImportedSpecifierDependency.getWarnings (C:\project\node_modules\webpack\lib\dependencies\HarmonyExportImportedSpecifierDependency.js:299:15)
        at Compilation.reportDependencyErrorsAndWarnings (C:\project\node_modules\webpack\lib\Compilation.js:985:24)
        at Compilation.finish (C:\project\node_modules\webpack\lib\Compilation.js:817:9)
        at hooks.make.callAsync.err (C:\project\node_modules\webpack\lib\Compiler.js:479:17)
        at _done (eval at create (C:\project\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:9:1)
        at _err0 (eval at create (C:\project\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:20:22)
        at _addModuleChain (C:\project\node_modules\webpack\lib\Compilation.js:758:12)
        at processModuleDependencies.err (C:\project\node_modules\webpack\lib\Compilation.js:697:9)
        at _combinedTickCallback (internal/process/next_tick.js:131:7)
        at process._tickCallback (internal/process/next_tick.js:180:9)

However, the file in question _types/IValidation, is imported in numerous other files without any warnings being emitted related to those other files that are also importing IValidation from _types/IValidation.

The contents of the file are simple, and there is an “export interface IValidation” in the file:

export enum ValidationType {
    Required,
    Min,
    Max,
    MinLength,
    MaxLength,
}

export interface IValidation {
    validationType: ValidationType;
    errorMessage?: string;
    minValue?: number;
    maxValue?: number;
    maxLength?: number;
    minLength?: number;
}

We do have our “src” directory set as a module resolution root in the resolve section of our webpack config, but I also tried importing the file with a relative path and still get the warning.

I am kind of wondering if this is related to typescript. We are using ts-loader, but we have it doing type checking only and are doing transpiling with babel.

If the current behavior is a bug, please provide the steps to reproduce.
Not sure since I get the warning due to the import of the file in question in one file but not due to several other files that also import the same interface from the same file.

What is the expected behavior?
It should not issue a warning about a missing export if the export clearly exists.

Other relevant information:
webpack version: 4.8.3
Node.js version: 8.9.1
Operating System: Windows 10
Additional tools: webpack-cli 2.1.3

Author: Fantashit

17 thoughts on “Strange warning stating that export does not exist when it does

  1. Perhaps it would be awesome if you could create a simple project that would reproduce your bug and upload on github.

  2. The same problem here for TS types/interfaces after migrating from WP3 to WP4, multiple warnings:

    VM606323 index.js:151 ./apps/client/state.ts 3:0-82
    "export 'ChartElement' was not found in './cycles/ChartArea/chartElements'
    

    I don’t use ts-loader or anything special just simple loader:

    const ts = require('typescript')
    const tsconfig = require('tsconfig')
    
    const compilerOptions = tsconfig.loadSync(process.cwd()).config.compilerOptions
    
    module.exports = function (source) {  
      const result = ts.transpile(source, { ...compilerOptions, ...this.query })
      return result
    }

    So it is not a problem of ts-loader

  3. FWIW I only just started seeing this issue today in one of my react/redux/saga projects after refactoring my code layout from:

    PageSagas.js
    PageActions.js
    PageReducers.js
    

    to

    feature-A/sagas.js
    feature-A/actions.js
    feature-A/reducers.js
    feature-B/sagas.js
    feature-B/actions.js
    feature-B/reducers.js
    PageSagas.js
    PageActions.js
    PageReducers.js
    

    to try to organize the growing project a bit more.

    Not sure if the duplicate filenames across feature folders could have anything to do with this weird warning display issue.

    And because more detail doesn’t hurt with debugging, in my particular case the exported function names don’t match the filenames right now. They currently look like:

    // feature-A/reducers.js :
    export default function featureAReducer(...) {}

    instead of

    // feature-A/reducers.js :
    export default function reducers(...) {}

    Hope this helps with the debugging. In the meantime, @igorkamyshev ‘s plugin looks good.

    Webpack version info:

    • Pulled in via "laravel-mix": "^4.0.14" , which (seems to be using)[https://github.com/JeffreyWay/laravel-mix/blob/v4.0.14/package.json#L63]
    • "webpack": "^4.27.1"
  4. Update: Some of the files the warnings fired for had both export function X and export default function X snippets in them, some just had one export default function X snippet. All of the warnings went away when I removed all of the default keywords. Hope this helps.

  5. @anjunatl, yours seems to be a different issue. This one is about exporting interfaces in typescript and is well understood. There is a comment somewhere explaining it really well, but I currently can not find it. Basically the typescript compiler emits no code for interfaces, so webpack can not find them in the compiled module; except when a module consists of only interfaces. In that case the module will end up completely empty and then webpack will not investigate the exports.

    You should probably create a new issue for your problem.

  6. Maybe this is not a bug, its a feature! ™ 🙂
    See:
    microsoft/TypeScript#28481

    When you export your TS interfaces/types in such a style so that it comply with TS’s isolatedModules=true, then you won’t get these webpack warnings.

    import { State } from './interfaces';
    export type State = State;
    
  7. I think @MarekLacoAXA‘s comment nails the issue for me. I had this error because I was exporting types the same way I was exporting constants. I then split them and used export type for the type alone and it worked. Here’s the code:

    // ActionNames is a const and ActionTypes is a type
    
    // Before
    export { ActionNames, ActionTypes } from "./ActionTypes";
    
    // Above line resulted in warning
    // > "export 'ActionPayload' was not found in './ActionTypes'
    
    // Changed the code to the following for the warning to disappear
    export { ActionNames } from "./ActionTypes";
    export type ActionPayload = ActionPayload;
    
  8. Yeah having the same issue, but weird part is that it’s only affecting single interface import in one specific file and I simply can’t come up with any ideas why.

  9. Just use import type {AnimType}... instead. Requires Typescript 3.8.

    Actually, not for import but for export, this removes warning too:

    export type { AnimType } from './anim'

    This is still a workaround because this warning is caused by valid code, so there is some bug in webpack.

  10. Typescript introduced type-only exports/import which allows to generate valid JS code when compiling each file on it’s own. Without type-only exports/import the TS to JS transformation can’t be done when compiling each file on it’s own. It’s only possible with a full/partial graph of the modules. This is how typescript is designed. There is nothing to do on webpack-side here.

Comments are closed.