Module parse failed: Unexpected token

When I do the workshop I get the error message:

Failed to compile
./node_modules/@terrestris/ol-util/src/MapUtil/MapUtil.js
Module parse failed: Unexpected token (153:25)
You may need an appropriate loader to handle this file type.
|    * @return {ol.layer.Layer} The layer.
|    */
|   static getLayerByOlUid = (map, ol_uid) => {
|     const layers = MapUtil.getAllLayers(map);
|     const layer = layers.find((l) => {
This error occurred during the build time and cannot be dismissed.

I have repeated the whole process several times in the last 3 days and each time it has failed in the same way. I added my first failed attempt to issue #838 but, since that was initially about a different problem, I am raising this new issue.

The terminal session showed:

Microsoft Windows [Version 10.0.17134.228]
(c) 2018 Microsoft Corporation. All rights reserved.

c:\projects>npm ls -g -depth 0
C:\Users\Peter_2\AppData\Roaming\npm
+-- nodemon@1.18.3
+-- npm@6.4.1
`-- windows-build-tools@3.1.0


c:\projects>npx create-react-app my-app
npx: installed 1 in 3.174s
Path must be a string. Received undefined
npx: installed 67 in 30.546s
C:\Users\Peter_2\AppData\Roaming\npm-cache\_npx\17768\node_modules\create-react-app\index.js

Creating a new React app in c:\projects\my-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...


> uglifyjs-webpack-plugin@0.4.6 postinstall c:\projects\my-app\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js

+ react-dom@16.4.2
+ react-scripts@1.1.5
+ react@16.4.2
added 1336 packages from 811 contributors and audited 12615 packages in 220.104s
found 0 vulnerabilities


Success! Created my-app at c:\projects\my-app
Inside that directory, you can run several commands:
[...]
Happy hacking!

c:\projects>cd my-app

c:\projects\my-app>npm start

> my-app@0.1.0 start c:\projects\my-app
> react-scripts start
Starting the development server...
Compiled successfully!

At that point all is working as expected, and after changing App.js per 2.2 of the workshop it is still OK.

The terminal session for page 2.3 of the workshop is

Microsoft Windows [Version 10.0.17134.228]
(c) 2018 Microsoft Corporation. All rights reserved.

c:\projects\my-app>npm i @terrestris/react-geo --save
npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @terrestris/react-geo@9.0.0 requires a peer of antd@~3.0 but none is installed. You must install peer dependencies yourself.
npm WARN @terrestris/react-geo@9.0.0 requires a peer of ol@~4.0 but none is installed. You must install peer dependencies yourself.
npm WARN @terrestris/react-geo@9.0.0 requires a peer of react@~16.0 but none is installed. You must install peer dependencies
yourself.
npm WARN @terrestris/ol-util@0.1.0 requires a peer of ol@~4.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ @terrestris/react-geo@9.0.0
added 168 packages from 92 contributors and audited 16479 packages in 67.018s
found 0 vulnerabilities


c:\projects\my-app>npm i antd ol@4
npm WARN @terrestris/ol-util@0.1.0 requires a peer of ol@~4.0 but none is installed. You must install peer dependencies yourself.
npm WARN @terrestris/react-geo@9.0.0 requires a peer of antd@~3.0 but none is installed. You must install peer dependencies yourself.
npm WARN @terrestris/react-geo@9.0.0 requires a peer of ol@~4.0 but none is installed. You must install peer dependencies yourself.
npm WARN @terrestris/react-geo@9.0.0 requires a peer of react@~16.0 but none is installed. You must install peer dependencies
yourself.
npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ ol@4.6.5
+ antd@3.9.0
added 93 packages from 46 contributors and audited 18255 packages in 45.439s
found 0 vulnerabilities


c:\projects\my-app>

On http://localhost:3000/ all is still OK, but when I then edit App.js as per page 2.4 I get the Failed to compile error listed above. To check on the versions of packages I did npm ls:

c:\projects\my-app>npm ls -g -depth 0
C:\Users\Peter_2\AppData\Roaming\npm
+-- nodemon@1.18.3
+-- npm@6.4.1
`-- windows-build-tools@3.1.0

c:\projects\my-app>npm ls -depth 0
my-app@0.1.0 c:\projects\my-app
+-- @terrestris/react-geo@9.0.0
+-- UNMET PEER DEPENDENCY antd@3.9.0
+-- UNMET PEER DEPENDENCY ol@4.6.5
+-- UNMET PEER DEPENDENCY react@16.4.2
+-- react-dom@16.4.2
`-- react-scripts@1.1.5

npm ERR! peer dep missing: antd@~3.0, required by @terrestris/react-geo@9.0.0
npm ERR! peer dep missing: ol@~4.0, required by @terrestris/react-geo@9.0.0
npm ERR! peer dep missing: react@~16.0, required by @terrestris/react-geo@9.0.0
npm ERR! peer dep missing: ol@~4.0, required by @terrestris/ol-util@0.1.0
npm ERR! peer dep missing: ajv@^6.0.0, required by ajv-keywords@3.2.0
npm ERR! missing: mkdirp@0.5.1, required by node-pre-gyp@0.10.0
npm ERR! missing: minimist@0.0.8, required by mkdirp@0.5.1
npm ERR! missing: minimatch@3.0.4, required by ignore-walk@3.0.1
npm ERR! missing: brace-expansion@1.1.11, required by minimatch@3.0.4
npm ERR! missing: balanced-match@1.0.0, required by brace-expansion@1.1.11
npm ERR! missing: concat-map@0.0.1, required by brace-expansion@1.1.11
npm ERR! missing: console-control-strings@1.1.0, required by npmlog@4.1.2
npm ERR! missing: inherits@2.0.3, required by readable-stream@2.3.6
npm ERR! missing: safe-buffer@5.1.1, required by readable-stream@2.3.6
npm ERR! missing: safe-buffer@5.1.1, required by string_decoder@1.1.1
npm ERR! missing: console-control-strings@1.1.0, required by gauge@2.7.4
npm ERR! missing: string-width@1.0.2, required by gauge@2.7.4
npm ERR! missing: strip-ansi@3.0.1, required by gauge@2.7.4
npm ERR! missing: code-point-at@1.1.0, required by string-width@1.0.2
npm ERR! missing: is-fullwidth-code-point@1.0.0, required by string-width@1.0.2
npm ERR! missing: strip-ansi@3.0.1, required by string-width@1.0.2
npm ERR! missing: number-is-nan@1.0.1, required by is-fullwidth-code-point@1.0.0
npm ERR! missing: ansi-regex@2.1.1, required by strip-ansi@3.0.1
npm ERR! missing: string-width@1.0.2, required by wide-align@1.1.2
npm ERR! missing: inherits@2.0.3, required by glob@7.1.2
npm ERR! missing: minimatch@3.0.4, required by glob@7.1.2
npm ERR! missing: once@1.4.0, required by glob@7.1.2
npm ERR! missing: once@1.4.0, required by inflight@1.0.6
npm ERR! missing: wrappy@1.0.2, required by inflight@1.0.6
npm ERR! missing: wrappy@1.0.2, required by once@1.4.0
npm ERR! missing: minipass@2.2.4, required by tar@4.4.1
npm ERR! missing: mkdirp@0.5.1, required by tar@4.4.1
npm ERR! missing: safe-buffer@5.1.1, required by tar@4.4.1
npm ERR! missing: yallist@3.0.2, required by tar@4.4.1
npm ERR! missing: minipass@2.2.4, required by fs-minipass@1.2.5
npm ERR! missing: safe-buffer@5.1.1, required by minipass@2.2.4
npm ERR! missing: yallist@3.0.2, required by minipass@2.2.4
npm ERR! missing: minipass@2.2.4, required by minizlib@1.1.0

c:\projects\my-app>

It seems odd there are so many errors.

I am new to npm and this way of working, and I don’t know if it is relevant, but looking specifically at the UNMET PEER DEPENDENCY react@16.4.2 message I tried:

c:\projects\my-app>npm ls react
my-app@0.1.0 c:\projects\my-app
`-- (empty)

There is a react folder in C:\projects\my-app\node_modules, and its package.json has the line "_id": "react@16.4.2",

Is there something wrong with my set-up, or am I doing something wrong?

[zuhrasofyan]

For the error of:

Failed to compile
./node_modules/@terrestris/ol-util/src/MapUtil/MapUtil.js
Module parse failed: Unexpected token (153:25)
You may need an appropriate loader to handle this file type.
|    * @return {ol.layer.Layer} The layer.
|    */
|   static getLayerByOlUid = (map, ol_uid) => {
|     const layers = MapUtil.getAllLayers(map);
|     const layer = layers.find((l) => {
This error occurred during the build time and cannot be dismissed.

The latest version of react-geo v9.0.0 change the way it interact with ol-utill (MapUtil.js) and it already mentioned in the release. What can you try now is downgrade the react-geo version by changing the package.json and change the line from "@terrestris/react-geo": "^9.0.0", to "@terrestris/react-geo": "^8.12.1", and do the npm install. Hope it helps.

Cheers!

[dnlkoch]

This should be fixed as both ol-util and base-util are published as ES5 now.