Admin Menu Logo customization error

[mistrypavan]

Admin Customization Error

Build always failed, after changes made in .src/admin/app.js

I am customizing the Admin Panel but its took me more than 8 hours and error is same in all case.

Error in WEB browser

Compiled with problems:X

ERROR in ./.cache/admin/src/app.js 10:35-67

Module not found: Error: Can't resolve './extensions/Logo.png' in 'D:\POC\stp4prj1\.cache\admin\src'

Error in console

runtime modules 31 KiB 17 modules
./.cache/admin/src/app.js 509 bytes [built] [code generated]

ERROR in ./.cache/admin/src/app.js 10:35-67
Module not found: Error: Can't resolve './extensions/Logo.png' in 'D:\POC\stp4prj1\.cache\admin\src'
resolve './extensions/Logo.png' in 'D:\POC\stp4prj1\.cache\admin\src'
  using description file: D:\POC\stp4prj1\.cache\package.json (relative path: ./admin/src)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: D:\POC\stp4prj1\.cache\package.json (relative path: ./admin/src/extensions/Logo.png)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        D:\POC\stp4prj1\.cache\admin\src\extensions\Logo.png doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        D:\POC\stp4prj1\.cache\admin\src\extensions\Logo.png.js doesn't exist
      .jsx
        Field 'browser' doesn't contain a valid alias configuration
        D:\POC\stp4prj1\.cache\admin\src\extensions\Logo.png.jsx doesn't exist
      .react.js
        Field 'browser' doesn't contain a valid alias configuration
        D:\POC\stp4prj1\.cache\admin\src\extensions\Logo.png.react.js doesn't exist
      as directory
        D:\POC\stp4prj1\.cache\admin\src\extensions\Logo.png doesn't exist
 @ ./.cache/admin/src/index.js 17:34-50

webpack 5.36.2 compiled with 1 error in 1581 ms

Steps to reproduce the behavior

1. Add CustomLogo.png in ./src/admin/extensions/ folder
2. Go to './src/admin/app.js' add followings

import MenuLogo from './extensions/logo.png';
import favicon from './extensions/favicon.ico';

export default {
  config: {
    // Replace the Strapi logo in auth (login) views
    auth: {
      logo: AuthLogo,
    },
    head: {
          favicon: favicon,
      },
  },
  bootstrap() {},
};

3. run

yarn develop --watch-admin

I have ran

yarn build

In both cases error was the same

As per documentation this should have worked

It should have changed the logo and favicon

Screenshots

Code snippets

If applicable, add code samples to help explain your problem.

System

• Node.js version: Node LTS version v16
• NPM version: 8.1
• Strapi version: v4
• Database: Postgres 14
• Operating system: Win 11

[michaelkrone]

Same on MacOS. The extensions folder is not copied to the .cache folder.

[GRA0007]

This seems to be an issue with v4. I'm getting this on my Mac and also a linux machine when I try and run NODE_ENV=production yarn build

[oliveirarennan]

I had the same problem here.
The workaround was to create the extensions folder in ./src/admin

[soupette]

I had the same problem here. The workaround was to create the extensions folder in ./src/admin

With the v4 only the files that are in the ./src/admin/extensions folder are included when customising the admin panel.

@embpavan can you try with to build your admin panel with this command instead:

yarn strapi build --clean

[skpopcornapps]

```shell
yarn strapi build --clean

Error here is that you have not kept extensions folder inside admin.
/src/admin/extensions is the correct path
create a folder named extensions inside src/admin , it will work

[joaocosta-azores]

Hello,

I'm still having this issue. How can i solve this problem?

Field 'browser' doesn't contain a valid alias configuration
/strapi/.cache/admin/extensions/logo.png.react.js doesn't exist

System

• Node.js version: v16.14.0
• NPM version: 8.5.1
• Strapi version: v4.1.3
• Database: sqlite
• Operating system: macOS Monterey v12.2.1

[soupette]

@jonnydevv did you add your logo to the ./src/admin/extensions folder or another one?

[davidalves1]

@jonnydevv did you add your logo to the ./src/admin/extensions folder or another one?

I have the same error and my images are in the extensions folder. 😕

[Arrig0]

I confirm that the problem persists, even removing the .cache folder.

`
ERROR in ./src/admin/app.ts 1:22-45
TS2307: Cannot find module './extensions/logo.png' or its corresponding type declarations.

1 | import AuthLogo from './extensions/logo.png';
| ^^^^^^^^^^^^^^^^^^^^^^^
`

System:

• Nodejs version v14.20.0
• NPM version 6.14.17
• Yarn version 1.22.19
• Strapi version v4.5.0
• DB MySQL version 8.0.31
• OS: Ubuntu 20.04.2 LTS