Необработанный отказ (ChunkLoadError): ошибка загрузки фрагмента 1 - PullRequest
Новая
       106

Необработанный отказ (ChunkLoadError): ошибка загрузки фрагмента 1

1 голос
/ 06 октября 2019

Я в основном пытаюсь сделать poc при извлечении некоторой части моего основного приложения в отдельный пакет. Образец отдельного пакета Я собрал его в моем git repo myapp-poc-ui .

Теперь я пытаюсь получить доступ к этому в моем main application.package.json : 

 "dependencies": {
    "myapp-poc-ui": "git+https://github.com/prabhatmishra33/myapp-poc-ui#master",
    "react": "^16.10.1",
    "react-dom": "^16.10.1",
    "react-scripts": "3.2.0"
  },

Я получаю доступ к экспортированному модулю в моем главном приложении по: 

import React from 'react';
import './App.css';
import { HelloWorld } from "myapp-poc-ui";
import { LazyComponent } from "myapp-poc-ui";

function App() {
  return (
    <div>
      <HelloWorld />
      <LazyComponent />
    </div>
  );
}

export default App;

Проблема: в браузере возникает проблема 

Uncaught SyntaxError: Unexpected token '<'
Uncaught (in promise) ChunkLoadError: Loading chunk 1 failed.

Hello World загружается правильно, но эта проблема возникает при загрузке LazyComponent.

Я предполагаю, что в webpack config file publicPath property что-то не так для myapp-poc-ui

Любое предложение по изменению дизайнаТакже приветствуется.

Заранее спасибо.

1 Ответ

0 голосов
/ 02 ноября 2019

Так вот в чем проблема, когда myapp-poc-ui создает, он создает

  1. Основной входной файл
  2. Остальные все являются чанками

Файл чанка не загружается автоматически при сборке, если приложение не рендерится. Как только приложение рендерится, оно вызывает загрузку файла чанка по сети. Ваше клиентское приложение должно иметь этот файл чанка в общедоступной папке или папке dist, которая является сервером на локальном хосте, оно не может автоматически получить файл чанка, пока мы не скопируем его из модуля узла в общедоступный.

Ваш модуль создал чанкно клиентское приложение не загружает / копирует файл автоматически при создании клиентской сборки, и если мы вызываем файл как часть myapp-poc-ui, то оно не использует цель Lazy-Loading. Поэтому один из способов сделать это - скопировать файл узла в вашу обслуживаемую папку или папку сборки. 

// i am using create-react-app as client and used react-app-rewired to 
// overide cra webpack in config-overrides.js

const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = function override(config, env) {
    //do stuff with the webpack config...
    config.plugins = [
        new CopyWebpackPlugin([
            {
                context: 'node_modules/myapp-poc-ui/dist/',
                from: '*', to: '[name].[ext]',  toType: 'template',
            },
        ]),
        ...config.plugins,
    ];
    console.log(config)
    return config;
}

Happy Coding:)

...