Building an Nx lib with Rollup does not bundle required dependencies

Question

Question

I'm using the default Rollup executor to build an Nx library that I will later run in a browser-like environment. The resulting bundle cannot contain imports or requires. Running nx run ssr-bundle:build should create a single bundle containing both my application code and dependencies.

How can I bundle all of my code so my imported code is in the same file?

Example

The source file index.ts

import { isBoolean } from 'lodash';

async function handler() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(isBoolean);
    }, 1000);
  });
}

export default handler;

The output file index.cjs.js

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var lodash = require('lodash'); <--------- this should be the lodash source code

async function handler() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(lodash.isBoolean);
    }, 1000);
  });
}

exports["default"] = handler;

Have you figured this out? I'm trying to bundle and publish a package that's referencing local and external deps. — Shawn Mclean, May 05 '22 at 23:48
Not really a direct answer, but you could consider https://github.com/nxext/nx-extensions/tree/main/packages/vite — Nick Wiltshire, May 20 '22 at 02:08

score 0 · Answer 1 · edited Aug 13 '23 at 04:05

Rollup:

multi-entry plugin

rollup.config.js

import multi from '@rollup/plugin-multi-entry';

export default {
  input: ['batman.js', 'robin.js', 'joker.js'],
  output: {
    dir: 'output'
  },
  plugins: [multi()]
};

Webpack: Use webpack and specify a single output file.

Webpack.config.js simple example:

const path = require("path");

module.exports = {
  // Specify the entry point of your application
  entry: path.resolve(__dirname, "./src/index.tsx"),
  // Specify the output path and name
  output: {
    path: path.resolve(__dirname, "../build/"),
    filename: 'bundle.js',
  },
};

if you have multiple files that are not imported inside the entry point and want multiple files (or chunks)

module.exports = {
  entry: {
    app: './src/app.js',
    search: './src/search.js',
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist',
  },
};

if you want one file:

module.exports = {
  entry: {
    app: './src/app.js',
    search: './src/search.js',
  },
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist',
  },
};

Building an Nx lib with Rollup does not bundle required dependencies

Question

Example

1 Answers1