Unable to import module when using alias in package json

Question

I was using this question as a reference to import my modules with aliases.

I have the following package.json :

{
  ...
  "imports": {
    "#components/*": "src/components/*", // tried both #components/* and #components
    "#config/*": "src/config/*",
    "#hooks/*": "src/hooks/*",
    "#pages/*": "src/pages/*",
    "#utils/*": "src/utils/*"
  }
}

In my file, I do:

import { Layout, About } from '#components';

But I get the following error:

Module not found: Error: Can't resolve '#components' in 'pwd/src/pages'
assets by chunk 1.56 MiB (name: main)
  asset static/js/bundle.js 1.56 MiB [emitted] (name: main) 1 related asset
  asset main.a40280fd506751c0b92a.hot-update.js 362 bytes [emitted] [immutable] [hmr] (name: main) 1 related asset
assets by path *.json 343 bytes
  asset asset-manifest.json 315 bytes [emitted]
  asset main.a40280fd506751c0b92a.hot-update.json 28 bytes [emitted] [immutable] [hmr]
asset index.html 1.67 KiB [emitted]
Entrypoint main 1.56 MiB (1.64 MiB) = static/js/bundle.js 1.56 MiB main.a40280fd506751c0b92a.hot-update.js 362 bytes 2 auxiliary assets
cached modules 1.44 MiB [cached] 117 modules
runtime modules 28.2 KiB 13 modules

ERROR in ./src/pages/HomePage.js 7:0-53
Module not found: Error: Can't resolve '#components' in 'pwd/src/pages'
resolve '#components' in 'pwd/src/pages'
  using description file: pwd/package.json (relative path: ./src/pages)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as internal import
      using imports field: src/components/*
        Parsed request is a module
        using description file: pwd/package.json (relative path: ./src/pages)
          Field 'browser' doesn't contain a valid alias configuration
          resolve as module
            pwd/src/pages/node_modules doesn't exist or is not a directory
            pwd/src/node_modules doesn't exist or is not a directory
            looking for modules in pwd/node_modules
              pwd/node_modules/src doesn't exist
            /Users/ankit/...paths to pwd.../node_modules doesn't exist or is not a directory
            ...                
            /Users/node_modules doesn't exist or is not a directory
            /node_modules doesn't exist or is not a directory
            looking for modules in pwd/node_modules
              pwd/node_modules/src doesn't exist
 @ ./src/App.js 15:0-26 16:0-40 20:30-38
 @ ./src/index.js 7:0-24 10:33-36

webpack 5.68.0 compiled with 1 error in 117 ms

Any help would be great, thanks!

Answer 1

That question applies to nodejs, not React. You can add configurations to your React app with craco.

1. Install craco with yarn or npm

yarn add @craco/craco

2. Create a craco.config.js file in your project's root and insert your aliases

const path = require(`path`);

module.exports = {
    webpack: {
        alias: {
            '#components': path.resolve(__dirname, 'src/components'),
            '#x': path.resolve(__dirname, 'src/x'),
        }
    },
};

3. Replace react-scripts under the scripts section in package.json to craco like this

 "scripts": {
   "start": "craco start",
   "build": "craco build",
   ...
 },

4. Restart the dev server and you should be able to use your aliases.