Imported components transformed into "/static" urls in react-create-app

Question

I'm having an issue I can't really find any previous answers to or documentation about.

I'm loading a component, in a module, on my local machine, "login.jsx," into an "index.js":

import Login from './login';

export { Login };

The exported component inside "login.jsx" is very basic.

The module main points directly to the index.js file and I'm importing it into the "App.js" file generated by create-react-app.

The directory structure of the module is as follows:

module
   | src
   | --- components
   | --- --- login.jsx
   | --- --- index.js
   | package.json    

It is worth noting that this is also a create-react-app, but none of the generated files are part of the main exports of the linked module.

When I import it, and console.log, it is imported as a string: "/static/media/login.1d0b2e37.jsx."

Specifically, the error I'm getting is:

Invalid tag: /static/media/login.1d0b2e37.jsx

Because I am attempting to load the import:

import { Login } from 'component-module';

directly into a react-router-dom route. All components that live directly in my create-react-app folder, "src," render just fine.

When logging:

console.log(Login);

after the import, it is immediately clear that it is a string: "/static/media/login.1d0b2e37.jsx."

The directory structure of my create-react-app project is (a generic create-react-app):

create-react-app
   | src
   | --- App.js

In which exists the aforementioned import, which is resulting in importing Login as a string.

Is there some weirdness going on here with the create-react-app development server rendering of external components? Maybe in one of the Webpack plugins thats just treating externals as static?

As far as I can tell, there is no information about this in the create-react-app docs

Answer 1

By module, do you mean a library? As in something you can install as a dependency for other apps via npm install?

If so, CRA is not designed for that purpose. It is intended for creating apps.

If you really see the need to create a library for a login component, and want to do so using CRA, you can follow this guide: https://medium.com/@lokhmakov/best-way-to-create-npm-packages-with-create-react-app-b24dd449c354 or use this tool, although I have never tried it myself and cannot vouch for it.

Is there a good reason for implementing your component as a library though? Libraries are mainly intended for sharing generic functionality with developers for use in their individual applications.

If you only intend to use this component in your particular app, I would suggest implementing it as a component within your app. You can still implement it as a standalone library, but without needing to set up the build logic.

create-react-app
|src
|    App.js
|    components
|        Login
|            index.js
|            Login.jsx

And in App.js import Login from './components/Login