Wrong import and missing types in Quill 2.0 Beta 0

[pablopla]

The entrypoint in Quill 2.0 Beta is probably wrong and the typescript types are missing.
I've tried to use "main": "dist/quill.js" instead of "main": "quill.js"
and add "types": "quill.d.ts" or "types": "types.d.js" in package.json but it still doesn't work.
https://github.com/quilljs/quill/blob/develop/packages/quill/package.json#L7

Steps for Reproduction

1. Create angular 17 or Webpack project
2. import { Quill } from 'quill';
3. Compile the project

Expected behavior:
Use node_modules/quill/dist/quill.js and typescript types

Actual behavior:
Uses node_modules/quill.js without typescript types
Fail to load svg files:

./node_modules/quill/assets/icons/align-center.svg:1:0 - Error: Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <svg viewbox="0 0 18 18">
|   <line class="ql-stroke" x1="15" x2="3" y1="9" y2="9"></line>
|   <line class="ql-stroke" x1="14" x2="4" y1="14" y2="14"></line>

Platforms:
Angular 17.0 project

Version:
v2.0.0-beta.0

[luin]

You need to provide a loader for svg files. Refer quilljs/webpack-example#8 for a sample webpack setup. There's also a documentation describing that: https://quilljs.com/guides/adding-quill-to-your-build-pipeline/, though it was written for 1.x.

"main": "quill.js" is the expected entrypoint for CJS/ESM projects whereas "dist/quill.js" is in UMD format.

Type declaration works for me (https://share.cleanshot.com/24TGwClp). If you have installed @types/quill, please remove it as Quill provides the official declarations.

Having said that, it's reasonable to inline svg files for CJS/ESM setups so we may do that in the future versions so you don't need to handle SVG files in your bundler setups.

[pablopla]

Inline SVG files will greatly simplify using Quill. Importing SVG requires custom Webpack builder or custom esbuild loader in Angular 17 but I couldn't make it work.
I've followed the webpack example with an Angular 17.1 project. Angular 17.1 added support for esbuild svg loader.
The SVG path appears as a string in the toolbar buttons instead of the actual SVG content:

<button type="button" class="ql-bold" aria-pressed="false" aria-label="bold">/@fs/home/u/project/node_modules/quill/assets/icons/bold.svg</button>

Relevant angular.json config:

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "loader": {
              ".svg": "text"
            },

[pablopla]

Should be fixed by #3950

[luin]

@pablopla Feel free to try it out with npm i quill@experimental.