After working on my component library in vue and using rollup to wrap it up, I encountered an issue with the mixins not getting included in the final library. Initially, I suspected that the problem lied in the paths since most of the mixins were local.
In my original setup:
import mixin from '../../mixins/color'Repo folder structure
- dist //output
- src //All files related to the actual components within the library
- components
- comps
- alert //general components
- inputs //input components
- layout //layout components /row/col
- mixins
- utilities
- entry.js //rollup points to this
- ... //Used nuxt for component development focusing on SSR with additional folders excluded in rollup process
It appeared that native rollup did not support indirect imports so I tried integrating rollup-plugin-includepaths. My understanding was that specifying the required paths in the imports would resolve the issue.
Subsequently, I added rollup-plugin-includepaths to the plugins section in rollup.config.js, including the root path and output directory as options:
includePaths({
paths: ['src/components/', 'src/mixins/', 'src/utilities/'],
extensions: ['.js', '.vue']
}),
**Unfortunately, this solution did not work.**
I then attempted to eliminate relative imports and create aliases for each necessary directory, but that also proved unsuccessful.
The problem persists where all imported mixins are not being compiled into the final product even when they are added as
mixin: [mixins] //whatever they may beWhat am I missing here?
// rollup.config.js (extract)
...
// Additional configurations for different build formats omitted for brevity
...
Update
Even after moving the imported components out of the mixin and directly adding them to the component, I faced the same outcome. This leaves me clueless about what needs to be done.
TL;DR
None of the child components are getting included in the compiled '.js' files during the rollup process.