Vue/Electron/Webpack Cannot find image module after mutating image path

Question

I'm using Vue CLI 4.4.6 w/ Electron & Webpack and am running into an issue with Webpack telling me "cannot find module './SOME PORTION OF THE IMAGE LOCATION' when trying to programmatically move an image between the local folder and submitted folder.

My directory structure is as follows:

/src
  /resources
    /images
      /local
        /SUB-DIRECTORIES
          imageBefore.png
      /submitted
        /SUB-DIRECTORIES
          imageAfter.png

This problem only occurs after I run the uploadImage method shown below:

computed: {
  imagePath: function() {
              let loc = this.image.upload_progress === 'submit'? 'submitted' : 'local'
              let filepath = path.join(loc,this.image.path);
              return require('../resources/images/' + filepath);
  }
},

methods: {
  uploadImage(){
            // push new image to global xylarium
            const destinationPath = (process.env.IS_PRODUCTION === 'true') ? `${process.env.RESOURCES_PATH}/images` : `src/resources/images/submitted/${this.image.path}`;
            const currentPath = (process.env.IS_PRODUCTION === 'true') ? `${process.env.RESOURCES_PATH}/images` : `src/resources/images/local/${this.image.path}`;

            if(this.state != 'submit' && fs.existsSync(currentPath)) { 
                fs.rename(currentPath, destinationPath, async (err) => {
                    if(err) {
                        this.errorMessage = err;
                        this.showError = true;
                        throw(err);
                    } else {
                        // update uploadStatus var
                        await this.$store.dispatch('updateImageStatus', {id: this.image.uuid, code: 'submit'});

                        console.log('Successfully moved file');

                        // Update user on image status
                        this.showSnackBar = true;
                    }
                })
            } else {
                this.errorMessage = 'The image could not be found. Make sure that the image exists in the original folder.';
                this.showError = true;
            }
        }
}

These images can't go in the public folder as they aren't static and load properly when the page does. This error is only thrown when I attempt to run the uploadImage method. Has anyone run into this problem and if so, how did you fix it?

Thanks in advance.

Vue/Electron/Webpack Cannot find image module after mutating image path

0 Answers