Error in Popup overlay : Cannot read property 'removeClass' of undefined

[kobakazu0429]

My Environment

package.json

"devDependencies": {
  "babel-eslint": "^8.2.3",
  "eslint": "^4.19.1",
  "eslint-config-standard": "^11.0.0",
  "prettier-eslint": "^8.8.1",
  "prettier-eslint-cli": "^4.7.1"
},
"dependencies": {
  "babel-core": "^6.26.3",
  "babel-loader": "^7.1.5",
  "babel-preset-env": "^1.7.0",
  "cross-env": "^5.2.0",
  "css-loader": "^1.0.0",
  "dotenv-webpack": "^1.5.7",
  "extract-text-webpack-plugin": "^4.0.0-beta.0",
  "file-loader": "^1.1.11",
  "html-loader": "^0.5.5",
  "html-webpack-plugin": "^3.2.0",
  "jquery": "^3.3.1",
  "normalize.css": "^8.0.0",
  "ol": "^5.0.3",
  "ol-ext": "^2.0.5",
  "style-loader": "^0.21.0",
  "url-loader": "^1.0.1",
  "webpack": "^4.16.0",
  "webpack-cli": "^3.0.8",
  "webpack-dev-server": "^3.1.4"
}

webpack.config.js

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const environment = process.env.NODE_ENV || 'development'

module.exports = {
  mode: environment,

  entry: './src/map/main.js',

  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: './',
    filename: 'map-[hash].js'
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [['env', { modules: false }]]
            }
          }
        ]
      },
      {
        test: /\.css$/,
        use: [{ loader: 'style-loader' }, { loader: 'css-loader' }]
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 2000000,
              name: '[name].[ext]'
            }
          }
        ]
      },
      {
        test: /\.((geo)?json)$/,
        use: [
          {
            loader: 'file-loader'
          }
        ]
      },
      {
        test: /\.html$/,
        loader: 'html-loader'
      }
    ]
  },

  plugins: [
    new HtmlWebpackPlugin({
      filename: 'map.html',
      template: './src/map/map.html'
    }),
    new webpack.ProvidePlugin({
      jQuery: 'jquery',
      $: 'jquery',
      jquery: 'jquery'
    })
  ],

  resolve: {
    extensions: ['*', '.js']
  },

  devServer: {
    contentBase: path.resolve(__dirname, 'src/map'),
    publicPath: '/',
    watchContentBase: true,
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },

  performance: {
    hints: false
  },

  devtool: '#inline-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  module.exports.optimization = { minimize: true }
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    })
  ])
}

Problem

Hi, My name is Kazu.
I don't understand this problem why happend.

L 62     : this._elt = this.element;
and using: $(this._elt)

Replace all this._elt (= $(this.element)) to $(this._elt (= this.element) When I tried editing ol-ext/overlay/Popup.js` to above code, It works well.

Please tell me why don't work now code & work well my modify codes.

[Viglino]

I think it's a known bug #75 #78 and fix in db62b62
Can you try to upgrade to ol-ext@2.0.6
NB: ol-ext is not yet ready to use with ol@5.0.x and may have some bugs. Next version will see #123

[kobakazu0429]

I solved by yarn upgrade !!!
Thank you.