react-scripts-build => 'navigator is not defined'

[ztotta]

Attempting to build & deploy to gh-pages, but it's failing at 'react-scripts-build', throwing 'Module build failed: ReferenceError: navigator is not defined'. It appears to be coming from App.css, but I can't find what 'navigator' is referring to in the first place. Do you know what 'navigator' refers to and what could be causing this?

Here's the commit of the project at this point: ztotta/zach_totta@e7ec3e6

And here's the log:

react-scripts build

Creating an optimized production build...
Failed to compile.

**Module build failed: ReferenceError: navigator is not defined**
    at Object.module.exports.e.__esModule.default (/Users/mac/programming-projects/Portfolio/node_modules/css-loader/index.js?importLoaders=1!/Users/mac/programming-projects/Portfolio/node_modules/postcss-loader/index.js!/Users/mac/programming-projects/Portfolio/src/App.css:35005:25079)
    at t (/Users/mac/programming-projects/Portfolio/node_modules/css-loader/index.js?importLoaders=1!/Users/mac/programming-projects/Portfolio/node_modules/postcss-loader/index.js!/Users/mac/programming-projects/Portfolio/src/App.css:35004:122)
    at Object.<anonymous> (/Users/mac/programming-projects/Portfolio/node_modules/css-loader/index.js?importLoaders=1!/Users/mac/programming-projects/Portfolio/node_modules/postcss-loader/index.js!/Users/mac/programming-projects/Portfolio/src/App.css:35005:29200)
    at t (/Users/mac/programming-projects/Portfolio/node_modules/css-loader/index.js?importLoaders=1!/Users/mac/programming-projects/Portfolio/node_modules/postcss-loader/index.js!/Users/mac/programming-projects/Portfolio/src/App.css:35004:122)
    at Object.<anonymous> (/Users/mac/programming-projects/Portfolio/node_modules/css-loader/index.js?importLoaders=1!/Users/mac/programming-projects/Portfolio/node_modules/postcss-loader/index.js!/Users/mac/programming-projects/Portfolio/src/App.css:35004:513)
    at t (/Users/mac/programming-projects/Portfolio/node_modules/css-loader/index.js?importLoaders=1!/Users/mac/programming-projects/Portfolio/node_modules/postcss-loader/index.js!/Users/mac/programming-projects/Portfolio/src/App.css:35004:122)
    at /Users/mac/programming-projects/Portfolio/node_modules/css-loader/index.js?importLoaders=1!/Users/mac/programming-projects/Portfolio/node_modules/postcss-loader/index.js!/Users/mac/programming-projects/Portfolio/src/App.css:35004:210
    at Object.<anonymous> (/Users/mac/programming-projects/Portfolio/node_modules/css-loader/index.js?importLoaders=1!/Users/mac/programming-projects/Portfolio/node_modules/postcss-loader/index.js!/Users/mac/programming-projects/Portfolio/src/App.css:35004:215)
    at __webpack_require__ (/Users/mac/programming-projects/Portfolio/node_modules/css-loader/index.js?importLoaders=1!/Users/mac/programming-projects/Portfolio/node_modules/postcss-loader/index.js!/Users/mac/programming-projects/Portfolio/src/App.css:21:30)
    at Object.<anonymous> (/Users/mac/programming-projects/Portfolio/node_modules/css-loader/index.js?importLoaders=1!/Users/mac/programming-projects/Portfolio/node_modules/postcss-loader/index.js!/Users/mac/programming-projects/Portfolio/src/App.css:35014:19)
    at __webpack_require__ (/Users/mac/programming-projects/Portfolio/node_modules/css-loader/index.js?importLoaders=1!/Users/mac/programming-projects/Portfolio/node_modules/postcss-loader/index.js!/Users/mac/programming-projects/Portfolio/src/App.css:21:30)
    at Object.<anonymous> (/Users/mac/programming-projects/Portfolio/node_modules/css-loader/index.js?importLoaders=1!/Users/mac/programming-projects/Portfolio/node_modules/postcss-loader/index.js!/Users/mac/programming-projects/Portfolio/src/App.css:37709:32)
    at __webpack_require__ (/Users/mac/programming-projects/Portfolio/node_modules/css-loader/index.js?importLoaders=1!/Users/mac/programming-projects/Portfolio/node_modules/postcss-loader/index.js!/Users/mac/programming-projects/Portfolio/src/App.css:21:30)
    at Object.module.exports.Object.defineProperty.value (/Users/mac/programming-projects/Portfolio/node_modules/css-loader/index.js?importLoaders=1!/Users/mac/programming-projects/Portfolio/node_modules/postcss-loader/index.js!/Users/mac/programming-projects/Portfolio/src/App.css:37077:23)
    at __webpack_require__ (/Users/mac/programming-projects/Portfolio/node_modules/css-loader/index.js?importLoaders=1!/Users/mac/programming-projects/Portfolio/node_modules/postcss-loader/index.js!/Users/mac/programming-projects/Portfolio/src/App.css:21:30)
    at Object.module.exports.Object.defineProperty.value (/Users/mac/programming-projects/Portfolio/node_modules/css-loader/index.js?importLoaders=1!/Users/mac/programming-projects/Portfolio/node_modules/postcss-loader/index.js!/Users/mac/programming-projects/Portfolio/src/App.css:37834:13)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! Portfolio@0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the Portfolio@0.1.0 build script 'react-scripts build'.```

[darrenscerri]

Remove the line https://github.com/ztotta/Portfolio/blob/e7ec3e6abc19bb9f6761aa755287b4db0d8aa195/src/App.css#L162 (App.css:162)

There is an empty URL which is trying to be resolved. I agree though, the error is quite cryptic.

[ztotta]

Thank you!!!

[gaearon]

Wow, that error is super confusing.
Let's reopen until we file a bug in style-loader (or whatever is generating this).

[gaearon]

Tagging as up for grabs. The follow up item here is to create a minimal reproducing case with just Webpack (no CRA) and file a bug in the appropriate project (it's likely either style-loader or css-loader).

[darrenscerri]

Ok finally found out what the problem is. Webpack is trying to load '' from ./src/App.css, and and resolves it to ./src/index.js. Webpack, for some reason, then proceeds to execute all the code found in this file and its dependencies and finally crashes due to being in strict mode when trying to load react-responsive-sidebar and navigator is not defined (https://github.com/gregchamberlain/react-responsive-sidebar/blob/master/src/Sidebar.js#L93).

It's quite weird that Webpack actually executes the code inside the files. You can also see console.log output from the client code itself while the bundle is being built!

If you change ./src/index.js to this:

import './App.css';
console.log('========= Oopsie! !========');
require('react-responsive-sidebar');

This obscure behaviour when importing '' has since been fixed here webpack/webpack#2006.

[gaearon]

So what is the next step here? Is this supposed to be fixed in Webpack? Should we file another issue?

[darrenscerri]

Thought this issue was fixed for Webpack ^2.1.0 but apparently this is only fixed for specific require calls. css-loader and extract-text-webpack-plugin both seem to have related issues. Filed issues here:

webpack/webpack#4541
webpack-contrib/css-loader#462
webpack-contrib/extract-text-webpack-plugin#465

This is a repo that reproduces these issues:
https://github.com/darrenscerri/webpack-extract-text-plugin-empty-require-error