Блог

Я работаю над приложением для потокового видео в Next/React.JS . Он извлекает данные из безголовой CMS Drupal Contenta. Он отлично работает на localhost, но когда я пытаюсь экспортировать его для создания статического интерфейса, он выдает следующую ошибку.

 Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
    at a.b.render (<path to project directory> /node_modules/react-dom/cjs/react-dom-server.node.production.min.js:48:37)
    at a.b.read (<path to project directory>/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:44:18)
    at renderToString (<path to project directory>/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:54:364)
    at Object.renderPage (<path to project directory>/node_modules/next/dist/next-server/server/render.js:50:851)
    at Function.getInitialProps (<path to project directory>/.next/server/pages/_document.js:324:19)
    at Function.getInitialProps (<path to project directory>/.next/server/pages/_document.js:135:85)
    at loadGetInitialProps (<path to project directory>/node_modules/next/dist/next-server/lib/utils.js:5:101)
    at renderToHTML (<path to project directory>/node_modules/next/dist/next-server/server/render.js:50:1142)
    at processTicksAndRejections (internal/process/task_queues.js:94:5)
 

Ниже приведен список зависимостей в package.json

 {
    "dependencies": {
      "@babel/core": "^7.12.3",
      "@babel/polyfill": "^7.6.0",
      "@material-ui/lab": "^4.0.0-alpha.56",
      "@sajari/sdk-react": "^2.9.0",
      "axios": "^0.19.0",
      "babel-loader": "^8.2.1",
      "body-parser": "^1.19.0",
      "cacheable-response": "^1.8.0",
      "classnames": "^2.2.6",
      "compression": "^1.7.4",
      "date-fns": "^2.6.0",
      "dotenv": "^8.2.0",
      "express": "^4.17.1",
      "express-state": "^2.0.0",
      "hamburgers": "^1.1.3",
      "helmet": "^3.21.2",
      "html-react-parser": "^0.9.1",
      "mobile-detect": "^1.4.4",
      "moment": "^2.27.0",
      "moment-locales-webpack-plugin": "^1.2.0",
      "next": "^9.5.0",
      "next-page-transitions": "^1.0.0-beta.2",
      "next-seo": "^3.2.0",
      "normalize.css": "^8.0.1",
      "nprogress": "^0.2.0",
      "oauth-1.0a": "^2.2.6",
      "path": "^0.12.7",
      "query-string": "^6.13.1",
      "rc-slider": "^9.3.1",
      "react": "^16.11.0",
      "react-autosuggest": "^10.0.2",
      "react-cookie-consent": "^2.5.0",
      "react-dom": "^16.11.0",
      "react-dropout": "^0.3.0",
      "react-ga": "^2.7.0",
      "react-google-recaptcha": "^2.1.0",
      "react-gtm-module": "^2.0.8",
      "react-modal": "^3.11.1",
      "react-overflow": "^0.2.1",
      "react-player": "^1.13.0",
      "react-popper": "^1.3.4",
      "react-priority-navigation": "^1.0.2",
      "react-scrollspy": "^3.4.0",
      "react-slick": "^0.25.2",
      "react-text-truncate": "^0.15.0",
      "react-transition-group": "^4.3.0",
      "request": "^2.88.0",
      "sumo-logger": "^2.5.5",
      "universal-cookie": "^4.0.2",
      "zenscroll": "^4.0.2"
    },
    "devDependencies": {
      "@svgr/webpack": "^4.3.3",
      "@zeit/next-bundle-analyzer": "^0.1.2",
      "autoprefixer": "^9.7.0",
      "babel-eslint": "^10.0.3",
      "babel-plugin-module-resolver": "^3.2.0",
      "babel-plugin-wrap-in-js": "^1.1.1",
      "better-docs": "^1.3.3",
      "css-mqpacker": "^7.0.0",
      "cssnano": "^4.1.10",
      "eslint": "^6.6.0",
      "eslint-config-prettier": "^6.11.0",
      "eslint-config-react": "^1.1.7",
      "eslint-plugin-flowtype": "3.13.0",
      "eslint-plugin-import": "^2.18.2",
      "eslint-plugin-jsx-a11y": "^6.2.3",
      "eslint-plugin-prettier": "^3.1.4",
      "eslint-plugin-react": "^7.16.0",
      "eslint-plugin-react-hooks": "1.7.0",
      "file-loader": "^6.0.0",
      "jsdoc": "^3.6.3",
      "module-alias": "^2.2.2",
      "next-transpile-modules": "^2.3.1",
      "node-sass": "^4.13.0",
      "nodemon": "^2.0.4",
      "postcss-easy-import": "^3.0.0",
      "postcss-flexbugs-fixes": "^4.2.1",
      "postcss-preset-env": "^6.7.0",
      "prettier": "^2.0.5",
      "prop-types": "^15.7.2",
      "url-loader": "^4.1.0",
      "webpack": "^4.41.2"
    }
  }
 

Ниже приведен код для пользовательских _document.js

 const Config = require('../config');
import React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';

class customDocument extends Document {
    static async getInitialProps(ctx) {
        const initialProps = await Document.getInitialProps(ctx);
        return { ...initialProps };
    }

    render() {
    
        return (
            <Html>
                <Head />
                <body>
                    <Main />
                    <NextScript />
                    
                </body>
            </Html>
        );
    }
}

export default customDocument;

 

Ниже приведен Config.js код —

 const Config = {
    apiUrl: 'Drupal Backend CMS',
    siteUrl: 'Site URL',
    debug: true,
    transpileInDev: false, // set this to 'true' if you need to work in IE in development mode
    sessionPrefix: 'Admin Mode',
    siteRegion: 'Default Region',
};

module.exports = Config;
 

Не уверен, в чем здесь проблема. Я попробовал следующие действия —

1. Я где-то читал, что есть проблема с более новой версией пакета next-seo. Я удалил его, но не работает.
2. Пытался изменить операторы импорта и закомментировал части пользовательских _document.js Но, похоже, ничего не работает.

Любые идеи / помощь будут с благодарностью.

Спасибо!