"Module parsed failed" - Vue

[Tishinator]

After doing the npm install Im getting Module parsed failed in 3 areas:

`webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

ERROR Failed to compile with 3 errors5:11:51 PM

error in ./node_modules/georaster-layer-for-leaflet/dist/georaster-layer-for-leaflet.js

Module parse failed: Unexpected token (22:12) You may need an appropriate loader to handle this file type. | (!crs.code && | crs.infinite && | crs?.transformation?._a === 1 && | crs?.transformation?._b === 0 && | crs?.transformation?._c === -1 &&

@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/ApacheMap.vue 9:0-70 @ ./src/components/ApacheMap.vue @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/Apache.vue @ ./src/components/Apache.vue @ ./src/router/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:9999 webpack/hot/dev-server ./src/main.js

error in ./node_modules/georaster-layer-for-leaflet/dist/georaster-layer-for-leaflet.min.js

Module parse failed: Unexpected token (2:37677) You may need an appropriate loader to handle this file type. | /*! For license information please see georaster-layer-for-leaflet.min.js.LICENSE.txt */

@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/ApacheMap.vue 45:27-65 @ ./src/components/ApacheMap.vue @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/Apache.vue @ ./src/components/Apache.vue @ ./src/router/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:9999 webpack/hot/dev-server ./src/main.js

error in ./node_modules/georaster/dist/georaster.browser.bundle.min.js

Module parse failed: Unexpected token (8:126675) You may need an appropriate loader to handle this file type. | * @license MIT | */`

Ive looked into the webpack.config and tried your solution posted in another issue, but had no luck. any help would be apprecaited.

[DanielJDufour]

Hi, thanks for bringing this to my attention. I'm optimistic we can fix this. Are you using TypeScript or just JavaScript?

[DanielJDufour]

I think the solution will be probably adding the correct optional chaining babel plugin to https://github.com/GeoTIFF/georaster-layer-for-leaflet/blob/master/webpack.config.js

[Tishinator]

Javascript was what we were using. What specifically do you recommend I add to the Webpack config? I tried making similar changes, but i had no luck

[Tishinator]

Here's my webpack config for reference:

'use strict' const path = require('path') const utils = require('./utils') const config = require('../config') const vueLoaderConfig = require('./vue-loader.conf')

function resolve (dir) { return path.join(__dirname, '..', dir) }

module.exports = { context: path.resolve(__dirname, '../'), entry: { app: './src/main.js' }, output: { path: config.build.assetsRoot, filename: '[name].js', publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath }, resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), }, modules: ["node_modules"] }, module: { rules: [ { test: /.vue$/, loader: 'vue-loader', options: vueLoaderConfig }, { test: /.(ts|js)x?$/, loader: 'babel-loader', include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')] }, { test: /.(png|jpe?g|gif|svg)(?.)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, { test: /.(mp4|webm|ogg|mp3|wav|flac|aac)(?.)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('media/[name].[hash:7].[ext]') } }, { test: /.(woff2?|eot|ttf|otf)(?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('fonts/[name].[hash:7].[ext]') } } ] }, node: { // prevent webpack from injecting useless setImmediate polyfill because Vue // source contains it (although only uses it if it's native). setImmediate: false, // prevent webpack from injecting mocks to Node native modules // that does not make sense for the client dgram: 'empty', fs: 'empty', net: 'empty', tls: 'empty', child_process: 'empty' }, externals: { leaflet: { root: "L", commonjs: "leaflet", amd: "leaflet", commonjs2: "leaflet" } } }

Not exactly sure what to change/add

[DanielJDufour]

@MTishman2013 , could you show the line where you import georaster-layer-for-leaflet. It says there's an error at error in ./node_modules/georaster-layer-for-leaflet/dist/georaster-layer-for-leaflet.js, but dist/georaster-layer-for-leaflet.js isn't referenced in the most recent package.json (https://unpkg.com/[email protected]/package.json), so I want to understand a little more how it's being used/loaded.