chunkName not working?

Aperta
  • Qualcosa non va?
#200 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
25/100
Tipo di issue
Bug
Chiarezza
Da chiarire
Stato di attività
Ferma
Stack tecnologico
babel, javascript, react, webpack
Ambito
build-system, frontend

Direzione di ricerca

Inizia con gli snippet forniti di universal component e dynamic import, quindi riproduci l’output del chunk generato in cui rimane icons/MyIcon. Confronta le opzioni chunkName e ignoreBabelRename con i percorsi mostrati di babel-plugin-universal-import e webpack magic-comment. L’attività è completata quando avrai identificato perché il nome personalizzato richiesto viene ignorato e verificato che il chunk generato utilizzi il nome richiesto.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Hi, I have a problem, I am trying to use a custom chunkName, but it does not seem to work, I tried with the babel-plugin-universal-import and without, no way, I don't know if I am doing something wrong, here is the basic piece of code:

const options = {
  render: (props: Props, Mod: any) => {
    if (!Mod) return <Loader iconSize={props.iconSize} />;

    const { iconSize, ...otherProps } = props;

    return <Mod {...otherProps} />;
  },
};

const asyncComponent = (props: Props) => import(`./icons/${allIcons[props.icon]}`);

export default universal(asyncComponent, options);

I tried to add in the options these properties:

const options = {
  ignoreBabelRename: true,
  chunkName: (props) => `whatever-${props.icon}`,
  render: (props: Props, Mod: any) => {
    if (!Mod) return <Loader iconSize={props.iconSize} />;

    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    const { iconSize, ...otherProps } = props;

    return <Mod {...otherProps} />;
  },
};

it does not work, tried to add the chunkName in the asyncLoader something similar to this:

const UniversalComponent = universal(props => universalImport({
  chunkName: props => props.page,
  path: props => path.join(__dirname, `./${props.page}`),
  resolve: props => require.resolveWeak(`./${props.page}`),
  load: props => Promise.all([
    import( /* webpackChunkName: '[request]' */ `./${props.page}`)
  ]).then(proms => proms[0])
}));

nothing seems to work, the output is always icons/MyIcon for example.

Lingua principale
JavaScript
Stelle
1.7k
Fork
80
Nessuna PR unita negli ultimi 30g

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di faceyspacey/react-universal-component

Tutte le issue di faceyspacey/react-universal-component

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.