Images and maybe CSS not being loaded

[AlbertSanIza]

Hello,

I am trying to use your repo to do an internal library that will not be published to npm...

The way I am exporting is the following: Go into your lib project root and run

npm pack

I like to move the package to somewhere like my desktop so it would look something like...

mv your-package-0.1.0.tgz ~/Desktop

Then go to your consuming project and run

npm install ~/Desktop/your-package-0.1.0.tgz

It installs the lib and I am able tu use it in my project as if it downloaded from the internet (npm). The thing is that when I use the "Example" it is not loading the image or the css (changed text color to red). For example the url where it is trying to get the image from in the new project: http://localhost:3000/media/a02392f5ea4ef5b2e89adf7c992f9512.svg

Any idea what might be causing it?

[AlbertSanIza]

Hello its me again...

I was looking at your "react-under-construction" sample and I noticed that you are passing some images as props to your component.

But is there a way to use the one that is bundled? like in your "create-react-library/src/lib/components/Example.js"

Because when I do npm run build it gets bundled in the build folder but I doesn't work for me when I use it as a library in some other "create-react-app" project.

Thanks for your help.

[DimiMikadze]

Hi @AlbertSanIza

Can you tell me what error message you are getting, when you try to load image and it's not loading?

[AlbertSanIza]

Basically to replicate the following I created a "create-react-app" and a "create-react-library", build the lib and see how it looked like in the app.

All images and css is applied to my lib project, and when I do "npm build" it does this:

Once I package it with "npm pack" everything gets inside as well, so I am not sure why is not picking it up.

It is not exactly an error message, it just doesn't show up on the consuming app:

[DimiMikadze]

I don't know why it's not loading assets and unfortunately right now i can't test / replicate it. I'll leave this issue open maybe someone knows how to solve this problem

[voodee]

The problem exists, did anybody find a solution?

[AlbertSanIza]

Not yet 😢

[reinrl]

The only solution I have found is a workaround - to reference the generated css file in my calling application like this:

// assumes that your library is named "create-react-library"...
import Example from "create-react-library";
import "create-react-library/build/static/css/index.css";
// rest of your code here...

Beyond that, it appears like the code (originally created for create-react-app) uses a combination of mini-css-extract-plugin, style-loader, and css-loader to take any referenced CSS files and concatenate them and write them out to /build/static/css/index.css (with associated map file). In the original create-react-app implementation, this file is then referenced in the built index.html, effectively combining the CSS and the JS. Because this library usage intends to simply render within the tag(s) placed within your calling application, there is no linkage between the generated JS (referenced by the main attribute in package.json) and the generated CSS. I didn't go too far down this road, but it would seem like different loader(s) would be needed in order to bundle/embed the CSS within the generated JS - although then you would lose the ability to let the browser load the JS and CSS in parallel, instead forcing it to download the entire bundle before rendering (which may or may not be a big deal, depending on the size of what your library is providing/referencing).

Side note: @DimiMikadze - any reason why you removed the hash used in the generated file names from create-react-app? It is my understanding that this allows the browser to cache the files (while also allowing new versions of the code to force a reload by the browser, instead of referencing the old version in cache)?

• (from create-react-app/.../webpack.config.js): filename: 'static/css/[name].[contenthash:8].css',
• (from create-react-library/.../webpack.config.js): filename: 'static/css/index.css', // CRL-

[DimiMikadze]

@reinrl hi, sorry for late answer. You're absolutely right, we've decided to remove hashes from generated css files, because when you publish your library that is dependent on external css, e.g import "create-react-library/build/static/css/index.css"; we don't want css filename to be different on every new build/publish, because that will force library users to change their css imports every time we publish new version.