Webpack import from files that use module.exports - node.js

Question

I have React app and a file where I want to store things related to api.
const proxy = require('http-proxy-middleware');
const path = require('path');
//.....
const targetApi = (objectWithUrlEntries) => {
Object.keys(objectWithUrlEntries).forEach((key) => {
objectWithUrlEntries[key] = path.join('/api/', objectWithUrlEntries[key]);
});
};
module.exports.proxyExpressCalls = proxyExpressCalls;
module.exports.devServerProxyConfig = devServerProxyConfig;
module.exports.targetApi = targetApi;
Some of those things will be used by webpack itself, and some will be used inside the app (to correctly target api calls).
However when I try to import things in my app:
// #flow
import { buildUrl } from 'data/utils';
import type { Axios } from './flow.types';
import { targetApi } from './api';
console.log(targetApi());
I get errors. In terminal:
WARNING in ./src/data/redux/api/user.js 6:12-21 "export 'targetApi'
was not found in './api'
in browser:
api.js?d669:39 Uncaught TypeError: Cannot set property 'proxyExpressCalls' of undefined
at Object.eval (api.js?d669:39)
at eval (api.js:60)
at Object../src/data/redux/api/api.js (client.bundle.js:11620)
at __webpack_require__ (client.bundle.js:708)
at fn (client.bundle.js:113)
at eval (user.js:15)
at Object../src/data/redux/api/user.js (client.bundle.js:11668)
at __webpack_require__ (client.bundle.js:708)
at fn (client.bundle.js:113)
at eval (user.js:18)
So the problem is that when app is being bundled commonjs exports fail, but if I would use es6 export syntax then Node would fail.

Answer 1

I had a similar problem: I had a javascript class with some validation rules that I wanted to use in Node JS and also in the client code. What worked for me was converting everything to Common JS, the shared code, the node code, and the client code. But I still had some problems. Then I added "module": "commonjs" to my .babelrc of the folder that imports the shared code and it finally worked. This is my .babelrc file:
{
"presets": [
"react",
[
"env",
{
"debug": true,
"modules": "commonjs",
"targets": {
"browsers": [
"last 2 versions",
"safari >= 7"
],
}
}
],
],
"plugins": [
"transform-object-rest-spread",
"transform-es2015-arrow-functions",
"transform-class-properties"
]
}
Another possible solutions is (not tested!) to create a library out of your shared code, using webpack. Check the output.library and output.libraryTarget options to see which options you have to expose the library in different module systems. Then import your shared library in your node and client code.

Answer 2

The browser error holds the key: it looks like module.exports is null. And sure enough, you're setting values on it but it was not initialized. If instead you do this:
module.exports = {
proxyExpressCalls: proxyExpressCalls,
devServerProxyConfig: devServerProxyConfig,
targetApi: targetApi
};
(or simply set module.exports = {} first) this should solve the problem. The console warning is likely a side effect of code that keeps going even after the failure to set values on a null variable.