Module parse failed: Unexpected token

[PeterC66]

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?

[marcjansen]

It seems as if you did not install antd, openlayers and react. Please try:

npm i antd@3.9.0 ol@4.6.5 react@16.4.2

This is untested, but we'll surely check ourselves what the problem might be.

Another thing which comes to my mind is probably incompatible versions.

Thanks for the report!

[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!

[PeterC66]

Thanks @marcjansen. I had done npm i antd ol@4 as per the workshop - see the last bit of the terminal session for page 2.3 of the workshop above.

Thanks @zuhrasofyan. I edited the package.json as you suggested. The result of npm install is

c:\projects\my-app>npm install
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@8.12.1 requires a peer of antd@~3.0 but none is installed. You must install peer dependencies yourself.
npm WARN @terrestris/react-geo@8.12.1 requires a peer of ol@~4.0 but none is installed. You must install peer dependencies yourself.
npm WARN @terrestris/react-geo@8.12.1 requires a peer of react@~16.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"})

removed 5 packages, updated 1 package and audited 16350 packages in 33.034s
found 0 vulnerabilities

Unfortunately I get the same error:

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.

But this time in the command window where I had done npm start as well as the Failed to compile message I now get

Could not open MapUtil.js in the editor.

When running on Windows, file names are checked against a whitelist to protect against remote code execution attacks. File names may consist only of alphanumeric characters (all languages), periods, dashes, slashes, and underscores.

Maybe it is a Windows specific issue? I use Windows 10 and VS Code. I'll try and find out how to white list the file.

It also strikes me that the error message

npm WARN @terrestris/react-geo@8.12.1 requires a peer of ol@~4.0 but none is installed. You must install peer dependencies yourself.

is referring to ~4.0, and I do have ol@4.6.5 installed. Should the peer dependency be ~4 or `~4.6'?

UPDATE
I thought that maybe my BitDefender installation was blocking things. But the block was 3 weeks ago, so not related to this problem. I have been developing other simple react systems recently, with no similar problems.

[KaiVolland]

Hey guys.

The problem is a combination of the workshop (created with "create-react-app") and the outsourcing of the utils #766.

1. The newly created packages @terrestris/ol-util and @terrestris/base-util are completly written in ES6 and not transpiled to ES5.
2. create-react-app does not support the use of ES6 dependencies.

So the workshop will not work in the current stage. (I'll updated the Readme later on.)

A workaround could be to eject (npm run eject) the workshop-project and configure the loader in the webpack config to include @terrestris/ol-util and @terrestris/base-util properly.

The workaround of @zuhrasofyan should work as well and is easier.

@PeterC66 If you added "@terrestris/react-geo": "^8.12.1" you might need to remove the node_modules folder and do run npm i (eventhough react-geo should not reference the util packages any more).

I hope it helps.

[PeterC66]

Thanks @KaiVolland I will try that now.

I also want to report that I have now just managed to turn off my BitDefender protection and the Hello World button shows OK. I need to work out which aspect of BitDefender is the problem.
Update
I have now turned on each aspect of BitDefender one by one and the React app kept working OK. So I am not sure what was happening to cause the issue. While things keep working I shan't investigate that aspect any more, and just get on with the workshop.

[marcjansen]

Can we close this issue?

[dnlkoch]

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