Building excalidraw-app to a single file?

[mattrossman]

Since the @excalidraw/excalidraw package doesn't implement collaboration mode, I'd like to build the full excalidraw-app to a JS file that I can run on my site. Currently, Create-React-App builds excalidraw into a large number of JS chunk files with randomized names, which makes it difficult to consume in my site.

I have tried to modify webpack's behavior using craco as well as ejecting from CRA, but the suggested solutions (1, 2) that I found don't work in this project (either producing multiple chunks anyway, or throwing an error). Perhaps it has something to do with the use of dynamic imports and webpack comment directives.

I found a related discussion in #3961, though this thread appears to be talking about the @excalidraw/excalidraw package rather than the full app.

Has anyone succeeded at building excalidraw-app to a single JS file with a predictable name?

[ad1992]

@mattrossman is there any specific reason you want to build into a single JS file ? You can do the steps mentioned in #3879 (comment) and to make sure the build is a single file, you can use limitChunkPlugin and pass maxChunks as 1.
But you will be missing the features like lazy loading, and the bundle will be huge.

[mattrossman]

The reason is that I want to integrate excalidraw in my site including the collaboration features. If I use the @excalidraw/excalidraw package, then I'd need to add my own networking layer which seems like a lot of work. I need access to the canvas so an iframe isn't suitable either. The current excalidraw-app build scatters necessary JS files into lots of randomly named chunks that are referenced from the HTML output, which is not something I can easily consume from my app.

I have tried using the LimitChunkPlugin but it produces an error for excalidraw-app. In order to add this plugin to CRA's webpack configuration, I installed @craco/craco and replaced the react-scripts references in package.json scripts with craco.

Here is the config:

/* craco.config.js */

const webpack = require("webpack");

module.exports = {
  webpack: {
    plugins: [
      new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 1,
      }),
    ],
  },
};

Running yarn build produces this error:

Failed to compile.

chunk runtime-main [entry]
Cannot convert undefined or null to object

Potential Solution:

Taking another look at your response here, it's seems I may be able to get my desired output by simply changing the excalidraw package to point at excalidraw-app's index file (and optionally adding the LimitChunkPlugin there) without changing the server endpoint, and building that package instead of the project root. At least, it appears to be building properly and results in one large JS bundle. I will test this more thoroughly tomorrow to see if I can consume that bundle in my app with collaboration mode working.

[mattrossman]

Yes, after testing today it works! Here are the modifications I made:

In src/packages/excalidraw I copied webpack.prod.config.js to webpack.custom.config.js to house my modified config.

Then in src/excalidraw-app I added an entry.tsx file with a function to mount the app:

// entry.tsx

import ReactDOM from "react-dom";
import ExcalidrawApp from "./index";

// Will be available in UMD build on `Excalidraw.mount()`
export function mount(domElement: HTMLElement) {
  ReactDOM.render(<ExcalidrawApp />, domElement);
}

In my webpack config I changed the "entry" field to point at this .tsx file.

// webpack.custom.config.js

  entry: {
    "excalidraw.custom.min": "../../excalidraw-app/entry.tsx",
  },

At the top I require-ed webpack and in the "plugins" array I added new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 }).

I also exposed the .env file in the webpack config with dotenv:

// webpack.custom.config.js

require("dotenv").config({ path: "../../../.env" });

// In the "plugins" field (there is probably a more safe way to do this
...
new webpack.DefinePlugin({  "process.env": JSON.stringify(process.env) }),
...

Lastly I added a new build script to src/packages/excalidraw/package.json:

"build:custom": "cross-env NODE_ENV=production webpack --config webpack.custom.config.js",

Running that script yielded a single large excalidraw.custom.min.js bundle in dist/. After I run this script on my page, I can use Excalidraw.mount(document.getElementById('root')) in a properly sized root element to see the full excalidraw app running on my site with collaboration features working!

[ad1992]

Awesome. 👍🏻 , why was the webpack.DefinePlugin plugin needed ? Did you try using mode in webpack config ?

[mattrossman]

Without that, I got errors about process.env not being defined in the browser console. Since excalidraw-app is normally built with Create-React-App, it automatically reads the values from the root .env file (as long as they start with "REACT_APP_") and exposes them on process.env during compilation. Since I'm using the excalidraw package's webpack config instead, it doesn't know about those environment variables. So I first read them using dotenv and then expose them to the client code with the webpack.DefinePlugin part.