Parsing error with 8.2

[scadergit]

I bumped from 6.15.1 to 8.2.0 today, and, I'm getting a parsing error from a library depenency. I have @babel/preset-env installed, so unsure why I'm getting this error. I will continue to investiate, but asking here in case I'm missing something obvious.

Module parse failed: Unexpected token (146:34)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 		})
| 
> 		space = cstr.match(/([a-z])/ig)?.join('')?.toLowerCase() || 'rgb'
| 	}
| 
 @ ./node_modules/color-rgba/index.js 2:0-31 14:14-19
 @ ./node_modules/ol/color.js
 @ ./node_modules/ol/webgl/styleparser.js
 @ ./node_modules/ol/layer/WebGLTile.js
 @ ./node_modules/ol/layer.js
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/cmi/components/LayerGroup.vue?vue&type=script&lang=js&
 @ ./src/cmi/components/LayerGroup.vue?vue&type=script&lang=js&
 @ ./src/cmi/components/LayerGroup.vue
 @ ./src/cmi/components/index.js
 @ ./src/cmi/index.js
 @ ./src/index.js

.babelrc

  "presets": [
    ["@babel/preset-env", { "modules": false }]
  ],
  "plugins": [
    ["babel-plugin-module-resolver", {
      "alias": {
        "~": "./src"
      }
    }],
    ["@babel/plugin-proposal-class-properties", {"loose": false}],
    ["@babel/plugin-proposal-decorators", {"legacy": true}],
    "@babel/plugin-proposal-export-default-from",
    "@babel/plugin-proposal-export-namespace-from",
    "@babel/plugin-proposal-function-bind",
    "@babel/plugin-proposal-function-sent",
    "@babel/plugin-proposal-numeric-separator",
    "@babel/plugin-proposal-throw-expressions",
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-syntax-import-meta",
    "@babel/plugin-transform-runtime"
  ],
  "comments": false,
  "env": {
    "test": {
      "plugins": ["babel-plugin-istanbul"]
    }
  }
}

package.json related to babel

    "@babel/cli": "^7.21.0",
    "@babel/core": "^7.21.4",
    "@babel/plugin-proposal-class-properties": "^7.16.7",
    "@babel/plugin-proposal-decorators": "^7.16.7",
    "@babel/plugin-proposal-export-default-from": "^7.16.7",
    "@babel/plugin-proposal-export-namespace-from": "^7.16.7",
    "@babel/plugin-proposal-function-bind": "^7.16.7",
    "@babel/plugin-proposal-function-sent": "^7.16.7",
    "@babel/plugin-proposal-json-strings": "^7.16.7",
    "@babel/plugin-proposal-numeric-separator": "^7.16.7",
    "@babel/plugin-proposal-throw-expressions": "^7.16.7",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/plugin-syntax-import-meta": "^7.10.4",
    "@babel/plugin-transform-runtime": "^7.16.10",
    "@babel/preset-env": "^7.23.9",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.2.3",
    "babel-plugin-module-resolver": "^3.2.0",```

[scadergit]

After updating a lot of peer libraries to make sure it wasn't something else, I discovered that this issue starts with ol@7.5.0, with only one error (below). Any thoughts on what changed from 7.4 to 7.5 and beyond that requires a specific parser?

Module parse failed: Unexpected token (165:61)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|      * @private
|      */
>     this.hitDetectionEnabled_ = options.hitDetectionEnabled ?? true;
| 
|     const customAttributes = options.attributes
 @ ./node_modules/ol/layer/Heatmap.js 5:0-72 177:15-39
 @ ./node_modules/ol/layer.js
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/cmi/components/LayerGroup.vue?vue&type=script&lang=js&
 @ ./src/cmi/components/LayerGroup.vue?vue&type=script&lang=js&
 @ ./src/cmi/components/LayerGroup.vue
 @ ./src/cmi/components/index.js
 @ ./src/cmi/index.js
 @ ./src/index.js

[scadergit]

Turns out openlayers introduced ES2020 syntax starting in 7.5, but our application was configured to ignore the node_modules folder entirely. I added an exception to transpile the openlayers library and it now builds again.

[trinizz84]

I am having the same issue. Can you post what you did to fix this issue?

[scadergit]

This may or not affect you, but the first thing I did was get babel updated to use @babel/preset-env (removing all those manual plugins references):

  "presets": [
    ["@babel/preset-env", {
      "corejs": "3.35",
      "useBuiltIns": "entry"
    }]
  ],

Then I updated the webpack config to include openlayers for babel-loader:

        test: /\.js$/,
        use: {
          loader: 'babel-loader'
        },
        exclude: {
          and: [/node_modules/],
          not: [
            /ol/,
          ]
        }
      },

@ahocevar while this worked, does OL not transpile when the library is built? Webpack was mostly finding ?? references in the library, but also ?. in the example above. Perhaps my browserlist is more generous than yours, but it's pretty similar:

"browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie > 0"
  ]

[trinizz84]

Updating the webpack worked for me. Thanks!

[ahocevar]

?? is ES2020, if I remember correctly. So you need to configure Babel accordingly.

[scadergit]

Yes, but curious why openlayers builds doesn't transpile that, given the feature is not "last 2 versions" for >1% browsers (see mobile browsers in the caniuse graphic)

[ahocevar]

Your config prevents Webpack from tanspiling OpenLayers, because you're excluding node_modules. I'd try something like

exclude: /node_modules\/(?!(ol|another-module-that-needs-to-be-transpiled)\/).*/

[scadergit]

You can see in my previous response to @trinizz84 that I already updated webpack to transpile OL (re-added below). I'm just curious why openlayers itself does not transpile given the library's browserlist configuration and caniuse report for that ES2020 operator.

        test: /\.js$/,
        use: {
          loader: 'babel-loader'
        },
        exclude: {
          and: [/node_modules/],
          not: [
            /ol/,
          ]
        }
      },

[ahocevar]

The ol package contains untranspiled code. We should remove the browserslist section from the package's package.json - that config is only used by the tools that build the examples.