vue.config.js Configuration read failed

[aqkj]

Version

4.5.10

Environment info

  System:
    OS: macOS Mojave 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 12.19.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.8 - /usr/local/bin/npm
  Browsers:
    Chrome: 87.0.4280.141
    Edge: Not Found
    Firefox: Not Found
    Safari: 12.1.2
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.2.1 
    @vue/babel-helper-vue-transform-on:  1.0.2 
    @vue/babel-plugin-jsx:  1.0.2 
    @vue/babel-plugin-transform-vue-jsx:  1.2.1 
    @vue/babel-preset-app:  4.5.10 
    @vue/babel-preset-jsx:  1.2.4 
    @vue/babel-sugar-composition-api-inject-h:  1.2.1 
    @vue/babel-sugar-composition-api-render-instance:  1.2.4 
    @vue/babel-sugar-functional-vue:  1.2.2 
    @vue/babel-sugar-inject-h:  1.2.2 
    @vue/babel-sugar-v-model:  1.2.3 
    @vue/babel-sugar-v-on:  1.2.3 
    @vue/cli-overlay:  4.5.10 
    @vue/cli-plugin-babel: ~4.5.0 => 4.5.10 
    @vue/cli-plugin-eslint: ~4.5.0 => 4.5.10 
    @vue/cli-plugin-pwa: ~4.5.0 => 4.5.10 
    @vue/cli-plugin-router: ~4.5.0 => 4.5.10 
    @vue/cli-plugin-typescript: ^4.5.10 => 4.5.10 
    @vue/cli-plugin-vuex: ~4.5.0 => 4.5.10 
    @vue/cli-service: ~4.5.0 => 4.5.10 
    @vue/cli-shared-utils:  4.5.10 
    @vue/compiler-core:  3.0.5 
    @vue/compiler-dom:  3.0.5 
    @vue/compiler-sfc: ^3.0.0 => 3.0.5 
    @vue/compiler-ssr:  3.0.5 
    @vue/component-compiler-utils:  3.2.0 
    @vue/eslint-config-airbnb: ^5.0.2 => 5.3.0 
    @vue/eslint-config-typescript: ^5.0.2 => 5.1.0 
    @vue/preload-webpack-plugin:  1.1.2 
    @vue/reactivity:  3.0.5 
    @vue/runtime-core:  3.0.5 
    @vue/runtime-dom:  3.0.5 
    @vue/shared:  3.0.5 
    @vue/web-component-wrapper:  1.2.0 
    eslint-plugin-vue: ^7.0.0-0 => 7.4.1 
    typescript: ~3.9.3 => 3.9.7 
    vue: ^3.0.0 => 3.0.5 
    vue-eslint-parser:  7.3.0 
    vue-hot-reload-api:  2.3.4 
    vue-loader:  15.9.6 (16.1.2)
    vue-loader-v16: ^16.0.0-beta.5.4 => 16.0.0-beta.5.4 
    vue-router: ^4.0.0-0 => 4.0.3 
    vue-style-loader:  4.1.2 
    vue-template-es2015-compiler:  1.9.1 
    vuex: ^4.0.0-0 => 4.0.0-rc.2 
  npmGlobalPackages:
    @vue/cli: 4.5.10

Steps to reproduce

1. create vue3 typescript project
2. create vue.config.js

   const path = require('path')
   module.exports = {
   configureWebpack: config => {
   config.resolve = {
     alias: {
       '@common': path.resolve(__dirname, '../common')
     }
   }
   }
   }

What is expected?

import { Layer } from '@common/entitys/Layer' // Resolve alias

What is actually happening?

1. The analysis was not successful, vue.config.js Configuration does not work.
2. Looking at the source code, we found that it was caused by "createRequire",This method exports {}.

---

I changed the code to this and it worked again:

const path = require('path')
exports.configureWebpack = config => {
  config.resolve.alias['@common'] = path.resolve(__dirname, '../common')
}

[fangbinwei]

You can't overwrite the entire config.resolve, otherwise some configs like resolve.extensions will be lost, webpack will resolve @common/entitys/Layer.js not ts file. using config.resolve.alias['@common'] = path.resolve(__dirname, '../common') or

  configureWebpack: config => {
// return value will be merged
    return {
      resolve: {
        alias: {
          '@common': path.resolve(__dirname, './common')
        }
      }
    }
  }