Nikola Schou Nikola Schou - 1 year ago 120
React JSX Question

create-react-app yields 'the request of a dependency is an expression' in express/lib/view.js

I'm trying to get a jump start with React and like the simplicity of the create-react-app tool created by Facebook and described here:

Can anybody tell me what is wrong here?

I'm trying to combine it with FeatherJS and add this dependency to package.json:

"feathers": "^2.0.0"

and this to App.js:

import feathers from 'feathers';

Now my web app will not load and I get this error in the console:

Compiled with warnings.

Warning in ./src/App.js

4:8 warning 'feathers' is defined but never used no-unused-vars

✖ 1 problem (0 errors, 1 warning)

Warning in ./~/express/lib/view.js
Critical dependencies:
78:29-56 the request of a dependency is an expression
@ ./~/express/lib/view.js 78:29-56

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.

Answer Source

Judging by its documentation, feathers ifself is the server and runs on Node.

On the other hand, a React app is a client-side application and runs in the browser.

You can't import feathers into a browser app because it is a library intended only for the server.

Note: Technically React apps can run on the server too but Create React App doesn't currently support server rendering. It also comes with many pitfalls so I recommend holding off using it until you are comfortable with React itself.

Normally, with Create React App, you are expected to run your API server (which may use Feathers) separately as a Node (or any other) app. The React client would access it via AJAX or other network APIs.

Your Node app would use feathers for the server, and React app would use feathers/client to communicate with it.

To read about setting up a Node and a client-side React app to talk to each other, check out this tutorial and its demo.