Node.js compiles files I did not require. How does that work under the hood?

Question

I am incurring an error I fail to understand in node.js. I have a file which I did not require at all but finds it way in the module system loading and compiling which I do not want as it would be served on the client only.

Here is the setup with babel:

bootstrap.js

require('babel/register');
require('./server/index');

The index.js has nothing related to main.jsx . Nevertheless here are its imported modules:

index.js

import express from 'express';
import routes from './routes';
import path from 'path';

But somehow node.js tries to load and compile main.jsx which gives me error as such:

/home/minheq/Git/react_app/node_modules/react/lib/invariant.js:49
throw error;
^

Error: Invariant Violation: You cannot use <HistoryLocation> without a DOM
at invariant (/home/minheq/Git/react_app/node_modules/react/lib/invariant.js:42:15)
at createRouter (/home/minheq/Git/react_app/node_modules/react-router/lib/createRouter.js:131:5)
at Object.runRouter [as run] (/home/minheq/Git/react_app/node_modules/react-router/lib/runRouter.js:40:16)
at Object.<anonymous> (/home/minheq/Git/react_app/app/main.jsx:6:10)
at Module._compile (module.js:430:26)
at normalLoader (/home/minheq/Git/react_app/node_modules/babel-core/lib/api/register/node.js:199:5)
at Object.require.extensions.(anonymous function) [as .jsx] (/home/minheq/Git/react_app/node_modules/babel-core/lib/api/register/node.js:216:7)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (module.js:384:17)

Particularly this line:

at Object.<anonymous> (/home/minheq/Git/react_app/app/main.jsx:6:10)'

Any reference on how that happens perhaps? Thanks!

Answer 1

The importation of main.jsx comes from this line:

import routes from './routes';

In your error stacktrace, you'll see this:

react-router/lib/runRouter.js

Regarding the Invariant Violation , see this issue on Github .