спасибо ребят
пойду попробую сбилдить на дев сервере

хороший день 😊

цензурного выражения на счет сегодняшнего дня у меня нет)

на сервере фокус не удался
думаю уже грешным делом скопипастить dist

код одинаковый, конфиги такие, как сюда кидали, все вроде нормально

а из файлов там только вот

Привет, подскажите пожалуйста, а как вынести импорты, которые не являются компонентами, в отдельный чанк?
Например bugsnag или библиотеку асинхронного шифрования, которые переиспользуются во многих местах?


https://github.com/zeit/next.js/tree/canary/examples/with-dynamic-import — отлично для компонент.
Но как сказать вебпаку что надо создать отдельный чанк для библиотеки?

мне не нужно асинхронно их подкгружать, просто выгрузить в отдельный чанк.

что бы в модулях не дублировались

волшебными комментариями?

была мысль сделать что то вроде

const bugsnag = import(/* webpackChunkName: "reporter" */ '@bugsnag/js');
const bugsnagReact = import(/* webpackChunkName: "reporter" */ '@bugsnag/plugin-react');

но оно вернет промис

const bugsnag = import(/* webpackChunkName: "reporter" */ '@bugsnag/js');
const bugsnagReact = import(/* webpackChunkName: "reporter" */ '@bugsnag/plugin-react');

import().then
обычный dynamic import

const { default: _ } = await import(/* webpackChunkName: "lodash" */ 'lodash');

_.join(['Hello', 'webpack'], ' ');

так я же говорю: промис это проблема.
так как top level await в далеком будущем и например если это нужно для изоморфного рендера — может быть невозможно реально подождать пока оно будет доступно

в чем проблема?

я не понимаю

что будет доступно? если уже доступно

пример:
модуль 1:

import React from 'react';

import { BUGSNAG_API_KEY, BUGSNAG_RELEASE_STAGE } from 'constants/env';
let bugsnagClient;

(async () => {
  const bugsnag = await import(/* webpackChunkName: "reporter" */ '@bugsnag/js');
  const bugsnagReact = await import(/* webpackChunkName: "reporter" */ '@bugsnag/plugin-react');

  if (process.env.NODE_ENV !== 'test') {
    bugsnagClient = bugsnag({
      apiKey: BUGSNAG_API_KEY,
      releaseStage: BUGSNAG_RELEASE_STAGE,
      notifyReleaseStages: ['production'],
    });

    bugsnagClient.use(bugsnagReact, React);
  }
})();

export default bugsnagClient;

модуль 2:

import bugsnagClient from 'utils/bugsnag';
const ErrorBoundary = bugsnagClient.getPlugin('react');
export default const App = props => (<ErrorBoundary>…</ErrorBoundary>);

Ивсё сломалось.
Рендер реакт компонента не может быть отложенным, так что никакого await тут не добавишь.

Вопрос про динамическую подгрузку контента.
Допустим у меня есть куки полиси для множества языков.
Сами документы — просто маркдаун.
Что бы не инклудить все md в бандл я использовал динамическую подгрузка вот так:

import React from 'react';
import { LOCALE } from 'constants/env';
import { LegalPage } from 'components/templates';

const LegalPageWithData = ({ content }) => (
  <LegalPage content={content} activePage="cookiePolicy" />
);

LegalPageWithData.getInitialProps = async function() {
  const content = await import(
    /* webpackChunkName: "cookiePolicy" */ `content/${LOCALE}/cookiePolicy.md`
  );
  return { content };
}
export default LegalPageWithData;

Неприятность при таком подходе заключается в том, что весь md файл будет вшит в html — это то именно тот способ, которым next передает данные с сервера на клиент в getInitialProps. А это прилично, килобайт 30.

Положить подгрузку в useEffect например я не могу так как оно не грузится на сервере.

Как это положено делать по уму?

В конечном итоге я, вероятно, просто сгенерирую из этого статику, но меня интересует принцип.
Как решают такие задачи?