TypeScript import warnings when building (causes "exports is not defined")

[tommitytom]

Version

3.2.0

Environment info

  System:
    OS: Windows 10
    CPU: (8) x64 Intel(R) Core(TM) i7-4770K CPU @ 3.50GHz
  Binaries:
    Node: Not Found
    Yarn: Not Found
    npm: 6.1.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 42.17134.1.0
  npmPackages:
    @vue/babel-preset-app:  3.2.0
    @vue/cli-overlay:  3.2.0
    @vue/cli-plugin-babel: ^3.2.0 => 3.2.0
    @vue/cli-plugin-typescript: ^3.2.0 => 3.2.0
    @vue/cli-service: ^3.2.0 => 3.2.0
    @vue/cli-shared-utils:  3.2.0
    @vue/component-compiler-utils:  2.3.1
    @vue/preload-webpack-plugin:  1.1.0
    @vue/web-component-wrapper:  1.2.0
    babel-helper-vue-jsx-merge-props:  2.0.3
    babel-plugin-transform-vue-jsx:  4.0.1
    vue: ^2.5.21 => 2.5.21
    vue-color: ^2.7.0 => 2.7.0
    vue-hot-reload-api:  2.3.1
    vue-loader:  15.4.2
    vue-resize: ^0.4.4 => 0.4.4
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.5.21 => 2.5.21
    vue-template-es2015-compiler:  1.6.0
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

I have tried time and time again to create a minimal reproduction of this issue and I have failed. It just seems to happen when a project gets beyond a certain size.

What is expected?

The project to build without warnings.

What is actually happening?

The project builds with warnings:

 WARNING  Compiled with 166 warnings                                                                                                                                                                                                1:38:48 PM

...

 warning  in ./src/common/GameLogic.ts

"export 'BUBBLE_WIDTH' was not found in './constants'

 warning  in ./src/common/GameLogic.ts

"export 'BUBBLE_WIDTH' was not found in './constants'

 warning  in ./src/common/GameLogic.ts

"export 'BUBBLE_WIDTH' was not found in './constants'

 warning  in ./src/game/controllers/GameController.ts

"export 'Background' was not found in '@/game/objects/Background'

 warning  in ./src/game/controllers/GameController.ts

"export 'BoardController' was not found in '@/game/controllers/BoardController'

 warning  in ./src/game/controllers/GameController.ts

"export 'BoardController' was not found in '@/game/controllers/BoardController'

 warning  in ./src/game/Board.ts

"export 'BoardDebugView' was not found in '@/game/objects/BoardDebugView'

 warning  in ./src/game/controllers/GameController.ts

"export 'BoardMoveAnimation' was not found in '@/game/animators/BoardMoveAnimation'

...

---

This bug has been plaguing me for many months now, and on multiple projects, but I have had a workaround - I have simply deleted the node_modules folder before each build and it seemed to fix the issue. This no longer seems to work.

Even though the project builds, the resulting output does not work, with the following error displayed in the browser console: exports is not defined. This has been consistent throughout the time I've had this issue.. on the occasions I did get it to compile, this error did not exist. This makes me think it may be a babel issue, but I really can't tell.

Some other notes:

• npm run serve works fine.
• The amount of warnings seems to randomly change every now and then, even if I don't change any code
• I have tried using just TypeScript for this, with no Babel, which compiles just fine, but the resulting code has it's own set of issues once loaded in the browser.
• I've tried rolling back both TypeScript and vue-cli versions to no avail.
• Most of the other issues referencing anything like this seem to point to "emitDecoratorMetadata": true, but I don't have that in my config,

My tsconfig.json:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": false,
    "importHelpers": true,
    "strictNullChecks": false,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "node"
    ],
    "paths": {
      "@/*": [
        "src/*",
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.vue",
    "tests/**/*.ts"
  ],
  "exclude": [
    "node_modules",
  ]
}

[LinusBorg]

Since you can't provide a reproduction and no access to the original project, there's little we can do.

I'll mark this as "help wanted", maybe someone already came across this and can help out?

[haoqunjiang]

Possible related: webpack/webpack#2977 (comment) & webpack/webpack#7378
Now that this issue has been inactive for a month and no reproduction was provided, I'm closing it for now. You may open a new issue with a reference to this one if you can follow up with more information.

[zcserei]

I'm also experiencing the same issue and it looks like it's an unsolved problem with issues reaching back to early '16, and touching various project incl. webpack, ts-loader and angular-cli.

[wuservices]

I get this as well when importing a bunch of interfaces from one file. It looks like some people wrote some plugins to silence some of these warnings as a workaround in TypeStrong/ts-loader#653 (comment) for example, but I couldn't get it to work with my vue-cli setup.

I still get warnings like this:

 WARNING  Compiled with 10 warnings                                                                                                         5:59:28 PM

 warning  in ./src/components/ItemAdminSummary.vue?vue&type=script&lang=ts&

"export 'Item' was not found in '@/store/items/types'

 warning  in ./src/components/ItemAdminSummary.vue?vue&type=script&lang=ts&

"export 'Item' was not found in '@/store/items/types'

 warning  in ./src/components/SurfaceImage.vue?vue&type=script&lang=ts&

"export 'SurfaceImage' (imported as 'SurfaceImageType') was not found in '@/store/items/types'

...

[fsproru]

Having the same issue, also across multiple projects. Would love to see a solution here.

[evgeniy-logvinov]

The same issue. I'll be happy if someone fix this bug)

[vegerot]

Are there any solutions or workarounds for this?

One that I have thought of is using type imports instead of regular imports. If you do

import {ActionMethod} from 'vuex';

@Component
export default class Comp extends Vue {
 @namespace('stuff').Action('fetch') private readonly fetchStuff!: ActionMethod;

I get warnings like

But if I do

import type {ActionMethod} from 'vuex';

@Component
export default class Comp extends Vue {
 @namespace('stuff').Action('fetch') private readonly fetchStuff!: ActionMethod;

I do not get a warning in the build anymore. However, now I get an eslint error

---

Is there any way to stop these warnings but also keep consistent-type-imports happy?

Second Question: Is this a bug in webpack, vue, or typescript-eslint? (related to typescript-eslint/typescript-eslint#2972)

[brolnickij]

The following solution worked for me

does not work

import { IAmureDragEvent, IAmureLayoutMetadata } from '@/core/AmureLayout.interface'

solution

import type { IAmureDragEvent, IAmureLayoutMetadata } from '@/core/AmureLayout.interface'

--

P.S. I have no problem with consistent-type-imports and the latest version of typescript-eslint

--

For the curious