Vue-cli-plugin-electron-builder: Some modules can't be resolved and successfully imported using TypeScript (can't resolve .ts in modules index)

[TotomInc]

Describe the bug
When using Axios or Request (or some other modules that doesn't have .ts files), it looks like TS (and/or Electron) doesn't want to resolve modules with .js files and expect .ts file extension.

To reproduce

• Generate a project using Vue-CLI (Vue + Typescript), invoke vue-cli-plugin-electron-builder.
• yarn add request or yarn add axios.
• Import the module into your background.ts:

import request from 'request';
// OR
import axios from 'axios';

// try to call the imported module, in this case axios:
console.log(axios);

• Run yarn serve:electron.
• Errors will pop at Bundling main process step.

Expected behavior
Should properly import modules.

Screenshots
No screenshots so I'm putting logs:

./node_modules/axios/index.js

Module not found:
  Error: Can't resolve './lib/axios' in '/Users/totominc/Desktop/Git/poe-mapper-tracker/node_modules/axios'
  resolve './lib/axios' in '/Users/totominc/Desktop/Git/poe-mapper-tracker/node_modules/axios'
  using description file: /Users/totominc/Desktop/Git/poe-mapper-tracker/node_modules/axios/package.json (relative path: .)
  using description file: /Users/totominc/Desktop/Git/poe-mapper-tracker/node_modules/axios/package.json (relative path: ./lib/axios)
  no extension /Users/totominc/Desktop/Git/poe-mapper-tracker/node_modules/axios/lib/axios doesn't exist .ts
  /Users/totominc/Desktop/Git/poe-mapper-tracker/node_modules/axios/lib/axios.ts doesn't exist
  as directory /Users/totominc/Desktop/Git/poe-mapper-tracker/node_modules/axios/lib/axios doesn't exist

[/Users/totominc/Desktop/Git/poe-mapper-tracker/node_modules/axios/lib/axios]
[/Users/totominc/Desktop/Git/poe-mapper-tracker/node_modules/axios/lib/axios.ts]

@ ./node_modules/axios/index.js 1:17-39
@ ./src/background.ts
@ multi ./src/background.ts'

Environment:

• OS and version: macOS High Sierra 10.13.5
• Node version: 8.11.2
• npm version: 6.1.0
• yarn version (if used): 1.7.0
• vue-cli-plugin-electron-builder version: 1.0.0-beta.5
• other vue plugins used: TypeScript, Vuex
• custom config for vcp-electron-builder: none
• link to your repo:
  
  
  
  • poe-mapper-tracker (branch import-error)
  
  
  • vcp-typescript-error created a blank project with vue-cli (TS + VueX + VCP-electron-builder), added axios and tried to use it. No config edited.
  
  

[TotomInc]

After some research, it looks like the issue come from the webpack configuration. I came across multiple SO/GitHub issues talking about editing resolve#extensions from webpack config.

This one for example, which is exactly the same error as I have.

EDIT: after tweaking the webpack config file and changing the orders of resolve extensions, it still doesn't work.

// vue.config.js on the root of the project
module.exports = {
  chainWebpack: config => {
    config.resolve.extensions
      .clear()
      .add('.ts')
      .add('.tsx')
      .add('.js')
      .add('.vue')
      .add('.json')
  }
}

EDIT 2: I have tried so much things but nothing is working:

• Tweaking the webpack config with vue.config.js (passing config with configureWebpack or pluginOptions#electronBuilder) and following advices from here.
• rm -rf ./node_modules and regen it with yarn (and repeat with npm).
• Tweaking the tsconfig.json: jsx, module/target, baseUrl, include/exclude, moduleResolution, sourceMap.
• vue inspect > vue.wp.js and checking the default config.
• Manually inspect what's going on in node_modules/axios, but everything seems fine here.

At this point, I'm out of ideas and don't know what to do. This is very blocking for my project and I can't do anything.

EDIT 3: I tried to downgrade vcp-electron-builder to 0.3.2 and re-invoke it. Everything seems to work well so there is something definitely wrong with beta versions IMO. By default it generates an Electron main process file in .js, I switched it to a .ts.

Link to the branch of my repo with [email protected].

EDIT 4: It happened again while I was exporting 2 interfaces and a function from a file into an index.ts. It worked well until I added the 2 interfaces into the index.ts. The issue seems to be that it can't resolve indexes files that have more than 1 exported value. I have not tested a lot of things about it.

[daprahamian]

👍 Would love eyes on this

[nklayman]

The issue was that the resolve extensions didn't contain '.js'. This is fixed and you can switch back to the beta with version 1.0.0-beta.6 when it comes out.

[TotomInc]

Thanks for the fix @nklayman, any ETA for the 1.0.0-beta.6?

[nklayman]

It will be released within a few days. If you want to use it now, just set the version of vcp-electron-builder to nklayman/vue-cli-plugin-electron-builder to use the github repo instead of published version.

[nklayman]

Beta.6 has just been released, you can use that now!

[TotomInc]

Works fine, it can now resolve .js index files from node_modules.

[beeing]

Hi, I'm experiencing similar issue but for .json file which from a npm module called spinnies. Is there any workaround for this?

Thanks in advance.

[nklayman]

@beeing Try this:

// vue.config.js on the root of the project
module.exports = {
  chainWebpack: config => {
    config.resolve.extensions.add('.json')
  }
}