Supporting Webpack with a Vite TS Library

[haoshuai-mis]

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.

[alexander-akait]

I think you have wrong paths somewhere

[haoshuai-mis]

Could you offer some suggestions about how I can address the path issues in vite.config.js or tsconfig.json

[alexander-akait]

No, need debug