jaredpalmer / tsdx

Zero-config CLI for TypeScript package development
https://tsdx.io
MIT License
11.2k stars 505 forks source link

TSDX issue with Vite.JS bundler ("require not defined") #1141

Open jonit-dev opened 2 years ago

jonit-dev commented 2 years ago

Current Behavior

Hey folks! I'm building a module in TSDX which imports some images, like the following:

import aliceDefaultThumbnail from './img/npcDialog/npcThumbnails/alice.png';
import pressSpaceGif from './img/space.gif';

Once I run 'yarn build', it generates a bundle with the corresponding code:

...
const img = require('./alice.png');

const img$1 = require('./space.gif');
...

The problem is that when I install this module on Vite.JS and try to build it, now it crashes the whole app with a "require not defined".

Expected behavior

No require errors on vite build.

Suggested solution(s)

As a temporary workaround, I'm generating these images as base64, to avoid the require statements. It doesn't feel like the proper solution, though.

// tsdx.config.js
const images = require('rollup-plugin-image-base64');

module.exports = {
  rollup(config, options) {
    config.plugins = [
      images({ include: ['**/*.png', '**/*.jpg', '**/*.gif'] }),
      ...config.plugins,
    ];

    return config;
  },
};

Your environment

 npx: installed 1 in 0.753s

  System:
    OS: Linux 5.11 Ubuntu 20.04.3 LTS (Focal Fossa)
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 2.77 GB / 15.51 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 14.19.1 - /bin/node
    Yarn: 1.22.18 - ~/.yarn/bin/yarn
    npm: 6.14.16 - /bin/npm
  Browsers:
    Chrome: 102.0.5005.61
    Firefox: 93.0
  npmPackages:
    tsdx: ^0.14.1 => 0.14.1 
    typescript: ^4.6.2 => 4.6.2 

Thank you in advance!