Cesium & Nextjs

CesiumJS
1

Hi,
I’m trying to build my next js app that uses cesium package.

I can run the dev build, but when next build executes (so I can ship it) - it fails to copy over files from ‘node_modules/cesium/Build/Cesium/Workers’ due to “‘import’, and ‘export’ cannot be used outside of module code” (done by CopyWebpackPlugin in next.config.js).

Can you advise how nextjs (and webpack) should be configured to allow cesium to be used?

new CopyWebpackPlugin({
patterns: [
{
from: path.join(
__dirname,
‘node_modules/cesium/Build/Cesium/Workers’
),
to: ‘…/public/Cesium/Workers’,
},
{
from: path.join(
__dirname,
‘node_modules/cesium/Source/ThirdParty’
),
to: ‘…/public/Cesium/ThirdParty’,
},
{
from: path.join(
__dirname,
‘node_modules/cesium/Source/Assets’
),
to: ‘…/public/Cesium/Assets’,
},
{
from: path.join(
__dirname,
‘node_modules/cesium/Source/Widgets’
),
to: ‘…/public/Cesium/Widgets’,
},
],
})

1 Like
2

Hi there,

Could you highlight any differences in configuration between your dev webpack build and release webpack build?

Thanks,
Gabby

3

Working for me i can post my setup later

4

Thanks

5

This is my next.config.js

const webpack = require("webpack");

module.exports = {
  reactStrictMode: true,
  webpack: (config) => {
    config.plugins.push(
      new webpack.DefinePlugin({
        CESIUM_BASE_URL: JSON.stringify("/cesium"),
      }),
    );
    return config;
  },
};
6 
mine is a bit longer

/** @type {import('next').NextConfig} */
const CopyWebpackPlugin = require("copy-webpack-plugin");
const path = require("path");

//isServer is true when nextRuntime is "edge" or "nodejs", nextRuntime "edge"
//https://nextjs.org/docs/app/api-reference/next-config-js/webpack
module.exports = {
  webpack: (
    config,
    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
  ) => {
    if (!isServer) {
      config.plugins.push(
        new CopyWebpackPlugin({
          patterns: [
            {
              from: path.join(
                __dirname,
                "node_modules/cesium/Build/Cesium/Workers"
              ),
              to: "../public/Cesium/Workers",
            },
            {
              from: path.join(
                __dirname,
                "node_modules/cesium/Build/Cesium/ThirdParty"
              ),
              to: "../public/Cesium/ThirdParty",
            },
            {
              from: path.join(
                __dirname,
                "node_modules/cesium/Build/Cesium/Assets"
              ),
              to: "../public/Cesium/Assets",
            },
            {
              from: path.join(
                __dirname,
                "node_modules/cesium/Build/Cesium/Widgets"
              ),
              to: "../public/Cesium/Widgets",
            },
          ],
        })
      );
    }

    config.plugins.push(
      new webpack.DefinePlugin({
        CESIUM_BASE_URL: JSON.stringify("/Cesium"),
      })
    );
    // Important: return the modified config
    //console.error("config.module.rules: ", JSON.stringify(config.module.rules));
    //console.error("\nconfig.module.plugins: ", JSON.stringify(config.module.plugins));
    return config;
  },
  async redirects() {
    return [
      {
        source: "/privacy",
        destination: "/",
        permanent: true,
      },
      {
        source: "/terms",
        destination: "/",
        permanent: true,
      },
    ];
  },
};
7

Has somebody set it up for next 14 btw? I tried upgrading and it fails for me with this

8

@ka_sc I got it working by changing swcMinify to false. It seems like the minifier wants to minify Cesium’s already built files.

It unfortunately increases the build time. I’ll see if I can selectively disable SWC.

I’m making use of Resuim that initilizes two Cesium viewers, so I had to disable React.StrictMode.

1 Like
9

@ka_sc @Skippo @njj24 I know this is old but check this thread out: Success! Next.js 14, TypeScript + Cesium on Vercel

I hope it’s helpful.

10

@Hyun_Seo

What a champ! You’ve got a much better solution!

1 Like