Cannot npm start / build on Windows 10

[s-pic]

Bug description 1

Running npm start or npm run build results in this error:

Der Befehl "NODE_ENV" ist entweder falsch geschrieben oder
konnte nicht gefunden werden.

Solution approach 1

Setting cross-env abstracts away different syntaxes for setting environment variables on different platforms.

Doing so results in another error:

Bug description 2

D:\dev\fixmy.frontend\node_modules\webpack-cli\bin\config-yargs.js:89
                                describe: optionsSchema.definitions.output.properties.path.description,
                                                                           ^

TypeError: Cannot read property 'properties' of undefined
    at module.exports (D:\dev\fixmy.frontend\node_modules\webpack-cli\bin\config-yargs.js:89:48)
    at Object.<anonymous> (D:\dev\fixmy.frontend\node_modules\webpack-dev-server\bin\webpack-dev-server.js:84:40)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Function.Module.runMain (module.js:693:10)
    at startup (bootstrap_node.js:191:16)
    at bootstrap_node.js:612:3

Solution approach 2

Upgrading webpack and webpack cli according to this conment

    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.1",

Can I do a PR?

Results of webpack-cli info

System:
OS: Windows 10
CPU: x64 Intel(R) Core(TM) i5-6600 CPU @ 3.30GHz
Binaries:
npm: 6.4.0 - C:\Program Files\nodejs\npm.CMD
npmPackages:
clean-webpack-plugin: ^0.1.19 => 0.1.19
copy-webpack-plugin: ^4.5.1 => 4.5.4
eslint-import-resolver-webpack: ^0.8.4 => 0.8.4
html-webpack-plugin: ^3.0.7 => 3.2.0
uglifyjs-webpack-plugin: ^1.2.3 => 1.3.0
webpack: ^4.20.2 => 4.22.0
webpack-bundle-analyzer: ^2.13.1 => 2.13.1
webpack-cli: ^3.1.1 => 3.1.2
webpack-dev-server: ^3.1.6 => 3.1.9
webpack-merge: ^4.1.2 => 4.1.4

[hekele]

Yes sure 👍 PRs are very welcome!

[s-pic]

Cool. I was able to build using the fix stated.

After doing another pull I ran into this error:

ERROR in ./node_modules/slick-carousel/slick/slick-theme.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleParseError: Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> <?xml version="1.0" standalone="no"?>
| <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
| <svg xmlns="http://www.w3.org/2000/svg">
    at handleParseError (D:\dev\fixmy.frontend\node_modules\webpack\lib\NormalModule.js:432:19)
    at doBuild.err (D:\dev\fixmy.frontend\node_modules\webpack\lib\NormalModule.js:466:5)
    at runLoaders (D:\dev\fixmy.frontend\node_modules\webpack\lib\NormalModule.js:327:12)
    at D:\dev\fixmy.frontend\node_modules\loader-runner\lib\LoaderRunner.js:370:3
    at iterateNormalLoaders (D:\dev\fixmy.frontend\node_modules\loader-runner\lib\LoaderRunner.js:211:10)
    at Array.<anonymous> (D:\dev\fixmy.frontend\node_modules\loader-runner\lib\LoaderRunner.js:202:4)
    at Storage.finished (D:\dev\fixmy.frontend\node_modules\webpack\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:43
:16)
    at provider (D:\dev\fixmy.frontend\node_modules\webpack\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:79:9)
    at D:\dev\fixmy.frontend\node_modules\graceful-fs\graceful-fs.js:78:16
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:511:3)
 @ ./src/pages/Map/components/DetailView/ImageSlider/index.js 27:0-46
 @ ./src/pages/Map/components/DetailView/PlanningDetail/index.js
 @ ./src/pages/Map/Map.js
 @ ./src/pages/Map/index.js
 @ ./src/App.js
 @ ./src/index.js
 @ multi ./webpack/polyfills.js ./src/index.js

Any idea here?

[moklick]

Thanks for the bug reports. We are doing an update in the next days. Let's see if it will resolve your issues.

[moklick]

Hey @GeoMC,

we just updated everything on the development branch. You you check if it's working for you now?

[s-pic]

Hey @moklick, thanks for the update.

Nope, it is not working out of the box.

At first, the error concerning NODE_ENV occurs, I guess cross-env still needs to be set.

After that, webpack is not found. Fix for my system was

npm i -g webpack
npm link webpack

After that webpack complains about unresolved plugin dependencies:

fixmyberlin-frontend@1.0.0 start D:\dev\priv\fixmy.frontend
> cross-env NODE_ENV=development webpack-dev-server --config webpack/webpack.config.dev.js

module.js:549
    throw err;
    ^

Error: Cannot find module 'html-webpack-plugin'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (D:\dev\priv\fixmy.frontend\webpack\webpack.config.dev.js:4:27)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)

System:
OS: Windows 10
CPU: (4) x64 Intel(R) Core(TM) i7-7500U CPU @ 2.70GHz
Binaries:
Yarn: 1.12.1 - C:\Users\picards\AppData\Roaming\npm\yarn.CMD
npm: 5.6.0 - C:\Program Files\nodejs\npm.CMD
npmPackages:
clean-webpack-plugin: ^0.1.19 => 0.1.19
copy-webpack-plugin: ^4.6.0 => 4.6.0
webpack-cli: ^3.1.2 => 3.1.2
webpack-dev-server: ^3.1.10 => 3.1.10
webpack-merge: ^4.1.4 => 4.1.4

[moklick]

Thanks. We are now using cross-env. That your system can't find webpack seems to be a common windows problem. html-webpack-plugin is part of the dependencies. Did you do npm install?

[s-pic]

Whoops. Running npm install again enabled npm run start to run without errors.

Just one more comment about a detail:
webpack-dev-server outputs that the app is running at http://0.0.0.0:8081, whereas it is actually running at localhost:8081.
I've seen that is explicitly set in

fixmy.frontend/webpack/webpack.config.dev.js

Line 16 in c060178

host: '0.0.0.0',

.
Is there a reason why its is not set to localhost?

More importantly, I still cannot build:

> fixmyberlin-frontend@1.0.0 build D:\dev\priv\fixmy.frontend
> cross-env NODE_ENV=production webpack --config webpack/webpack.config.prod.js                                                                                                                                                                                                --colors

clean-webpack-plugin: D:\dev\priv\fixmy.frontend\build has been removed.

ERROR in ./node_modules/slick-carousel/slick/slick-theme.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js)                                                                                                                                                                                               :
ModuleParseError: Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> <?xml version="1.0" standalone="no"?>
| <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG                                                                                                                                                                                               /1.1/DTD/svg11.dtd">
| <svg xmlns="http://www.w3.org/2000/svg">
    at handleParseError (D:\dev\priv\fixmy.frontend\node_modules\webpack\lib\Nor                                                                                                                                                                                               malModule.js:432:19)
    at doBuild.err (D:\dev\priv\fixmy.frontend\node_modules\webpack\lib\NormalMo                                                                                                                                                                                               dule.js:466:5)
    at runLoaders (D:\dev\priv\fixmy.frontend\node_modules\webpack\lib\NormalMod                                                                                                                                                                                               ule.js:327:12)
    at D:\dev\priv\fixmy.frontend\node_modules\loader-runner\lib\LoaderRunner.js                                                                                                                                                                                               :370:3
    at iterateNormalLoaders (D:\dev\priv\fixmy.frontend\node_modules\loader-runn                                                                                                                                                                                               er\lib\LoaderRunner.js:211:10)
    at Array.<anonymous> (D:\dev\priv\fixmy.frontend\node_modules\loader-runner\                                                                                                                                                                                               lib\LoaderRunner.js:202:4)
    at Storage.finished (D:\dev\priv\fixmy.frontend\node_modules\webpack\node_mo                                                                                                                                                                                               dules\enhanced-resolve\lib\CachedInputFileSystem.js:43:16)
    at provider (D:\dev\priv\fixmy.frontend\node_modules\webpack\node_modules\en                                                                                                                                                                                               hanced-resolve\lib\CachedInputFileSystem.js:79:9)
    at D:\dev\priv\fixmy.frontend\node_modules\graceful-fs\graceful-fs.js:78:16
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:511:3)
 @ ./src/pages/Map/components/DetailView/ImageSlider/index.js 33:0-46
 @ ./src/pages/Map/components/DetailView/SectionDetail/index.js
 @ ./src/pages/Map/Map.js
 @ ./src/pages/Map/index.js
 @ ./src/App.js
 @ ./src/index.js

[moklick]

We set the host to 0.0.0.0 in order to be able to access the dev server via IP. I just adjusted the webpack loader for SVGs. You you check again?

[s-pic]

Yep, all good :) Thanks!