Hello, I am developing a library in which I use cesium for 3D functionality but when I package it and try to use it in a React application I get an error that it does not recognize “cesium” as a module. I attach several files as my webpack configuration in the library as well as the error message. Thank you very much in advance.
// The path to the CesiumJS source code
const cesiumSource = "node_modules/cesium/Source";
const cesiumWorkers = "../Build/Cesium/Workers";
const CopyWebpackPlugin = require("copy-webpack-plugin");
const path = require("path");
const webpack = require("webpack");
module.exports = {
target: "web",
context: __dirname,
entry: {
app: "./src/index.ts",
},
performance: {
hints: false,
maxEntrypointSize: 512000,
maxAssetSize: 512000,
},
optimization: {
minimize: true,
},
output: {
filename: "index.js",
path: path.resolve(__dirname, "dist"),
libraryTarget: "umd",
globalObject: "this",
umdNamedDefine: true,
sourcePrefix: "",
},
externals: {
cesium: "cesium",
},
amd: {
// Enable webpack-friendly use of require in Cesium
toUrlUndefined: true,
},
resolve: {
alias: {
cesium: path.resolve(__dirname, cesiumSource),
},
mainFiles: ["index", "Cesium"],
extensions: [".tsx", ".ts", ".js"],
},
devServer: {
contentBase: path.join(__dirname, "dist"),
allowedHosts: "all",
compress: true,
port: 9000,
},
module: {
rules: [
{
test: /\.ts(x?)$/,
use: "ts-loader",
exclude: /node_modules/,
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
{
test: /\.(png|gif|jpg|jpeg|xml|json)$/,
use: ["file-loader"],
exclude: /node_modules/,
},
{
test: /\.svg/,
type: "asset/inline",
},
],
},
plugins: [
// Copy Cesium Assets, Widgets, and Workers to a static directory
new CopyWebpackPlugin({
patterns: [
{ from: path.join(cesiumSource, cesiumWorkers), to: "Workers" },
{ from: path.join(cesiumSource, "Assets"), to: "Assets" },
{ from: path.join(cesiumSource, "Widgets"), to: "Widgets" },
],
}),
new webpack.DefinePlugin({
// Define relative base path in cesium for loading assets
CESIUM_BASE_URL: JSON.stringify(""),
}),
],
devtool: false,
};