Supporting Webpack with a Vite TS Library

[pcclarke]

I have a Vanilla TypeScript library that uses Vite similar to the starter library project. I'm trying to install it into an Angular application that uses @angular-devkit/build-angular:browser, which builds with Webpack, I get a module not found error for anything exported from my TS library. If I try any other Webpack applications, I get a similar result.

For example, if I try installing that starter library project into a Webpack boilerplate and importing sum(), I get the following error:

ERROR in ./src/js/example.js 2:0-50
Module not found: Error: Can't resolve 'vite-vanilla-ts-lib-starter' in '/workdir/projects/webpack-boilerplate/src/js'
resolve 'vite-vanilla-ts-lib-starter' in '/workdir/projects/webpack-boilerplate/src/js'
  Parsed request is a module
  using description file: /workdir/projects/webpack-boilerplate/package.json (relative path: ./src/js)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      looking for modules in /workdir/projects/webpack-boilerplate/src
        single file module
          using description file: /workdir/projects/webpack-boilerplate/package.json (relative path: ./src/vite-vanilla-ts-lib-starter)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /workdir/projects/webpack-boilerplate/src/vite-vanilla-ts-lib-starter doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /workdir/projects/webpack-boilerplate/src/vite-vanilla-ts-lib-starter.js doesn't exist
            .jsx
              Field 'browser' doesn't contain a valid alias configuration
              /workdir/projects/webpack-boilerplate/src/vite-vanilla-ts-lib-starter.jsx doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              /workdir/projects/webpack-boilerplate/src/vite-vanilla-ts-lib-starter.json doesn't exist
        /workdir/projects/webpack-boilerplate/src/vite-vanilla-ts-lib-starter doesn't exist
      /workdir/projects/webpack-boilerplate/src/js/node_modules doesn't exist or is not a directory
      /workdir/projects/webpack-boilerplate/src/node_modules doesn't exist or is not a directory
      looking for modules in /workdir/projects/webpack-boilerplate/node_modules
        single file module
          using description file: /workdir/projects/webpack-boilerplate/package.json (relative path: ./node_modules/vite-vanilla-ts-lib-starter)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /workdir/projects/webpack-boilerplate/node_modules/vite-vanilla-ts-lib-starter is not a file
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /workdir/projects/webpack-boilerplate/node_modules/vite-vanilla-ts-lib-starter.js doesn't exist
            .jsx
              Field 'browser' doesn't contain a valid alias configuration
              /workdir/projects/webpack-boilerplate/node_modules/vite-vanilla-ts-lib-starter.jsx doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              /workdir/projects/webpack-boilerplate/node_modules/vite-vanilla-ts-lib-starter.json doesn't exist
        existing directory /workdir/projects/webpack-boilerplate/node_modules/vite-vanilla-ts-lib-starter
          using description file: /workdir/projects/webpack-boilerplate/node_modules/vite-vanilla-ts-lib-starter/package.json (relative path: .)
            using exports field: ./dist/vite-vanilla-ts-lib-starter.js
              using description file: /workdir/projects/webpack-boilerplate/node_modules/vite-vanilla-ts-lib-starter/package.json (relative path: ./dist/vite-vanilla-ts-lib-starter.js)
                no extension
                  Field 'browser' doesn't contain a valid alias configuration
                  /workdir/projects/webpack-boilerplate/node_modules/vite-vanilla-ts-lib-starter/dist/vite-vanilla-ts-lib-starter.js doesn't exist
                .js
                  Field 'browser' doesn't contain a valid alias configuration
                  /workdir/projects/webpack-boilerplate/node_modules/vite-vanilla-ts-lib-starter/dist/vite-vanilla-ts-lib-starter.js.js doesn't exist
                .jsx
                  Field 'browser' doesn't contain a valid alias configuration
                  /workdir/projects/webpack-boilerplate/node_modules/vite-vanilla-ts-lib-starter/dist/vite-vanilla-ts-lib-starter.js.jsx doesn't exist
                .json
                  Field 'browser' doesn't contain a valid alias configuration
                  /workdir/projects/webpack-boilerplate/node_modules/vite-vanilla-ts-lib-starter/dist/vite-vanilla-ts-lib-starter.js.json doesn't exist
                as directory
                  /workdir/projects/webpack-boilerplate/node_modules/vite-vanilla-ts-lib-starter/dist/vite-vanilla-ts-lib-starter.js doesn't exist
      /workdir/projects/node_modules doesn't exist or is not a directory
      /workdir/node_modules doesn't exist or is not a directory
      /Users/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
 @ ./src/index.js 2:0-39 14:22-29

I take it that the module is not being found because Webpack does not support the ESM format that Vite is building. Where I get lost is how to configure my vite.config.ts and tsconfig.json to support Webpack — if that is at all possible. If I try switching my output to cjs, it doesn't seem to make much of a difference. Are there any guides/examples of how to make Vite libraries work with Webpack?

And before you ask: yes I'm stuck with supporting said Angular projects set to @angular-devkit/build-angular:browser.

[rschristian]

Is your library public anywhere? Pretty hard for people to diagnose issues without being able to see the source.

[pcclarke]

It is not. However, the vite-vanilla-ts-lib-starter repository is structured very similar to mine, and I'm seeing the same type of error. A solution for installing that to a Webpack project should solve my problem.