Getting Error: TypeError: _proj2.default is undefined

[woodbri]

I have the following code which works, except when I add the sync(map); then the following error show in the console and the hash is never updated. I'm using npm with:

ol4-app@1.0.0 C:\Users\woodbri\work\ol4-app
+-- ol@5.0.2
| +-- pbf@3.1.0
| | +-- ieee754@1.1.12
| | `-- resolve-protobuf-schema@2.0.0
| |   `-- protocol-buffers-schema@2.2.0
| +-- pixelworks@1.1.0
| `-- rbush@2.0.2
|   `-- quickselect@1.1.1
+-- ol-hashed@1.0.2
| +-- hashed@4.3.1
| `-- ol@5.0.2 deduped
`-- ol-layerswitcher@2.0.0

TypeError: _proj2.default is undefined[Learn More] index.js:47:8
serialize
index.js:47:8
parcelRequire<[162]</Schema.prototype.serialize
schema.js:60
parcelRequire<[110]</Store.prototype._initializeProvider/<
store.js:163
parcelRequire<[162]</Schema.prototype.forEachKey
schema.js:42
parcelRequire<[110]</Store.prototype._initializeProvider
store.js:160
parcelRequire<[110]</Store.prototype.register
store.js:128
parcelRequire<[32]</exports.register
index.js:36
synchronize
index.js:95:15
anonymous
http://localhost:1234/ol4-app.4d5fd9f3.js line 62318 > Function:158:2
newRequire
http://localhost:1234/ol4-app.4d5fd9f3.js:48:7
hmrAccept
http://localhost:1234/ol4-app.4d5fd9f3.js:62349:3
parcelRequire<[306]</ws.onmessage/<
http://localhost:1234/ol4-app.4d5fd9f3.js:62235:11
forEach self-hosted:268:13 parcelRequire<[306]</ws.onmessage
http://localhost:1234/ol4-app.4d5fd9f3.js:62233:7

Code:

import 'ol/ol.css';
import 'ol-layerswitcher/src/ol-layerswitcher.css';

import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import LayerGroup from 'ol/layer/group';
import {fromLonLat, toLonLat} from 'ol/proj';
import {defaults as defaultControls} from 'ol/control.js';
import MousePosition from 'ol/control/MousePosition.js';
import {createStringXY} from 'ol/coordinate.js';
import OSM from 'ol/source/OSM';
import TileWMS from 'ol/source/TileWMS';

import LayerSwitcher from 'ol-layerswitcher';
import sync from 'ol-hashed';

// default center, zoom, rotation
let center = [47.1556584, 15.2162729];
let zoom = 7;
let rotation = 0;

const mousePositionControl = new MousePosition({
    coordinateFormat: createStringXY(6),
    projection: 'EPSG:4326',
    undefinedHTML: ' '
});

const map = new Map({
    target: 'map',
    controls: defaultControls({
        attributionOptions: {
            collapsible: false
        }
    }).extend([mousePositionControl]),
    layers: [
        new LayerGroup({
            title: 'Base maps',
            layers: [
                new TileLayer({
                    title: 'OSM',
                    type: 'base',
                    visible: true,
                    source: new OSM()
                }),
                new TileLayer({
                    title: 'Yemen Raster',
                    type: 'base',
                    visible: false,
                    source: new TileWMS({
                        projection: 'EPSG:4326',
                        url: 'http://127.0.0.1:8088/cgi-bin/mapserv?map=/data/satmap/maps/yemen.map',
                        params: {
                            'LAYERS': 'government,raster'
                        }
                    })
                })
            ]
        }),
        new LayerGroup({
            title: 'Overlays',
            layers: [
                new TileLayer({
                    title: 'Yemen All',
                    type: 'overlay',
                    visible: true,
                    source: new TileWMS({
                        projection: 'EPSG:4326',
                        url: 'http://127.0.0.1:8088/cgi-bin/mapserv?map=/data/satmap/maps/yemen.map',
                        params: {
                            'LAYERS': 'all'
                        }
                    })
                }),
                new TileLayer({
                    title: 'Yemen Raster',
                    type: 'overlay',
                    visible: false,
                    source: new TileWMS({
                        projection: 'EPSG:4326',
                        url: 'http://127.0.0.1:8088/cgi-bin/mapserv?map=/data/satmap/maps/yemen.map',
                        params: {
                            'LAYERS': 'government,raster'
                        }
                    })
                }),
                new TileLayer({
                    title: 'Yemen Roads',
                    type: 'overlay',
                    visible: false,
                    source: new TileWMS({
                        projection: 'EPSG:4326',
                        url: 'http://127.0.0.1:8088/cgi-bin/mapserv?map=/data/satmap/maps/yemen.map',
                        params: {
                            'LAYERS': 'roads4,roads3,roads2,roads1'
                        }
                    })
                }),
                new TileLayer({
                    title: 'Yemen Villages',
                    type: 'overlay',
                    visible: false,
                    source: new TileWMS({
                        projection: 'EPSG:4326',
                        url: 'http://127.0.0.1:8088/cgi-bin/mapserv?map=/data/satmap/maps/yemen.map',
                        params: {
                            'LAYERS': 'village'
                        }
                    })
                })
            ]
        })
    ],
    view: new View({
        center: fromLonLat(center),
        zoom: zoom,
        rotation: rotation
    })
});

var layerSwitcher = new LayerSwitcher();
map.addControl(layerSwitcher);

sync(map);

[Turbo87]

This is most likely related to a change in the openlayers API in version 5 which is not yet compatible with this package

[tschaub]

Please install ol-hashed@2 for compatibility with ol@5.