When working with a Vue.JS application and implementing the Vuex Store, I encountered an issue in my state.js file where I needed to import configurations from another custom file, specifically config.js.
Upon running it, I received the following warning in the terminal:
warning in ./src/store/state.js
"export 'colors' was not found in '@/../config.js'
"export 'config' was not found in '@/../config.js'
In addition, the browser console displayed this error message:
state.js?fcc2:15 Uncaught TypeError: Cannot read property 'theme' of undefined
at eval (state.js?fcc2:15)
at Module../src/store/state.js (app.js:3879)
at __webpack_require__ (app.js:770)
at fn (app.js:130)
at eval (store.js?07a4:1)
at Module../src/store/store.js (app.js:3891)
at __webpack_require__ (app.js:770)
at fn (app.js:130)
at eval (main.js:19)
at Module../src/main.js (app.js:3819)
store.js:
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
Vue.use(Vuex)
export default new Vuex.Store({
state,
strict: process.env.NODE_ENV !== 'production'
})
state.js:
import {
config,
colors
} from '@/../config.js'
const state = {
theme: config.theme || 'light',
themePrimaryColor: colors.primary
}
export default state
config.js:
import Vue from 'vue'
import Vuesax from 'vuesax'
const colors = {
primary: '#7367F0'
}
Vue.use(Vuesax, {
theme: {
colors
}
})
const config = {
theme: 'light'
}
export default config