'Unable to determine Cesium base URL automatically (Typescript)

I am trying to setup cesium and resium for react typescript and got stuck on the very initial steps. I am currently referencing steps from the following resium website, from here I have installed the packages and attempted to setup webpack based on the following steps. Based on the steps i installed the following package

npm install copy-webpack-plugin html-webpack-plugin html-webpack-include-assets-plugin
npm install cesium resium

The following example was also presented so i attempted to mimic the settings as much as possible creating and tweaking the following files in my root directory

webpack.config.js
package.json (Adding of scripts)

Once done I changed the following setting CESIUM_BASE_URL: JSON.stringify("/cesium") in webpack.config.js to point to my python server(https://localhost:5000) for the necessary tiles.

With this I expected the error to at least go away or maybe even stating another error such as "Asset XXX not found". But the error stating DeveloperError: Unable to determine Cesium base URL automatically, try defining a global variable called CESIUM_BASE_URL still persists.

I have also tried setting a variable for CESIUM_BASE_URL in env.local but it still doesn't work. Any pointers or guidance to any missing steps will be greatly appreciated.

Solution 1:^[1]

The best way to do this is probably in your webpack.config.js file by adding the CopyPlugin from webpack.

In the config:

      new DefinePlugin({
        CESIUM_BASE_URL: JSON.stringify(env.CESIUM_BASE_URL || 'http://localhost/'),
      }),

Solution 2:^[2]

configureWebpack: {
     plugins: [
      new CopyWebpackPlugin({
        patterns: [
          { from: Path.resolve('./node_modules/cesium/Source/Workers'), to: 'Workers' },
          { from: Path.resolve('./node_modules/cesium/Source/Assets'), to: 'Assets' },
          { from: Path.resolve('./node_modules/cesium/Source/Widgets'), to: 'Widgets' },
          { from: Path.resolve('./node_modules/cesium/Source/ThirdParty/Workers'), to: 'WoThirdParty/Workersrkers' },
        ]
      }),
      new webpack.DefinePlugin({
      CESIUM_BASE_URL: JSON.stringify('./')
      })
      ],
  },

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	ultra_rn
Solution 2	HeYuanPeng

'Unable to determine Cesium base URL automatically (Typescript)

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]