diff --git a/src/ol/layer/Base.js b/src/ol/layer/Base.js
index c6c9cd8c13..1b500de820 100644
--- a/src/ol/layer/Base.js
+++ b/src/ol/layer/Base.js
@@ -260,7 +260,7 @@ class BaseLayer extends BaseObject {
 
   /**
    * @abstract
-   * @return {import("../source/State.js").default} Source state.
+   * @return {import("../source/Source.js").State} Source state.
    */
   getSourceState() {
     return abstract();
diff --git a/src/ol/layer/Group.js b/src/ol/layer/Group.js
index 9f3ae957cb..a0d5168849 100644
--- a/src/ol/layer/Group.js
+++ b/src/ol/layer/Group.js
@@ -7,7 +7,6 @@ import CollectionEventType from '../CollectionEventType.js';
 import Event from '../events/Event.js';
 import EventType from '../events/EventType.js';
 import ObjectEventType from '../ObjectEventType.js';
-import SourceState from '../source/State.js';
 import {assert} from '../asserts.js';
 import {assign, clear} from '../obj.js';
 import {getIntersection} from '../extent.js';
@@ -343,10 +342,10 @@ class LayerGroup extends BaseLayer {
   }
 
   /**
-   * @return {import("../source/State.js").default} Source state.
+   * @return {import("../source/Source.js").State} Source state.
    */
   getSourceState() {
-    return SourceState.READY;
+    return 'ready';
   }
 }
 
diff --git a/src/ol/layer/Layer.js b/src/ol/layer/Layer.js
index 5984a642f9..1eb163f4a3 100644
--- a/src/ol/layer/Layer.js
+++ b/src/ol/layer/Layer.js
@@ -5,7 +5,6 @@ import BaseLayer from './Base.js';
 import EventType from '../events/EventType.js';
 import LayerProperty from './Property.js';
 import RenderEventType from '../render/EventType.js';
-import SourceState from '../source/State.js';
 import {assert} from '../asserts.js';
 import {assign} from '../obj.js';
 import {listen, unlistenByKey} from '../events.js';
@@ -213,7 +212,7 @@ class Layer extends BaseLayer {
    */
   getSourceState() {
     const source = this.getSource();
-    return !source ? SourceState.UNDEFINED : source.getState();
+    return !source ? 'undefined' : source.getState();
   }
 
   /**
diff --git a/src/ol/layer/MapboxVector.js b/src/ol/layer/MapboxVector.js
index 67f3736323..d1928b41da 100644
--- a/src/ol/layer/MapboxVector.js
+++ b/src/ol/layer/MapboxVector.js
@@ -4,7 +4,6 @@
 import BaseEvent from '../events/Event.js';
 import EventType from '../events/EventType.js';
 import MVT from '../format/MVT.js';
-import SourceState from '../source/State.js';
 import VectorTileLayer from '../layer/VectorTile.js';
 import VectorTileSource from '../source/VectorTile.js';
 import {applyBackground, applyStyle} from 'ol-mapbox-style';
@@ -144,7 +143,7 @@ class MapboxVectorLayer extends VectorTileLayer {
   constructor(options) {
     const declutter = 'declutter' in options ? options.declutter : true;
     const source = new VectorTileSource({
-      state: SourceState.LOADING,
+      state: 'loading',
       format: new MVT(),
     });
 
@@ -179,12 +178,12 @@ class MapboxVectorLayer extends VectorTileLayer {
       accessToken: this.accessToken,
     })
       .then(() => {
-        source.setState(SourceState.READY);
+        source.setState('ready');
       })
       .catch((error) => {
         this.dispatchEvent(new ErrorEvent(error));
         const source = this.getSource();
-        source.setState(SourceState.ERROR);
+        source.setState('error');
       });
     if (this.getBackground() === undefined) {
       applyBackground(this, options.styleUrl, {
diff --git a/src/ol/renderer/Composite.js b/src/ol/renderer/Composite.js
index bcbfdca170..bcb6df4d4c 100644
--- a/src/ol/renderer/Composite.js
+++ b/src/ol/renderer/Composite.js
@@ -5,7 +5,6 @@ import MapRenderer from './Map.js';
 import ObjectEventType from '../ObjectEventType.js';
 import RenderEvent from '../render/Event.js';
 import RenderEventType from '../render/EventType.js';
-import SourceState from '../source/State.js';
 import {CLASS_UNSELECTABLE} from '../css.js';
 import {checkedFonts} from '../render/canvas.js';
 import {inView} from '../layer/Layer.js';
@@ -115,8 +114,8 @@ class CompositeMapRenderer extends MapRenderer {
       const sourceState = layer.getSourceState();
       if (
         !inView(layerState, viewState) ||
-        (sourceState != SourceState.READY &&
-          sourceState != SourceState.UNDEFINED)
+        (layerState.sourceState != 'ready' &&
+          layerState.sourceState != 'undefined')
       ) {
         layer.unrender();
         continue;
diff --git a/src/ol/renderer/Layer.js b/src/ol/renderer/Layer.js
index f66c8c3a7d..a7bea57ad3 100644
--- a/src/ol/renderer/Layer.js
+++ b/src/ol/renderer/Layer.js
@@ -4,7 +4,6 @@
 import EventType from '../events/EventType.js';
 import ImageState from '../ImageState.js';
 import Observable from '../Observable.js';
-import SourceState from '../source/State.js';
 import {abstract} from '../util.js';
 
 /**
@@ -199,7 +198,7 @@ class LayerRenderer extends Observable {
     if (
       layer &&
       layer.getVisible() &&
-      layer.getSourceState() == SourceState.READY
+      'ready'
     ) {
       layer.changed();
     }
diff --git a/src/ol/renderer/webgl/TileLayer.js b/src/ol/renderer/webgl/TileLayer.js
index 93b3f77e5b..dcc883fa8b 100644
--- a/src/ol/renderer/webgl/TileLayer.js
+++ b/src/ol/renderer/webgl/TileLayer.js
@@ -2,7 +2,6 @@
  * @module ol/renderer/webgl/TileLayer
  */
 import LRUCache from '../../structs/LRUCache.js';
-import State from '../../source/State.js';
 import TileRange from '../../TileRange.js';
 import TileState from '../../TileState.js';
 import TileTexture from '../../webgl/TileTexture.js';
@@ -309,7 +308,7 @@ class WebGLTileLayerRenderer extends WebGLLayerRenderer {
     if (isEmpty(getRenderExtent(frameState, frameState.extent))) {
       return false;
     }
-    return source.getState() === State.READY;
+    return source.getState() === 'ready';
   }
 
   /**
diff --git a/src/ol/source/BingMaps.js b/src/ol/source/BingMaps.js
index abd03d8354..b4e6cf6af7 100644
--- a/src/ol/source/BingMaps.js
+++ b/src/ol/source/BingMaps.js
@@ -2,7 +2,6 @@
  * @module ol/source/BingMaps
  */
 
-import SourceState from './State.js';
 import TileImage from './TileImage.js';
 import {applyTransform, intersects} from '../extent.js';
 import {createFromTileUrlFunctions} from '../tileurlfunction.js';
@@ -135,7 +134,7 @@ class BingMaps extends TileImage {
       opaque: true,
       projection: getProjection('EPSG:3857'),
       reprojectionErrorThreshold: options.reprojectionErrorThreshold,
-      state: SourceState.LOADING,
+      state: 'loading',
       tileLoadFunction: options.tileLoadFunction,
       tilePixelRatio: hidpi ? 2 : 1,
       wrapX: options.wrapX !== undefined ? options.wrapX : true,
@@ -220,7 +219,7 @@ class BingMaps extends TileImage {
       response.resourceSets.length != 1 ||
       response.resourceSets[0].resources.length != 1
     ) {
-      this.setState(SourceState.ERROR);
+      this.setState('error');
       return;
     }
 
@@ -329,7 +328,7 @@ class BingMaps extends TileImage {
       );
     }
 
-    this.setState(SourceState.READY);
+    this.setState('ready');
   }
 }
 
diff --git a/src/ol/source/CartoDB.js b/src/ol/source/CartoDB.js
index 7d8f886e7d..008f06949c 100644
--- a/src/ol/source/CartoDB.js
+++ b/src/ol/source/CartoDB.js
@@ -2,7 +2,6 @@
  * @module ol/source/CartoDB
  */
 
-import SourceState from './State.js';
 import XYZ from './XYZ.js';
 import {assign} from '../obj.js';
 
@@ -165,14 +164,14 @@ class CartoDB extends XYZ {
           JSON.parse(client.responseText)
         );
       } catch (err) {
-        this.setState(SourceState.ERROR);
+        this.setState('error');
         return;
       }
       this.applyTemplate_(response);
       this.templateCache_[paramHash] = response;
-      this.setState(SourceState.READY);
+      this.setState('ready');
     } else {
-      this.setState(SourceState.ERROR);
+      this.setState('error');
     }
   }
 
@@ -181,7 +180,7 @@ class CartoDB extends XYZ {
    * @param {Event} event Event.
    */
   handleInitError_(event) {
-    this.setState(SourceState.ERROR);
+    this.setState('error');
   }
 
   /**
diff --git a/src/ol/source/DataTile.js b/src/ol/source/DataTile.js
index 6da738f026..ad7af2e836 100644
--- a/src/ol/source/DataTile.js
+++ b/src/ol/source/DataTile.js
@@ -36,7 +36,7 @@ import {toSize} from '../size.js';
  * @property {import("../proj.js").ProjectionLike} [projection='EPSG:3857'] Tile projection.
  * @property {import("../tilegrid/TileGrid.js").default} [tileGrid] Tile grid.
  * @property {boolean} [opaque=false] Whether the layer is opaque.
- * @property {import("./State.js").default} [state] The source state.
+ * @property {import("./Source.js").State} [state] The source state.
  * @property {number} [tilePixelRatio] Deprecated.  To have tiles scaled, pass a `tileSize` representing
  * the source tile size and a `tileGrid` with the desired rendered tile size.
  * @property {boolean} [wrapX=false] Render tiles beyond the antimeridian.
diff --git a/src/ol/source/GeoTIFF.js b/src/ol/source/GeoTIFF.js
index c252877be9..24e8a38e34 100644
--- a/src/ol/source/GeoTIFF.js
+++ b/src/ol/source/GeoTIFF.js
@@ -2,7 +2,6 @@
  * @module ol/source/GeoTIFF
  */
 import DataTile from './DataTile.js';
-import State from './State.js';
 import TileGrid from '../tilegrid/TileGrid.js';
 import {
   Pool,
@@ -335,7 +334,7 @@ class GeoTIFFSource extends DataTile {
    */
   constructor(options) {
     super({
-      state: State.LOADING,
+      state: 'loading',
       tileGrid: null,
       projection: null,
       opaque: options.opaque,
@@ -428,7 +427,7 @@ class GeoTIFFSource extends DataTile {
       .catch(function (error) {
         console.error(error); // eslint-disable-line no-console
         self.error_ = error;
-        self.setState(State.ERROR);
+        self.setState('error');
       });
   }
 
@@ -650,7 +649,7 @@ class GeoTIFFSource extends DataTile {
     this.setTileSizes(commonSourceTileSizes);
 
     this.setLoader(this.loadTile_.bind(this));
-    this.setState(State.READY);
+    this.setState('ready');
     this.viewResolver({
       projection: this.projection,
       resolutions: resolutions,
diff --git a/src/ol/source/IIIF.js b/src/ol/source/IIIF.js
index 419947ceb4..19157bc72b 100644
--- a/src/ol/source/IIIF.js
+++ b/src/ol/source/IIIF.js
@@ -32,7 +32,7 @@ import {toSize} from '../size.js';
  * @property {import("../size.js").Size} size Size of the image [width, height].
  * @property {Array<import("../size.js").Size>} [sizes] Supported scaled image sizes.
  * Content of the IIIF info.json 'sizes' property, but as array of Size objects.
- * @property {import("./State.js").default} [state] Source state.
+ * @property {import("./Source.js").State} [state] Source state.
  * @property {Array<string>} [supports=[]] Supported IIIF region and size calculation
  * features.
  * @property {number} [tilePixelRatio] Tile pixel ratio.
diff --git a/src/ol/source/Image.js b/src/ol/source/Image.js
index 7fe2365584..ea4831ff31 100644
--- a/src/ol/source/Image.js
+++ b/src/ol/source/Image.js
@@ -80,7 +80,7 @@ export class ImageSourceEvent extends Event {
  * linear interpolation is used when resampling.  Set to false to use the nearest neighbor instead.
  * @property {import("../proj.js").ProjectionLike} [projection] Projection.
  * @property {Array<number>} [resolutions] Resolutions.
- * @property {import("./State.js").default} [state] State.
+ * @property {import("./Source.js").State} [state] State.
  */
 
 /**
diff --git a/src/ol/source/ImageCanvas.js b/src/ol/source/ImageCanvas.js
index 2765136c8e..d0cd7104dc 100644
--- a/src/ol/source/ImageCanvas.js
+++ b/src/ol/source/ImageCanvas.js
@@ -44,7 +44,7 @@ import {
  * width and height of the map viewport, and so on. Must be `1` or higher.
  * @property {Array<number>} [resolutions] Resolutions.
  * If specified, new canvases will be created for these resolutions
- * @property {import("./State.js").default} [state] Source state.
+ * @property {import("./Source.js").State} [state] Source state.
  */
 
 /**
diff --git a/src/ol/source/Raster.js b/src/ol/source/Raster.js
index 963ea7b1cb..9fc248abd5 100644
--- a/src/ol/source/Raster.js
+++ b/src/ol/source/Raster.js
@@ -8,7 +8,6 @@ import ImageCanvas from '../ImageCanvas.js';
 import ImageLayer from '../layer/Image.js';
 import ImageSource from './Image.js';
 import Source from './Source.js';
-import SourceState from './State.js';
 import TileLayer from '../layer/Tile.js';
 import TileQueue from '../TileQueue.js';
 import TileSource from './Tile.js';
@@ -743,7 +742,7 @@ class RasterSource extends ImageSource {
     let source;
     for (let i = 0, ii = this.layers_.length; i < ii; ++i) {
       source = this.layers_[i].getSource();
-      if (source.getState() !== SourceState.READY) {
+      if (source.getState() !== 'ready') {
         ready = false;
         break;
       }
diff --git a/src/ol/source/Source.js b/src/ol/source/Source.js
index 0f53d1c06e..907887145f 100644
--- a/src/ol/source/Source.js
+++ b/src/ol/source/Source.js
@@ -2,10 +2,14 @@
  * @module ol/source/Source
  */
 import BaseObject from '../Object.js';
-import SourceState from './State.js';
 import {abstract} from '../util.js';
 import {get as getProjection} from '../proj.js';
 
+/**
+ * @typedef {'undefined' | 'loading' | 'ready' | 'error'} State
+ * State of the source, one of 'undefined', 'loading', 'ready' or 'error'.
+ */
+
 /**
  * A function that takes a {@link module:ol/PluggableMap~FrameState} and returns a string or
  * an array of strings representing source attributions.
@@ -29,7 +33,7 @@ import {get as getProjection} from '../proj.js';
  * @property {AttributionLike} [attributions] Attributions.
  * @property {boolean} [attributionsCollapsible=true] Attributions are collapsible.
  * @property {import("../proj.js").ProjectionLike} [projection] Projection. Default is the view projection.
- * @property {import("./State.js").default} [state='ready'] State.
+ * @property {import("./Source.js").State} [state='ready'] State.
  * @property {boolean} [wrapX=false] WrapX.
  * @property {boolean} [interpolate=false] Use interpolated values when resampling.  By default,
  * the nearest neighbor is used when resampling.
@@ -82,10 +86,9 @@ class Source extends BaseObject {
 
     /**
      * @private
-     * @type {import("./State.js").default}
+     * @type {import("./Source.js").State}
      */
-    this.state_ =
-      options.state !== undefined ? options.state : SourceState.READY;
+    this.state_ = options.state !== undefined ? options.state : 'ready';
 
     /**
      * @private
@@ -164,8 +167,8 @@ class Source extends BaseObject {
   }
 
   /**
-   * Get the state of the source, see {@link module:ol/source/State~State} for possible states.
-   * @return {import("./State.js").default} State.
+   * Get the state of the source, see {@link import("./Source.js").State} for possible states.
+   * @return {import("./Source.js").State} State.
    * @api
    */
   getState() {
@@ -208,7 +211,7 @@ class Source extends BaseObject {
 
   /**
    * Set the state of the source.
-   * @param {import("./State.js").default} state State.
+   * @param {import("./Source.js").State} state State.
    */
   setState(state) {
     this.state_ = state;
diff --git a/src/ol/source/State.js b/src/ol/source/State.js
deleted file mode 100644
index 6249c168b8..0000000000
--- a/src/ol/source/State.js
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * @module ol/source/State
- */
-
-/**
- * @enum {string}
- * State of the source, one of 'undefined', 'loading', 'ready' or 'error'.
- */
-export default {
-  UNDEFINED: 'undefined',
-  LOADING: 'loading',
-  READY: 'ready',
-  ERROR: 'error',
-};
diff --git a/src/ol/source/Tile.js b/src/ol/source/Tile.js
index 3467ea1e6b..750993d770 100644
--- a/src/ol/source/Tile.js
+++ b/src/ol/source/Tile.js
@@ -32,7 +32,7 @@ import {scale as scaleSize, toSize} from '../size.js';
  * @property {boolean} [opaque=false] Whether the layer is opaque.
  * @property {number} [tilePixelRatio] TilePixelRatio.
  * @property {import("../proj.js").ProjectionLike} [projection] Projection.
- * @property {import("./State.js").default} [state] State.
+ * @property {import("./Source.js").State} [state] State.
  * @property {import("../tilegrid/TileGrid.js").default} [tileGrid] TileGrid.
  * @property {boolean} [wrapX=false] WrapX.
  * @property {number} [transition] Transition.
diff --git a/src/ol/source/TileImage.js b/src/ol/source/TileImage.js
index d49449d469..82fdaa0e21 100644
--- a/src/ol/source/TileImage.js
+++ b/src/ol/source/TileImage.js
@@ -28,7 +28,7 @@ import {getUid} from '../util.js';
  * @property {import("../proj.js").ProjectionLike} [projection] Projection. Default is the view projection.
  * @property {number} [reprojectionErrorThreshold=0.5] Maximum allowed reprojection error (in pixels).
  * Higher values can increase reprojection performance, but decrease precision.
- * @property {import("./State.js").default} [state] Source state.
+ * @property {import("./Source.js").State} [state] Source state.
  * @property {typeof import("../ImageTile.js").default} [tileClass] Class used to instantiate image tiles.
  * Default is {@link module:ol/ImageTile~ImageTile}.
  * @property {import("../tilegrid/TileGrid.js").default} [tileGrid] Tile grid.
diff --git a/src/ol/source/TileJSON.js b/src/ol/source/TileJSON.js
index 2ee8e8f5c4..3d0dfcb40e 100644
--- a/src/ol/source/TileJSON.js
+++ b/src/ol/source/TileJSON.js
@@ -7,7 +7,6 @@
  * See https://mapbox.com/developers/api/.
  */
 
-import SourceState from './State.js';
 import TileImage from './TileImage.js';
 import {applyTransform, intersects} from '../extent.js';
 import {assert} from '../asserts.js';
@@ -89,7 +88,7 @@ class TileJSON extends TileImage {
       interpolate: interpolate,
       projection: getProjection('EPSG:3857'),
       reprojectionErrorThreshold: options.reprojectionErrorThreshold,
-      state: SourceState.LOADING,
+      state: 'loading',
       tileLoadFunction: options.tileLoadFunction,
       wrapX: options.wrapX !== undefined ? options.wrapX : true,
       transition: options.transition,
@@ -206,14 +205,14 @@ class TileJSON extends TileImage {
       });
     }
     this.tileJSON_ = tileJSON;
-    this.setState(SourceState.READY);
+    this.setState('ready');
   }
 
   /**
    * @protected
    */
   handleTileJSONError() {
-    this.setState(SourceState.ERROR);
+    this.setState('error');
   }
 }
 
diff --git a/src/ol/source/UTFGrid.js b/src/ol/source/UTFGrid.js
index e906ce3b75..611321c2ab 100644
--- a/src/ol/source/UTFGrid.js
+++ b/src/ol/source/UTFGrid.js
@@ -3,7 +3,6 @@
  */
 
 import EventType from '../events/EventType.js';
-import SourceState from './State.js';
 import Tile from '../Tile.js';
 import TileSource from './Tile.js';
 import TileState from '../TileState.js';
@@ -285,7 +284,7 @@ class UTFGrid extends TileSource {
   constructor(options) {
     super({
       projection: getProjection('EPSG:3857'),
-      state: SourceState.LOADING,
+      state: 'loading',
       zDirection: options.zDirection,
     });
 
@@ -420,7 +419,7 @@ class UTFGrid extends TileSource {
    * @protected
    */
   handleTileJSONError() {
-    this.setState(SourceState.ERROR);
+    this.setState('error');
   }
 
   /**
@@ -455,7 +454,7 @@ class UTFGrid extends TileSource {
 
     const grids = tileJSON['grids'];
     if (!grids) {
-      this.setState(SourceState.ERROR);
+      this.setState('error');
       return;
     }
 
@@ -471,7 +470,7 @@ class UTFGrid extends TileSource {
       });
     }
 
-    this.setState(SourceState.READY);
+    this.setState('ready');
   }
 
   /**
diff --git a/src/ol/source/UrlTile.js b/src/ol/source/UrlTile.js
index 1eae6da345..07cfa78230 100644
--- a/src/ol/source/UrlTile.js
+++ b/src/ol/source/UrlTile.js
@@ -15,7 +15,7 @@ import {getUid} from '../util.js';
  * @property {number} [cacheSize] Cache size.
  * @property {boolean} [opaque=false] Whether the layer is opaque.
  * @property {import("../proj.js").ProjectionLike} [projection] Projection.
- * @property {import("./State.js").default} [state] State.
+ * @property {import("./Source.js").State} [state] State.
  * @property {import("../tilegrid/TileGrid.js").default} [tileGrid] TileGrid.
  * @property {import("../Tile.js").LoadFunction} tileLoadFunction TileLoadFunction.
  * @property {number} [tilePixelRatio] TilePixelRatio.
diff --git a/src/ol/source/Vector.js b/src/ol/source/Vector.js
index 76572b4ba3..b0e45b5189 100644
--- a/src/ol/source/Vector.js
+++ b/src/ol/source/Vector.js
@@ -9,7 +9,6 @@ import EventType from '../events/EventType.js';
 import ObjectEventType from '../ObjectEventType.js';
 import RBush from '../structs/RBush.js';
 import Source from './Source.js';
-import SourceState from './State.js';
 import VectorEventType from './VectorEventType.js';
 import {TRUE, VOID} from '../functions.js';
 import {all as allStrategy} from '../loadingstrategy.js';
@@ -183,7 +182,7 @@ class VectorSource extends Source {
       attributions: options.attributions,
       interpolate: true,
       projection: undefined,
-      state: SourceState.READY,
+      state: 'ready',
       wrapX: options.wrapX !== undefined ? options.wrapX : true,
     });
 
diff --git a/src/ol/source/VectorTile.js b/src/ol/source/VectorTile.js
index 72f64ccdf1..03ed333018 100644
--- a/src/ol/source/VectorTile.js
+++ b/src/ol/source/VectorTile.js
@@ -35,7 +35,7 @@ import {toSize} from '../size.js';
  * boundaries or TopoJSON sources) allows the renderer to optimise fill and
  * stroke operations.
  * @property {import("../proj.js").ProjectionLike} [projection='EPSG:3857'] Projection of the tile grid.
- * @property {import("./State.js").default} [state] Source state.
+ * @property {import("./Source.js").State} [state] Source state.
  * @property {typeof import("../VectorTile.js").default} [tileClass] Class used to instantiate image tiles.
  * Default is {@link module:ol/VectorTile~VectorTile}.
  * @property {number} [maxZoom=22] Optional max zoom level. Not used if `tileGrid` is provided.