reactjs - React-komponentbibliotek kan inte ladda sin egen statiska resurs

Jag har en React-app (som använder Create React App) och sedan ett komponentbibliotek (som använder Webpack direkt). En komponent i komponentbiblioteket behöver ladda en PNG-fil i en av komponenterna som den exporterar. I Webpack-konfigurationen för komponentbiblioteket har jag en sektion som:

      {
        test: /\.(png|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },

Detta resulterar framgångsrikt i en fil som: 29b6b66cf1a691be2b3f.png i komponentbibliotekens utgångskatalog. Problemet är att när applikationen använder den komponenten och komponenten försöker ladda bilden, blir img-elementet <img ... src="29b6b66cf1a691be2b3f.png" /> och det misslyckas med att ladda, eftersom den bilden faktiskt finns i komponentbibliotekets mapp (inom react-applikationens node_modules/component-library/ vid det tillfället).

Jag har genomsökt internet så gott jag kan och kan inte tycks lista ut vad den bästa lösningen skulle vara här. All hjälp uppskattas. Jag kan snabbt ge förtydligande om det behövs.

UPPDATERING: Jag har upptäckt CopyWebpackPlugin men det är ganska olyckligt att detta skulle kräva att jag ejectar "moder"-applikationen från create react app. Något jag mycket gärna skulle vilja undvika.

UPPDATERING2: Den nuvarande planen är att försöka följa något liknande det som förklaras här. Huvudpoängen är att använda något liknande rewire för att undvika att behöva ejecta och fortfarande kunna redigera webpack-konfigurationen via något liknande:

// in ./build.js
const rewire = require('rewire');
const defaults = rewire('react-scripts/scripts/build.js');
const config = defaults.__get__('config');

// edit webpack config values here

... Jag kommer att svara på min egen fråga här om jag upptäcker att detta tillvägagångssätt fungerar.

Svar #1

Okej, ja, det kändes som att det var mycket stökigare än det behövde vara, men jag kunde hitta ett sätt att klara av detta. Delarna var som följer.

Först behövde jag installera copy-webpack-plugin. Det var inte så enkelt som det kan låta, eftersom jag behövde hitta en som inte skulle konflikt med den version av webpack som krävs av mina react-scripts (create react app). Jag konstaterade att [email  var den sista versionen som stödde webpack v4, så jag installerade den och sedan lade jag till följande i min package.json:

  "overrides": {
    "copy-webpack-plugin": {
      "webpack": "4.44.2"
    }
  },

detta säkerställde att det skulle använda den version av webpack som min react-scripts-installation förväntade sig.

Sedan behövde jag också installera rewire och lägga till följande i en fil som heter build.js:

const rewire = require('rewire');
const defaults = rewire('react-scripts/scripts/build.js');
const config = defaults.__get__('config');
const CopyPlugin = require("copy-webpack-plugin");


const patterns = [
  { 
    context: "node_modules/component-library/path/",
    from: "*.png", 
    to: "." 
  },
]


if(config.plugins === undefined){
  config.plugins = [new CopyPlugin({patterns})]
}else{
  config.plugins.push(new CopyPlugin({patterns}))
}

// below lets it work in dev mode too
if(config.devServer === undefined){
  config.devServer = {
    writeToDisk: true
  }
}else{
  config.devServer.writeToDisk = true;
}

Slutligen var jag tvungen att uppdatera mitt byggskript till:

  "scripts": {
    ...
    "build": "node ./build.js",
    ...
  },