excalidraw / excalidraw

Virtual whiteboard for sketching hand-drawn like diagrams
https://excalidraw.com
MIT License
81.1k stars 7.48k forks source link

ChunkLoadError: Loading chunk 4736 failed. (missing: ...) #6090

Open chunrapeepat opened 1 year ago

chunrapeepat commented 1 year ago

I got this error while trying to embed Excalidraw into my Chrome extension:

Uncaught (in promise) ChunkLoadError: Loading chunk 4736 failed.
(missing: chrome-extension://fjjojjgilbdinjfbdleioobmkejeegbp/excalidraw-assets/vendor-d6acb4a59ce837fa6a05.js)
    at u.f.j (index.js:2:1060024)
    at index.js:2:1055496
    at Array.reduce (<anonymous>)
    at u.e (index.js:2:1055461)
    at 1393 (index.js:2:834638)
    at u (index.js:2:1054625)
    at 5523 (index.js:2:840633)
    at u (index.js:2:1054625)
    at 4162 (index.js:2:1005799)
    at u (index.js:2:1054625)

After installing the Excalidraw package, I copy the excalidraw-assets and excalidraw-assets to my static folder. Add that folder path to web_accessible_resources on manifest.json. Set the window.EXCALIDRAW_ASSET_PATH to chrome.runtime.getURL(''). And the vendor-d6ac...6a05.js file is loaded correctly with status code 200.

I've no idea why I got this error; I also tried embedding the same version of the Excalidraw pkg on create-react-app, but no errors happened. Not sure if there is something about my Webpack configuration.

My Webpack Config: ```js const path = require('path'); const TerserPlugin = require('terser-webpack-plugin'); module.exports = { entry: {...}, output: { path: path.join(__dirname, 'dist/js'), filename: '[name].js', }, module: { rules: [ { exclude: /node_modules/, test: /\.tsx?$/, use: 'ts-loader', }, { exclude: /node_modules/, test: /\.(sa|sc|c)ss$/, use: ['css-loader', 'style-loader'], }, ], }, resolve: { extensions: ['.ts', '.tsx', '.js', '.jsx', '.css', '.scss'], }, optimization: { minimize: true, minimizer: [ new TerserPlugin({ terserOptions: { output: { ascii_only: true }, }, }), ], }, }; ```

Is there any way to debug this issue?

ad1992 commented 1 year ago

@chunza2542 does it work fine when you don't add the asset path ? (It should try to get the path from unpkg in that case)

chunrapeepat commented 1 year ago

@ad1992, the script got blocked by Chrome manifest v3 policy. https://developer.chrome.com/docs/extensions/mv3/mv3-migration/#remotely-hosted-code