Rollup - not packaging entire repo (child component missing)

Question

I have a component library written in vue that I am wrapping up with rollup

I am having an issue with mixins not being wrapped up into the final library. Intially i thought that the path was the issue as most of the mixins are local.

Originally:

import mixin from '../../mixins/color'

Repo folder structure
   - dist //output
   - src //All files related to the actual component within the library
     - components
       - comps
          - alert //general components
          - inputs //input components
          - layout //layout components /row/col
     - mixins
     - utilities
     - entry.js //rollup points to this 
  - ...  //I used nuxt to develop the components to focus on SSR so there are more folders but are excluded in the rollup process

Apparently native rollup doesn't like indirect imports so I attempted to add rollup-plugin-includepaths. My understanding is that I would need to mention the paths required in the imports to work correctly.

Therefore, I added rollup-plugin-includepaths to rollup.config.js plugins and added the root path and the output director as the options

includePaths({
        paths: ['src/components/', 'src/mixins/', 'src/utilities/'],
        extensions: ['.js', '.vue']
      }),

**this did not work **

I decided to remove all relative imports and create aliases for each required directory. This did not work either

What is happening is all mixins imported into the component and added as mixin: [mixins] //whatever they may be are not included in the compiled product?!?!?!

What am I missing????

// rollup.config.js
import fs from 'fs'
import path from 'path'
import vue from 'rollup-plugin-vue'
import alias from '@rollup/plugin-alias'
import commonjs from '@rollup/plugin-commonjs'
import replace from '@rollup/plugin-replace'
import babel from 'rollup-plugin-babel'
import { terser } from 'rollup-plugin-terser'
import minimist from 'minimist'
import postcss from 'rollup-plugin-postcss'
import includePaths from 'rollup-plugin-includepaths'
import del from 'rollup-plugin-delete'

// Get browserslist config and remove ie from es build targets
const esbrowserslist = fs
  .readFileSync('./.browserslistrc')
  .toString()
  .split('\n')
  .filter(entry => entry && entry.substring(0, 2) !== 'ie')

const argv = minimist(process.argv.slice(2))

const projectRoot = path.resolve(__dirname)

const baseConfig = {
  input: 'src/entry.js',
  plugins: {
    preVue: [
      alias({
        resolve: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
        entries: [
          { find: '@', replacement: path.resolve(projectRoot, 'src') },
          {
            find: '@mixins',
            replacement: path.resolve(projectRoot, 'src', 'mixins')
          },
          {
            find: '@comps',
            replacement: path.resolve(projectRoot, 'src', 'components', 'comps')
          },
          {
            find: '@inputs',
            replacement: path.resolve(
              projectRoot,
              'src',
              'components',
              'inputs'
            )
          },
          {
            find: '@utilities',
            replacement: path.resolve(projectRoot, 'src', 'utilities')
          }
        ]
      }),
      includePaths({
        paths: ['src/components/', 'src/mixins/', 'src/utilities/'],
        extensions: ['.js', '.vue']
      }),
      commonjs(),
      postcss()
    ],
    replace: {
      'process.env.NODE_ENV': JSON.stringify('production'),
      'process.env.ES_BUILD': JSON.stringify('false')
    },
    vue: {
      css: false,
      template: {
        isProduction: true
      }
    },
    babel: {
      exclude: 'node_modules/**',
      extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue']
    }
  }
}

// ESM/UMD/IIFE shared settings: externals
// Refer to https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
const external = [
  // list external dependencies, exactly the way it is written in the import statement.
  // eg. 'jquery'
  'vue'
]

// UMD/IIFE shared settings: output.globals
// Refer to https://rollupjs.org/guide/en#output-globals for details
const globals = {
  // Provide global variable names to replace your external imports
  // eg. jquery: '$'
  vue: 'Vue'
}

// Customize configs for individual targets
const buildFormats = []
if (!argv.format || argv.format === 'es') {
  const esConfig = {
    ...baseConfig,
    external,
    output: {
      compact: true,
      file: 'dist/comps.esm.js',
      format: 'esm',
      exports: 'named'
    },
    plugins: [
      del({ targets: 'dist/*' }),
      replace({
        ...baseConfig.plugins.replace,
        'process.env.ES_BUILD': JSON.stringify('true')
      }),
      ...baseConfig.plugins.preVue,
      vue(baseConfig.plugins.vue),
      babel({
        ...baseConfig.plugins.babel,
        presets: [
          [
            '@babel/preset-env',
            {
              targets: esbrowserslist
            }
          ]
        ]
      })
    ]
  }
  buildFormats.push(esConfig)
}

if (!argv.format || argv.format === 'cjs') {
  const umdConfig = {
    ...baseConfig,
    external,
    output: {
      compact: true,
      file: 'dist/comps.ssr.js',
      format: 'cjs',
      name: 'Components',
      exports: 'named',
      globals
    },
    plugins: [
      replace(baseConfig.plugins.replace),
      ...baseConfig.plugins.preVue,
      vue({
        ...baseConfig.plugins.vue,
        template: {
          ...baseConfig.plugins.vue.template,
          optimizeSSR: true
        }
      }),
      babel(baseConfig.plugins.babel)
    ]
  }
  buildFormats.push(umdConfig)
}

if (!argv.format || argv.format === 'iife') {
  const unpkgConfig = {
    ...baseConfig,
    external,
    output: {
      compact: true,
      file: 'dist/comps.min.js',
      format: 'iife',
      name: 'Components',
      exports: 'named',
      globals
    },
    plugins: [
      replace(baseConfig.plugins.replace),
      ...baseConfig.plugins.preVue,
      vue(baseConfig.plugins.vue),
      babel(baseConfig.plugins.babel),
      terser({
        output: {
          ecma: 5
        }
      })
    ]
  }
  buildFormats.push(unpkgConfig)
}
// Export config
export default buildFormats

Update

I moved the imported components out of the mixin and added them directly to the component that included them and got the same result. Therefore, i really have no clue what needs to happen.

TL;DR

None of the child components are being included in the rolled up dist '.js' files

Answer 1

Sometimes it is hard to include what is relevant and the question above is guilty.

The problem is within the larger component I had imported the children lazily

ex:

components:{
 comp: ()=>import('comp') ///Does not work
}

changed to your standard

import comp from 'comp'
components:{
   comp
}