Cesium Ion 1.110 webpack problem

[selim_sezer]

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

[selim_sezer]

[bbhxwl]

How do I use it in nuxt.js?

[bbhxwl]

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

[selim_sezer]

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;
    },

[bbhxwl]

@selim_sezer

CopyWebpackPlugin

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

[selim_sezer]

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.

[Kavish]

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

[selim_sezer]

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.

[Kavish]

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.

[selim_sezer]

You can this link. I’m using NextJS.

[Kavish]

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.

[selim_sezer]

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",

[Kavish]

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

[selim_sezer]

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