Rollup warnings during UMD builds: "but could not be resolved -- treating it as an external dependency" and "No name was provided for external module"

[zerofront]

Current Behavior

I create a project webttttt by using tsdx create webttttt (select basic).

and create on simple function and build and publish in npm.

then I create another project by using tsdx create (select basic).

I import a function from webttttt and build package by using tsdx build --format cjs,esm,umd

then

⠸ Building modules  99%                 3.2s, estimated 3.2s
'webttttt' is imported by src/index.ts, but could not be resolved – treating it as an external dependency
'webttttt' is imported by src/index.ts, but could not be resolved – treating it as an external dependency
No name was provided for external module 'webttttt' in output.globals – guessing 'webttttt'

[agilgur5]

UMD context missing

So you removed the bottom half of the issue template -- please don't do that, it is there for a reason. Since you didn't fill it out, it's difficult to tell the context here, such as why you're building UMD specifically, how you plan on using UMD, and if you know what UMD entails. UMD is not part of TSDX's defaults and is not very popular in and out of TSDX (at least not in today's day and age of package managers). I'll try answering without that, but issue templates are important to fill out and giving context and intent is important when creating an issue.

How UMD in Rollup works

These are warnings from Rollup (and some core plugins) specifically for the UMD build. It seems like you may not be familiar with what UMD entails, so I'll summarize a bit below.

TSDX by default treats all absolute imports as externals, meaning that dependencies are not bundled. For packages that are installed, that's fine and is in fact the norm, as the deps will automatically be brought in via a package manager like NPM. In UMD though, that means the deps must exist in a global already. output.globals is where you specify the name of the global variable. If it's not explicitly specified, Rollup will "guess" as it did here.

Fixing globals warnings

That guess probably looks correct in your case, so you could ignore the warning, or to remove the warning, you could explocitly specify Rollup's output.globals via tsdx.config.js. That is partially discussed in https://github.com/formium/tsdx/issues/132.

If you'd prefer to bundle your deps in UMD, you can do so by following the directions in https://github.com/formium/tsdx/issues/179#issuecomment-605502952 .

Fixing "could not be resolved" warnings

Regarding the "could not be resolved" error, I can't seem to find what I thought was a @rollup/plugin-commonjs bug...

But that might be occurring correctly actually -- did you yarn install webttttt? It has to be in node_modules for @rollup/plugin-node-resolve to automatically pick it up.

[zerofront]

@agilgur5

UMD context

I want to bundle deps in UMD to check the final size

Flow

project A

tsdx create A (select basic)`

change src/index.ts

import dayjs from 'dayjs'
import axios from 'axios'

const sum = (a: number, b: number) => {
  console.log('boop');
  return a + b;
};

const minus = (a: number, b: number) => {
  console.log('poop');
  return a - b;
};

export {
  sum,
  minus,
  dayjs,
  axios,
}

npm publish

project B

tsdx create B (select basic)`

change src/index.ts

import { minus } from 'A'

function final(a: number, b: number) {
  return minus(a, b)
}

export {
  final
}

change tsdx.config.js

module.exports = {
  rollup(config) {
    if (config.output.format === 'umd') {
      delete config.external;
    }
    return config;
  }
}

check umd.development.js and umd.production.min.js. Both of these include dayjs and axios, although B does not use axios and dayjs

[agilgur5]

But that might be occurring correctly actually -- did you yarn install webttttt? It has to be in node_modules for @rollup/plugin-node-resolve to automatically pick it up.

This was never answered.

I want to bundle deps in UMD to check the final size

All TSDX templates come with size-limit for checking bundle size thanks to #705 , per the templates' READMEs (see yarn size and yarn analyze), so you wouldn't need UMD for that.

check umd.development.js and umd.production.min.js. Both of these include dayjs and axios, although B does not use axios and dayjs

This was a tree-shaking question (I did not catch that on my initial read of this), and it was responded to separately in #992 which duplicated most of this comment.