0

I try to deploy my react app to a Linux VM. Everything works fine on Windows. I assume it is something with relative paths? I have no aliases configured or module-resolver. I tried to play with paths like in this thread but without any success.

I have the same configuration on both Windows and Linux machine. node (v16.14.0) and npm(8.5.1) version.

When I try to run a development server, I have the following errors:

Failed to compile.

Module not found: Error: Can't resolve 'src/components/_dashboard/admin/content/AdminSpeedDial' in '/root/myproject/frontend/src/layouts/dashboard'
assets by path static/js/*.js 7.88 MiB
  asset static/js/bundle.js 7.8 MiB [emitted] (name: main) 1 related asset
  asset static/js/src_pages_Products_js.chunk.js 53.8 KiB [emitted] 1 related asset
  asset static/js/src_components__dashboard_admin_user_User_js.chunk.js 23.2 KiB [emitted] 1 related asset
  asset static/js/node_modules_web-vitals_dist_web-vitals_js.chunk.js 6.88 KiB [emitted] 1 related asset
asset index.html 1.18 KiB [emitted]
asset asset-manifest.json 918 bytes [emitted]
cached modules 7.71 MiB (javascript) 31.4 KiB (runtime) [cached] 2222 modules

ERROR in ./src/layouts/dashboard/index.js 14:0-84
Module not found: Error: Can't resolve 'src/components/_dashboard/admin/content/AdminSpeedDial' in '/root/myproject/frontend/src/layouts/dashboard'
resolve 'src/components/_dashboard/admin/content/AdminSpeedDial' in '/root/myproject/frontend/src/layouts/dashboard'
  Parsed request is a module
  using description file: /root/myproject/frontend/package.json (relative path: ./src/layouts/dashboard)
    aliased with mapping 'src': '/root/myproject/frontend/src' to '/root/myproject/frontend/src/components/_dashboard/admin/content/AdminSpeedDial'
      using description file: /root/myproject/frontend/package.json (relative path: ./src/layouts/dashboard)
        Field 'browser' doesn't contain a valid alias configuration
        root path /root/myproject/frontend
          using description file: /root/myproject/frontend/package.json (relative path: ./root/myproject/frontend/src/components/_dashboard/admin/content/AdminSpeedDial)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /root/myproject/frontend/root/myproject/frontend/src/components/_dashboard/admin/content/AdminSpeedDial doesn't exist
            .web.mjs
              Field 'browser' doesn't contain a valid alias configuration
              /root/myproject/frontend/root/myproject/frontend/src/components/_dashboard/admin/content/AdminSpeedDial.web.mjs doesn't exist
            .mjs

              ... MANY MORE OF SIMILAR errors ...

            Field 'browser' doesn't contain a valid alias configuration
            /root/myproject/frontend/src/components/_dashboard/admin/content/AdminSpeedDial.jsx doesn't exist
          as directory
            /root/myproject/frontend/src/components/_dashboard/admin/content/AdminSpeedDial doesn't exist
 @ ./src/routes.js 13:0-50 109:45-60
 @ ./src/App.js 5:0-30 33:37-43
 @ ./src/index.js 10:0-24 17:35-38

ERROR in ./src/pages/Admin.js 8:0-80
Module not found: Error: Can't resolve 'src/components/_dashboard/admin/content/AdminContent' in '/root/myproject/frontend/src/pages'
resolve 'src/components/_dashboard/admin/content/AdminContent' in '/root/myproject/frontend/src/pages'
  Parsed request is a module
  using description file: /root/myproject/frontend/package.json (relative path: ./src/pages)
    aliased with mapping 'src': '/root/myproject/frontend/src' to '/root/myproject/frontend/src/components/_dashboard/admin/content/AdminContent'
      using description file: /root/myproject/frontend/package.json (relative path: ./src/pages)
        Field 'browser' doesn't contain a valid alias configuration
        root path /root/myproject/frontend
          using description file: /root/myproject/frontend/package.json (relative path: ./root/myproject/frontend/src/components/_dashboard/admin/content/AdminContent)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /root/myproject/frontend/root/myproject/frontend/src/components/_dashboard/admin/content/AdminContent doesn't exist
            .web.mjs

               ... MANY MORE OF SIMILAR errors ...

            Field 'browser' doesn't contain a valid alias configuration
            /root/myproject/frontend/src/components/_dashboard/admin/content/AdminContent.jsx doesn't exist
          as directory
            /root/myproject/frontend/src/components/_dashboard/admin/content/AdminContent doesn't exist
 @ ./src/routes.js 25:0-34 123:48-53
 @ ./src/App.js 5:0-30 33:37-43
 @ ./src/index.js 10:0-24 17:35-38

webpack 5.66.0 compiled with 2 errors in 5478 ms
Michal Majeran
  • 21
  • 3
  • This may be a permissions issue. Start with the file `AdminSpeedDial.js` and see who the owner is. I'd also copy/clone the project folder to `/home/[useraccount]/` instead. –  Feb 22 '22 at 13:06
  • If you need relative path you should try to add ```"homepage": "./"``` to package.json file – Elli Zorro Feb 22 '22 at 13:07
  • The owner is root, there is only root user currently. The project is located in `/home/root` I am thinking about this `src/`. For example ERROR in `./src/pages/Admin.js 8:0-80` referes to `Admin.js` file which is imported by relative path: `import Admin from "./pages/Admin"`; I have a mix of relative paths and paths in my project. – Michal Majeran Feb 22 '22 at 13:21
  • Is there a trick in VS code to automatically change paths to relative? I was trying `"javascript.preferences.importModuleSpecifier": "relative"` but still some paths are suggested like src/ rather than ../ – Michal Majeran Feb 22 '22 at 13:23
  • Any relative path inside your React modules should start with `./` or `../` or similar. Your dashboard component seems to be at `....../myproject/frontend/src/layouts/dashboard` and AdminSpeedDial at `....../myproject/frontend/src/components/_dashboard/admin/content/AdminSpeedDial` so to import it in your Dashboard component you would use `import AdminSpeedDial from "../components/_dashboard/admin/content/AdminSpeedDial";` –  Feb 22 '22 at 13:55
  • Using only relative paths like that will ensure webpack finds everything at compile time. –  Feb 22 '22 at 13:56
  • I have change all paths to relative, the issue remains but I think I have an idea. ` Can't resolve '../../components/_dashboard/admin/content/AdminSpeedDial' in '/root/extranet/frontend/src/layouts/dashboard'`. It seems that when compiler tries to get the absolute path of file which contains underscore as a first character in path like `_dasboard` it tries to use `dashboard`. Could it be the issue? – Michal Majeran Feb 22 '22 at 14:59
  • Please update your question and post the current error message, verbatim. –  Feb 22 '22 at 15:30

1 Answers1

0

The problem was that a path to some modules was starting with _ character. Changing _dashboard to dashboard solved the issue.

Michal Majeran
  • 21
  • 3