1

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!

Ankit Kumar
  • 1,145
  • 9
  • 30
  • I think that this might be helpful [Absolute paths imports](https://stackoverflow.com/questions/68842451/how-to-use-absolute-paths-instead-of-relative-paths-in-react-or-next-js). Having a `jsconfig.json` (or `tsconfig.json` if you are using typescript) is a common pattern for absolute imports. You can add `paths: {...}` to describe how you want your paths to be. See the entire questions & answers – marius florescu Feb 12 '22 at 17:16

1 Answers1

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
  1. 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'),
        }
    },
};
  1. Replace react-scripts under the scripts section in package.json to craco like this
 "scripts": {
   "start": "craco start",
   "build": "craco build",
   ...
 },
  1. Restart the dev server and you should be able to use your aliases.
lnvc
  • 84
  • 1
  • 6