src in build folder

[xlslucky]

// rollup.config.js
import peerDepsExternal from 'rollup-plugin-peer-deps-external'
import commonjs from '@rollup/plugin-commonjs'
import typescript from 'rollup-plugin-typescript2'
import styles from 'rollup-plugin-styles'

export default {
  input: ['./src/index.tsx', './src/Icons/index.tsx'],
  output: [
    {
      dir: 'dist',
      format: 'cjs',
      sourcemap: true,
    },
  ],
  external: ['classnames'],
  preserveModules: true,
  plugins: [peerDepsExternal(), commonjs(), typescript(), styles()],
}

dist after build

├── dist
│   ├── _virtual
│   │   ├── _tslib.js
│   │   └── _tslib.js.map
├── node_modules
│   │   └── rollup-plugin-styles
│   └── src
│       ├── Badge
│       ├── ...
│       ├── Icons
│       ├── index.js
│       └── utils

I expect to get

├── dist
│   ├── Badge
│   ├── ...
│   ├── Icons
│   ├── index.js
│   └── utils

What should I do?

[Anidetrix]

Hi @xlslucky,

This is due to how Rollup's preserveModules option works, has nothing to do with this plugin.

It's explained in this comment:

The folder is created because preserveModules is preserving the original file names and directory structure. It does not understand that node_modules is something special, though. Also, all exports are rewritten in a way that does not depend on Node's dependency resolution algorithm.

[prma85]

You can solve it using 2 plugins + 1 extra configuration :)

As for configuration, you will need to add this on your output: preserveModulesRoot: 'src',

an example:

import replace from '@rollup/plugin-replace';
import rename from 'rollup-plugin-rename';

export default {
  input: 'src/index.ts',
  output: [
    {
      dir: 'dist',
      format: 'cjs',
      exports: 'named',
      sourcemap: true,
      preserveModules: true,
      preserveModulesRoot: 'src',
      entryFileNames: '[name].mjs',
    },
    {
      dir: 'dist',
      format: 'es',
      exports: 'named',
      sourcemap: true,
      preserveModules: true,
      preserveModulesRoot: 'src',
    },
  ],
  // your configuration
  plugins: [
    // your other plugins
    rename({
      include: ['**/*.js', '**/*.mjs'],
      map: (name) => name.replace('node_modules/', 'external/'),
    }),
    replace({
      values: {
        'node_modules/': 'external/'
      },
      delimiters: ['', '']
    })
  ],
}

[mrrs878]

@prma85 thank you very much. But in my project, I need to simply modify the configuration of the replace plugin

replace({
  values: {
    '../node_modules/': '../external/',
  },
  // ...
}),