AEM-DAM, images not able to map from AEM to React app in CSS / SASS

Objective

Developers were facing issue on accessing DAM images from CSS/SCSS. The objective of this document is to access the images hosted in DAM from the local react architecture so that it will reflect the same image in react server for the local development and then push the code to AEM server and test the same.

Requirements

• Running React Server on localhost
• Running local AEM instance
• Deployed images on AEM DAM

How to achieve the goal?

As per the react architecture, the create-react-app imports the restriction outside of src directory and that has been done by “create-react-app” developers. It is implemented in ModuleScopePlugin to ensure that the files reside in src/ directory itself. The job of the plugin ensures that relative imports from the app source directory don’t reach outside of that.

Thats why the developers were facing different issues based on calling the image from particular directories, like :
Module not found: You attempted to import ../images/abc.jpg which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

Failed to compile. Error: Can’t resolve ‘../../content/dam/abc/xyz/loading_flight.png’ in ‘/Users/abhishek/Documents/abc/repo/application/react-app/src/components/componentA’

etc…

So to resolve these type of issues, we’ve to modify the architecture and have to do some tweaks to run the application smoothly. So, please follow these steps to achieve the goal:
- Two ways, we can lift -up the restriction :

1- One can disable this by eject operation of create-react-app project. But if following this eject operation, you will no more have access to some of the features and any further update. Be very careful while doing this step and if you are not ready to manage & configure application included to configure webpack do not follow this step.

2- Otherside, there is a package available — “react-app-rewired”, that can be used to remove the plugin. This way we do not have to perform the eject operation. With this you can also install “customize-cra“ which exposes a special removeModuleScopePlugin() API which is a bit more preferable approach.
Installation Process(via npm):
npm i — save-dev react-app-rewired customize-cra
and replace the react-scripts with react-app-rewired in the package.json

"scripts":
{
- "start": "react-scripts start"
+ "start": "react-app-rewired start",
...
},

Then, create one file in src directory : config-overrides.js, and paste the below code:

const { removeModuleScopePlugin } = require('customize-cra') module.exports = removeModuleScopePlugin()

customize-cra : Basically, the functionality of this plugin includes:

const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin'); module.exports = function override(config, env)
{
config.resolve.plugins = config.resolve.plugins.filter(plugin => !(plugin instanceof ModuleScopePlugin)); 5 6 return config; 7
};

Another way, if you do not want to exclude the whole ModuleScopePlugin but instead whitelist the specific file that can be imported outside of src, follow this and add this in config-overrides.js :

const ModuleScopePlugin = require("react-dev-utils/ModuleScopePlugin"); const path = require("path");
module.exports = function override(config)
{
config.resolve.plugins.forEach(plugin =>
{
if (plugin instanceof ModuleScopePlugin)
{
plugin.allowedFiles.add(path.resolve("./config.json"));
}
});
return config;
};

The above steps will enable the react application to allow importing files from outside of the src folder!

Now, to access DAM files in CSS/SCSS:
- The image file you want to access from AEM DAM, must also be added to the public/img/content/dam/*** directory within the react-app codebase to be displayed in the react application!

Internally, it will sync with the AEM server after maven build and look for the same folder structure inside the DAM and if it will find the same image name it will display.