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.
CodePudding user response：
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'