Using absolute path in our private Node dependencies?

user_17510752 0
Viewed 235

I've split out our codebase's React components into a private dependency so that the components can be used by different projects. The components all use Webpack aliases to make the code much more readable:

import TestComponent from 'components/TestComponent';

Rather than:

import TestComponent from '../../components/TestComponent';

Now the components have been removed from the project with the Webpack alias setup, so the aliases have naturally stopped working.

The new project that I am building and attempting to import these components in is done as follows:

Wrapper project, a Vite development project importing the components library.
>> Components imported as a dependency named 'core'
>>> All of the included React components are using the absolute paths.

I'm really stuck on finding out if there's a way to alias imports in the dependency itself. The issue is that my file /views/TestView is attempting to import /components/shared/Button and only works if I use a relative path:

/views/TestView.jsx

import Button from '../components/shared/Button'

So unless I do a huge refactor across many hundreds of components to change the absolute paths to relative paths, is there any way to alias the path in a dependency?

A possible solution (not tried yet) might be to further split the components down into specific category dependencies, for example:

  • core - A package.json containing ALL of the following dependencies
  • @core/views
  • @core/components

Any help or ideas on how to achieve this (if it's even possible) would be massively appreciated. Anything to avoid a massive refactor and the eyesore of having to use relative paths in every file.

es6-modules yarnpkg npm module javascript
1 Answers

To solve this issue, I instead opted for having one core module that had all of the separate folders included as dependencies. This meant that I could call the code like so:

import Component from 'components/button'

has now been changed to use the dependencies from the core module so that it looks like:

import Component from '@core/components/button'
user_175107520
Related