- 背景: webpack5 のアップグレード + vuex の使用
- エラーメッセージ:
[vuex] duplicate getter key:****
- キーコード: require.context は、vuex のファイルディレクトリに従ってモジュールを導入するときに使用されます。
const files = require.context('./apaas-ide', false, /\.js$/)
const modules = {
}
files.keys().forEach(key => {
modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
})
export default {
modules
}
- 問題の原因: webpack5 では require.context メソッドの使用に変更があり、コード内で使用すると、絶対パス ファイルと相対パス ファイルの両方が認識され、同じ名前の 2 つのモジュール ファイルが生成され、エラー。
- 解決する
const files = require.context('./apaas-ide', false, /\.\/.*\.js$/)
const modules = {
}
files.keys().forEach(key => {
modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
})
export default {
modules
}