How do I use webpack to package Cesium?

[bbhxwl]

Summary

How do I use webpack to package Cesium?
I don't know why I can copy files when I run it below?
next.js 15

import type {NextConfig} from "next";

import CopyWebpackPlugin from 'copy-webpack-plugin';
import path from 'path';
import process from "process";
import {WebpackConfigContext} from "next/dist/server/config-shared";

const pathBuilder = (subpath: any) => path.join(process.cwd(), subpath);


const nextConfig: NextConfig = {
    webpack: (config, {webpack}: WebpackConfigContext) => {
        config.plugins.push(
            new CopyWebpackPlugin({
                patterns: [
                    {
                        from: pathBuilder('node_modules/cesium/Build/Cesium/Workers'),
                        to: './public/cesium/Workers',
                        info: {minimized: true}
                    }
                ]
            }),
            new webpack.DefinePlugin({CESIUM_BASE_URL: JSON.stringify('/cesium')})
        );
        return config
    },
    output: "standalone"
};

export default nextConfig;

Additional information

No response

Example

No response

[Umuts-Codes]

Hi,

When integrating Cesium with Next.js and Webpack, the approach you’ve outlined is generally correct, but there are some important considerations to ensure the assets are correctly copied and available at runtime.

Key Points:

Copying Cesium Workers and Assets

The copy-webpack-plugin should work, but the to path must be relative to your output directory. For standalone builds, using ./public/cesium/Workers may not resolve correctly.

Recommended configuration:

import CopyWebpackPlugin from 'copy-webpack-plugin';
import path from 'path';
import process from 'process';

const pathBuilder = (subpath: string) => path.join(process.cwd(), subpath);

webpack: (config) => {
config.plugins.push(
new CopyWebpackPlugin({
patterns: [
{
from: pathBuilder('node_modules/cesium/Build/Cesium/Workers'),
to: pathBuilder('public/cesium/Workers'),
},
{
from: pathBuilder('node_modules/cesium/Build/Cesium/Assets'),
to: pathBuilder('public/cesium/Assets'),
},
{
from: pathBuilder('node_modules/cesium/Build/Cesium/Widgets'),
to: pathBuilder('public/cesium/Widgets'),
}
]
})
);
return config;
}

Make sure the directories exist before the build and that Webpack has permission to write into public/cesium.

Setting CESIUM_BASE_URL

Cesium requires a runtime base URL to locate its workers and assets. Define it as follows:

new webpack.DefinePlugin({
CESIUM_BASE_URL: JSON.stringify('/cesium')
})

This should match the location where the assets are served (public/cesium).

Standalone Build Considerations:

When using output: "standalone", the build output may differ from a standard build. Ensure that the paths in CopyWebpackPlugin are correctly resolved relative to the final output directory.

Alternative Approach:

If issues persist, consider copying Cesium assets manually to the public folder and serving them statically, bypassing Webpack for these static assets. This avoids path resolution issues during build.

Summary:

Verify all Cesium asset paths (Workers, Assets, Widgets) are copied into public/cesium.

Ensure CESIUM_BASE_URL matches the static folder.

Adjust paths for standalone builds if necessary.

Manual copying is a valid fallback to guarantee the assets are available at runtime.

Following this setup should allow Cesium to work correctly in both development and production builds in Next.js.

This addresses both the asset copying and runtime path issues, ensuring Cesium functions as expected.