Rails webpacker OpenLayers. Uncaught ReferenceError: ol is not defined. Fixed but not solved

Question

Complete error:

layerSwitcherDemo.js:52 Uncaught ReferenceError: ol is not defined
    at Module../app/javascript/packs/layerSwitcherDemo.js (layerSwitcherDemo.js:52)
    at __webpack_require__ (bootstrap:19)
    at bootstrap:83
    at bootstrap:83
./app/javascript/packs/layerSwitcherDemo.js @   layerSwitcherDemo.js:52
__webpack_require__ @   bootstrap:19
(anonymous) @   bootstrap:83
(anonymous)

This is called from people/show.html.erb via <%= javascript_pack_tag 'layerSwitcherDemo' %>.

If I use the same <%= javascript_pack_tag 'layerSwitcherDemo' %> from map/ol_layer_switcher.html.erb the script works fine.

// javascript/packs/layerSwitcherDemo.js
import Map from 'ol/Map';
import View from 'ol/View';
import { transform } from 'ol/proj';
import LayerGroup from 'ol/layer/Group';
import LayerImage from 'ol/layer/Image';
import LayerTile from 'ol/layer/Tile';
import SourceOSM from 'ol/source/OSM';
import XYZ from 'ol/source/XYZ';
import LayerSwitcher from 'ol-layerswitcher';
import {transformExtent, fromLonLat} from 'ol/proj';

var <a long list>

// the next line is line 52 in the error      
var map = new ol.Map({
    target: 'map',
    layers: [
// rest of the code

I'm trying to build up slowly to make an OpenLayers map. I'll use something different than LayerSwitcherDemo which I made just to make sure it would load in Rails. Layer Switcher is a demo that I modified.

Just thought to compare the compiled layerSwitcherDemo-xx.js script and all 55k lines are identical. application-xx.js are identical.

Fixed now but not solved. The page that was working loaded the CDN version of OpenLayers. Being new to Webpack I'm not sure which is best. I guess it's less code I'm carrying along. Let the CDN do it. This will be a very lightly used app. I'm guessing I need some kind of definition equivalent to import $ from 'jquery'

Answer 1

In your example, you're calling ol.Map, but you've imported Map. Edit your Webpack JS as follows:

import Map from 'ol/Map'

// ... other imports

const map = new Map({   // replaces ol.Map
    target: 'map',
    layers: [
// ...

OR, the following will work for some imports according to the main entry point in the the openlayer module.

import * as ol from 'ol';

new ol.Map() // but not ol.LayerGroup, for example ...