Errors with node modules while serving

[WilsonPhoo]

Mainly lodash and jquery.

lodash:

\node_modules\lodash\_overRest.js:31
    otherArgs[start] = transform(array);

TypeError: transform is not a function

jquery:

\node_modules\convert-source-map\index.js:61
  return SafeBuffer.Buffer.from(json, 'utf8').toString('base64');
                    ^

TypeError: Cannot read property 'Buffer' of undefined

Also, how are we able to use absolute path?
For eg, I cannot do this:
import { SET_SOMETHING } from 'actions/someActions';
I have to do this:
import { SET_SOMETHING } from '../../actions/someActions';

Any idea how to solve these?
Thanks!

[farisdewantoro]

i got same issue. did u fixed ? @WilsonPhoo

[WilsonPhoo]

I got it to run by adding all these to the index.js in the server folder.

require('@babel/polyfill'); require('@babel/register')({ ignore: [/@babel[\/\\]runtime/, /\/(build|node_modules)\//, /node_modules/], presets: ['@babel/preset-env', '@babel/preset-react'], plugins: [ '@babel/plugin-syntax-dynamic-import', '@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties', '@babel/plugin-proposal-object-rest-spread', 'dynamic-import-node', 'react-loadable/babel', ["module-resolver", { "root": ["./src"], "alias": { "test": "./test", "underscore": "lodash" } }], ] });

package.json dependencies:
"@babel/core": "^7.4.3", "@babel/plugin-proposal-class-properties": "^7.4.0", "@babel/plugin-proposal-object-rest-spread": "^7.4.3", "@babel/plugin-syntax-dynamic-import": "^7.0.0", "@babel/plugin-transform-runtime": "^7.4.3", "@babel/polyfill": "^7.0.0", "@babel/preset-env": "^7.4.3", "@babel/preset-react": "^7.0.0", "@babel/register": "^7.0.0", "babel-plugin-dynamic-import-node": "^2.1.0", "babel-plugin-module-resolver": "^3.2.0",

For the jquery portion, node does not expose the window object so it does not work for server rendering.

I made it work by using the script tag in index.html instead of the npm package.
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

You will also need this global npm package to expose the window object.
https://www.npmjs.com/package/global

There is still a problem if you are using the window object on componentDidMount.
It might not get initialized yet and usage of it might result in an error.

You might want to do something like this and delay usage to avoid errors.
if (window.addEventListener) { ... }
if (window.$) { ... }

I am still experimenting... hope it helps!

[cereallarceny]

Hey, my apologies for the long wait @WilsonPhoo - I'm looking to ensure this is fixed with version 2.0. If you're interested, I could really use your thoughts for what you'd like to see in the upcoming version. Feel free to comment on the issue here with any suggestions. :)

@farisdewantoro