Cannot add external to Rollup config

[daraclare]

trafficstars

Current Behavior

I need to exclude a module through rollup in the tsdx.config.js file. However, when I add a comma-separate list of module IDs to exclude i.e.

module.exports = {
  rollup(config, options) {
    config.external = ['next/router'];
    return config; 
  },
};

I get the following error when I run yarn build: The 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten

Expected behavior

The module is excluded and the build runs without errors.

Suggested solution(s)

Could we have an example of how to add to externals through the tsdx.config.js file? Or could the TSDX config allow for the standard external config of a comma-separate array?

Additional context

Your environment

Software	Version(s)
TSDX	0.9.x
TypeScript	3.6.3
Browser	Chrome 76.x
npm/Yarn	1.17.3
Operating System	Mac OS 10.14.6

[jaredpalmer]

Is this still happening?

[daraclare]

Thanks for the response, we had to find another solution, so I can't test it in our repo unfortunately. Is the above the correct method for excluding modules in the tsdx.config.js file? I think some docs would be really useful on this, and maybe on the other possible configs in the tsdx.config.js file. I'd be happy to help, but not sure what's the correct approach.

[dynamite-ready]

Is this still happening?

I've found a similar issue. After creating a tsdx.config.js file at the root of my project, it looks like it's never executed.

I suspect this is the case, after just adding random garbage to the file, and running tsdx build through an NPM script (with Yarn). It builds, and never chokes on the deliberately broken code I added to the config.

[DevanB]

I've solved this with a plugin that automatically adds peerDeps to the external array:

tsdx.config.js

const peerDepsExternal = require("rollup-plugin-peer-deps-external");

module.exports = {
  rollup(config) {
    config.plugins.push(
      peerDepsExternal()
    );
    return config;
  }
}

[scriptex]

I had a similar issue. I needed to support SVG files in React components so I installed and included rollup-plugin-svg.

This is my tsdx.config.js file with the diff which resolved the issue:

const svg = require('rollup-plugin-svg');

module.exports = {
  rollup(config) {
-   const external = config.external;
-   config.external = id => (id.match(/.svg$/) ? false : external(id));
    config.plugins.push(
      svg({
        base64: false,
      })
    );
    return config;
  },
};

The two removed rows were causing the The 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten warning to appear.

[bassem97]

config.external = ['next/router'];

same issue here :/