Cesium Ion 1.110 webpack problem

CesiumJS
1

Hi everyone I am integrating Cesium Ion in my Nextjs project, but I encounter the following error while building. How can I solve this? Thanks in advance

image
image1545×496 24.8 KB

image
image1039×831 42.9 KB

2

image
image951×508 22.2 KB

3

How do I use it in nuxt.js?

image
image2122×891 113 KB

4

How to use nuxt2 and webpack4? I made an error here.

image
image2370×611 72.8 KB

image
image1377×731 81.8 KB

image
image1458×837 77.1 KB

image
image1019×108 8.83 KB

5

next.config

webpack: (config, { webpack, isServer }) => {
        if (!isServer) {
            config.plugins.push(
                new CopyWebpackPlugin({
                    patterns: [
                        {
                            from: path.join(__dirname, 'node_modules/cesium/Build/Cesium/Cesium.js'),
                            to: '../public/Cesium/Workers'
                        },

                        {
                            from: path.join(__dirname, 'node_modules/cesium/Build/Cesium/Cesium.js'),
                            to: '../public/Cesium/ThirdParty'
                        },
                        {
                            from: path.join(__dirname, 'node_modules/cesium/Build/Cesium/Cesium.js'),
                            to: '../public/Cesium/Assets'
                        },
                        {
                            from: path.join(__dirname, 'node_modules/cesium/Build/Cesium/Cesium.js'),
                            to: '../public/Cesium/Widgets'
                        }
                    ]
                })
            );
        }
        config.plugins.push(
            new webpack.DefinePlugin({
                CESIUM_BASE_URL: JSON.stringify('/cesium')
            })
        );
        config.resolve.exportsFields = [];
        return {...config, resolve: {...config.resolve, exportsFields:[]}}
        //return config;
    },
6

What version is CopyWebpackPlugin? What is the version of webpack?

7

The versions written in package.json are as follows

"webpack": "^5.89.0",
"copy-webpack-plugin": "^11.0.0",
 "next": "14.0.1",

Don’t forget to change the path. If you look at the picture in the solution, it says Cesium.js at the end of the process. Do not forget to change the path. If you look at the picture in the solution, it says Cesium.js at the end of all of them.

8

What do you mean by “change the path” ? What should the path be changed to?

9

After the 1.110 update, all variables were added to the node_modules/cesium/Build/Cesium/Cesium.js path. You can see the screenshot in the question and the screenshot in the solution.

10

But doing so fails to load other resources like css files. It does not load the globe as well. It displays the Cesium viewer partially.

11

You can this link. I’m using NextJS.

12

I am trying to load it on Next.js v14.0.3. Following the same configuration as given by @selim_sezer , the globe is not loading. I am getting these errors on my console.

image
image1921×912 144 KB

13

Is there postinstall in the package.json file? If not, you can run npm run postinstall after adding the following code to the package.json file. It will create a cesium folder inside the public folder.

"postinstall": "symlink-dir node_modules/cesium/Build/Cesium public/cesium",

14

Okay, thanks @selim_sezer. It is working perfectly now.

15

I recommend doing a clean install. After deleting the node_modules, public/cesium and .next folders, type the following commands.

  1. npm install
  2. npm run postinstall
  3. npm run dev