build issue

[tracek]

Hi,

I am trying to build your project on xubuntu 16.04 and experience some issues with webpack. Perhaps you could offer some advice here?

npm step goes fine, short of three warning that look rather harmless:

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN [email protected] No license field.

The problems start with webpack:

webpack -p
Hash: 5447bbad4b228dce7c4b
Version: webpack 1.14.0
Time: 7829ms
          Asset       Size  Chunks             Chunk Names
./build/Main.js      12 kB       0  [emitted]  Main
   ./build/1.js  418 bytes       1  [emitted]  
   ./build/2.js    1.45 MB       2  [emitted]  
    + 191 hidden modules

WARNING in ./build/Main.js from UglifyJs
Side effects in initialization of unused variable Config [./~/jshint-loader!./app/core/Config.js:17,0]
Condition always false [./~/style-loader/addStyles.js:24,0]
Dropping unreachable code [./~/style-loader/addStyles.js:25,0]
Condition always false [./~/style-loader!./~/css-loader!./~/autoprefixer-loader!./~/sass-loader!./style/main.scss:10,0]
Dropping unreachable code [./~/style-loader!./~/css-loader!./~/autoprefixer-loader!./~/sass-loader!./style/main.scss:12,0]
Side effects in initialization of unused variable update [./~/style-loader!./~/css-loader!./~/autoprefixer-loader!./~/sass-loader!./style/main.scss:7,0]

WARNING in ./build/1.js from UglifyJs
Condition always true [./~/domready/ready.js:6,0]
Dropping unreachable code [./~/domready/ready.js:7,0]

WARNING in ./build/2.js from UglifyJs
Condition always true [./~/eventemitter3/index.js:287,0]
Dropping unused variable j [./~/jshint-loader!./app/core/Data.js:25,0]
Dropping unused variable j [./~/jshint-loader!./app/core/Data.js:72,0]
Dropping unused variable k [./~/jshint-loader!./app/core/Data.js:72,0]
Dropping unused variable j [./~/jshint-loader!./app/core/Data.js:83,0]
Dropping unused variable k [./~/jshint-loader!./app/core/Data.js:83,0]
Dropping unused variable j [./~/jshint-loader!./app/core/Data.js:97,0]
Dropping unused variable k [./~/jshint-loader!./app/core/Data.js:97,0]
Dropping unused variable k [./~/jshint-loader!./app/core/Data.js:106,0]
Dropping unused variable tag [./~/jshint-loader!./app/core/Data.js:107,0]
Dropping unused variable tags [./~/jshint-loader!./app/core/Data.js:107,0]
Side effects in initialization of unused variable total [./~/jshint-loader!./app/core/Data.js:108,0]
Dropping unused variable totalTags [./~/jshint-loader!./app/core/Data.js:109,0]
Dropping unused variable k [./~/jshint-loader!./app/core/Data.js:149,0]
Dropping unused variable tag [./~/jshint-loader!./app/core/Data.js:150,0]
Dropping unused variable tags [./~/jshint-loader!./app/core/Data.js:150,0]
Side effects in initialization of unused variable total [./~/jshint-loader!./app/core/Data.js:151,0]
Side effects in initialization of unused variable cssSequencer [./~/jshint-loader!./app/core/Data.js:17,0]
Condition always true [./~/async/lib/async.js:1255,0]
Dropping unreachable code [./~/async/lib/async.js:1262,0]
Condition always true [./~/resource-loader/~/eventemitter3/index.js:309,0]
Condition always false [./~/style-loader!./~/css-loader!./~/autoprefixer-loader!./~/sass-loader!./style/loader.scss:10,0]
Dropping unreachable code [./~/style-loader!./~/css-loader!./~/autoprefixer-loader!./~/sass-loader!./style/loader.scss:12,0]
Side effects in initialization of unused variable update [./~/style-loader!./~/css-loader!./~/autoprefixer-loader!./~/sass-loader!./style/loader.scss:7,0]
Condition always true [./~/component-emitter/index.js:6,0]
Side effects in initialization of unused variable cover [./~/jshint-loader!./app/Birds.js:78,0]
Side effects in initialization of unused variable startLink [./~/jshint-loader!./app/Birds.js:81,0]
Side effects in initialization of unused variable isSelectedWord [./~/jshint-loader!./app/core/Filter.js:129,0]
Side effects in initialization of unused variable filterInputWrapper [./~/jshint-loader!./app/core/Filter.js:29,0]
Side effects in initialization of unused variable filterCSS [./~/jshint-loader!./app/core/Filter.js:18,0]
Dropping unused variable scope [./~/jshint-loader!./app/core/Loader.js:25,0]
Side effects in initialization of unused variable Data [./~/jshint-loader!./app/core/Loader.js:18,0]
Side effects in initialization of unused variable loaderCSS [./~/jshint-loader!./app/core/Loader.js:20,0]
Dropping unused variable loadCount [./~/jshint-loader!./app/core/Sound.js:48,0]
Side effects in initialization of unused variable zoomCSS [./~/jshint-loader!./app/core/ZoomControls.js:18,0]
Side effects in initialization of unused variable Data [./~/jshint-loader!./app/grid/Dragger.js:18,0]
Dropping unused variable touchZoomDistancePrev [./~/jshint-loader!./app/grid/Grid.js:381,0]
Dropping unused variable x [./~/jshint-loader!./app/grid/Grid.js:448,0]
Dropping unused variable y [./~/jshint-loader!./app/grid/Grid.js:448,0]
Dropping unused variable isComplete [./~/jshint-loader!./app/grid/Grid.js:514,0]
Side effects in initialization of unused variable scalar [./~/jshint-loader!./app/grid/Grid.js:533,0]
Dropping unused variable textureSquareDarker [./~/jshint-loader!./app/grid/Grid.js:54,0]
Side effects in initialization of unused variable gridCSS [./~/jshint-loader!./app/grid/Grid.js:20,0]
Side effects in initialization of unused variable support [./~/lodash/index.js:932,0]
Condition always true [./~/lodash/index.js:12323,0]
Dropping unreachable code [./~/lodash/index.js:12337,0]
Side effects in initialization of unused variable moduleExports [./~/lodash/index.js:266,0]
Condition always false [./~/style-loader!./~/css-loader!./~/autoprefixer-loader!./~/sass-loader!./style/filter.scss:10,0]
Dropping unreachable code [./~/style-loader!./~/css-loader!./~/autoprefixer-loader!./~/sass-loader!./style/filter.scss:12,0]
Side effects in initialization of unused variable update [./~/style-loader!./~/css-loader!./~/autoprefixer-loader!./~/sass-loader!./style/filter.scss:7,0]
Condition always false [./~/style-loader!./~/css-loader!./~/autoprefixer-loader!./~/sass-loader!./style/grid.scss:10,0]
Dropping unreachable code [./~/style-loader!./~/css-loader!./~/autoprefixer-loader!./~/sass-loader!./style/grid.scss:12,0]
Side effects in initialization of unused variable update [./~/style-loader!./~/css-loader!./~/autoprefixer-loader!./~/sass-loader!./style/grid.scss:7,0]
Dropping unused variable UPDATE_RATE [./~/tone/Tone/core/Clock.js:299,0]

ERROR in ./app/Birds.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./Boilerplate in /home/tracek/Projects/aiexperiments-bird-sounds/app
 @ ./app/Birds.js 17:18-42

ERROR in ./app/core/Loader.js
Module not found: Error: Cannot resolve 'file' or 'directory' ../Boilerplate in /home/tracek/Projects/aiexperiments-bird-sounds/app/core
 @ ./app/core/Loader.js 17:18-43

There are more such errors.

Any tips?

[andykenward]

@tracek I have a pull-request waiting to be merged that might solve things for you.

The whole build and develop was broken for me too.

You can check out my forked version with the pull request changes in it

[tracek]

@andykenward Thanks! And sorry it took so long for me to answer, I have not noticed your message.

I checked your 'develop' branch and pull request. Short of some warnings that don't look scary, there are still some errors (the same as in the past), namely:

ERROR in ./app/Birds.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./Boilerplate in /home/tracek/Projects/aiexperiments-bird-sounds/app
 @ ./app/Birds.js 17:18-42

ERROR in ./app/core/Loader.js
Module not found: Error: Cannot resolve 'file' or 'directory' ../Boilerplate in /home/tracek/Projects/aiexperiments-bird-sounds/app/core
 @ ./app/core/Loader.js 17:18-43

ERROR in ./app/core/Filter.js
Module not found: Error: Cannot resolve 'file' or 'directory' ../Boilerplate in /home/tracek/Projects/aiexperiments-bird-sounds/app/core
 @ ./app/core/Filter.js 17:18-43

ERROR in ./app/core/ZoomControls.js
Module not found: Error: Cannot resolve 'file' or 'directory' ../Boilerplate in /home/tracek/Projects/aiexperiments-bird-sounds/app/core
 @ ./app/core/ZoomControls.js 17:18-43

ERROR in ./app/grid/Grid.js
Module not found: Error: Cannot resolve 'file' or 'directory' ../Boilerplate in /home/tracek/Projects/aiexperiments-bird-sounds/app/grid
 @ ./app/grid/Grid.js 17:18-43

ERROR in ./app/core/Label.js
Module not found: Error: Cannot resolve module 'style/label.scss' in /home/tracek/Projects/aiexperiments-bird-sounds/app/core
 @ ./app/core/Label.js 17:0-93:2

ERROR in ./app/core/ZoomControls.js
Module not found: Error: Cannot resolve 'file' or 'directory' ../../style/ZoomControls.scss in /home/tracek/Projects/aiexperiments-bird-sounds/app/core
 @ ./app/core/ZoomControls.js 18:14-54

ERROR in ./app/grid/Dragger.js
Module not found: Error: Cannot resolve 'file' or 'directory' ../Boilerplate in /home/tracek/Projects/aiexperiments-bird-sounds/app/grid
 @ ./app/grid/Dragger.js 17:18-43

It is a clean install: npm install && webpack -p

Any advice would be much welcomed! Perhaps a mistake on my side? I am using Xubuntu 16.04.

[andykenward]

@tracek I updated README.md with the correct instructions. As running webpack from a global install won't work for everyone with the configuration of how files resolve in this project.

So try running from the root of the project

npm install && npm start

Once you're done the initial npm install you can just run npm start each time to run locally.

I am using

• node v6.11.0
• npm v3.10.10
• macOS 10.14

[tracek]

@andykenward Thanks for prompt response. Tried that already, but without much luck - errors are the same.

• node v6.11.4
• npm 3.10.10

I am pretty sure it is not related to the specific version, as a year ago I was getting exactly the same error. My webpack is installed globally. I tried this on a different machine (although still Ubuntu) and problem was identical.

[tracek]

Solved. I am guessing everyone working on this project are Apple fans :). The reason for the errors is trivial: file names did not match with what's in the code. Example:

var BoilerPlate = require("./Boilerplate");

while the file name is BoilerPlate.js. Error. I imagine Mac OS (or rather Mac's Node?) is more forgiving when it comes to file name matching.

[andykenward]

@tracek Ha! Case sensitive filenames was the only thing I could think it was. I looked through the usage of require for typos and totally missed Boilerplate to BoilerPlate.

I even started to add in eslint instead of jshint to check the code for me. But you beat me to it.

Personally I always use snake_case for filenames due to this issue happen to me in the past on CI systems and working with multiple developers on different platforms.

But a good code linter setup also catches these things.

[tracek]

@andykenward Thanks again for your help and maintaining the project! I am a total newbie to JS, so for long time I thought it has something to do with the way dependencies are resolved and eventually even started hardcoding file paths. Only then I noticed the issue with case-sensitivity... I am working on building free & open tool for conservation scientists and this project seems like a good inspiration. Large number of labelled records are not easy to come by, so unsupervised methods with some nice user interface are great to have.

[EDIT: I will keep the issue open until it is fixed in the code]

[andykenward]

@tracek I would not use this repo as an example of writing JS.

If you are new to JS I suggest learning ES6 JS.

Check out

• https://mjavascript.com
• https://egghead.io

[tracek]

Thanks, good to know. The project is for me purely of scientific interest, learning ES6 is a side effect.

I see you have been fixing naming in your fork - thanks! Here are two other naming problems:

ERROR in ./app/core/Label.js
Module not found: Error: Cannot resolve module 'style/label.scss' in /home/tracek/Projects/aiexperiments-bird-sounds/app/core
 @ ./app/core/Label.js 17:0-93:2

ERROR in ./app/core/ZoomControls.js
Module not found: Error: Cannot resolve 'file' or 'directory' ../../style/ZoomControls.scss in /home/tracek/Projects/aiexperiments-bird-sounds/app/core
 @ ./app/core/ZoomControls.js 18:14-54

[andykenward]

@tracek Yeah. I started to implement eslint code linter to catch anymore errors in the code. But this just highlighted even more issues. Bad scoping and coding standards. JS is very forgiving when you run it and the code base does work. So I've just fixed a few more filename and folder issues when require / define files for now.

There is a resolver in webpack config to app which then alias whole directory /app.

It allows you to do

var Data = require("core/Data");

instead of

var Data = require ('../core/Data');

I've removed it, as it wasn't always used in the code base. I also find it confuses people.

Not going to do anymore to the current code base myself. Ideally I would rather refactor the whole repo to ES6 code. But as the owners aren't maintaining it I don't see a point.

It would be great if they just merged my pull request to fix the build for people.