keystonejs / keystone

The superpowered headless CMS for Node.js — built with GraphQL and React
https://keystonejs.com
MIT License
9.22k stars 1.16k forks source link

Uncaught TypeError: Cannot read property 'readViews' of undefined, In List item page #3192

Closed elhakeem closed 4 years ago

elhakeem commented 4 years ago

In Admin Ui single item screen. This error appeared to me.

Screen Shot 2020-06-18 at 8 58 14 PM Screen Shot 2020-06-18 at 8 58 36 PM Screen Shot 2020-06-18 at 8 58 59 PM

dependencies:

{
    "@apollo/react-hooks": "^3.1.3",
    "@keystonejs/adapter-mongoose": "^8.0.1",
    "@keystonejs/apollo-helpers": "^5.0.6",
    "@keystonejs/app-admin-ui": "^5.12.0",
    "@keystonejs/app-graphql": "^5.0.1",
    "@keystonejs/app-next": "^5.0.2",
    "@keystonejs/app-static": "^5.1.2",
    "@keystonejs/auth-password": "^5.0.1",
    "@keystonejs/fields": "^9.0.5",
    "@keystonejs/fields-wysiwyg-tinymce": "^5.2.3",
    "@keystonejs/file-adapters": "^6.0.2",
    "@keystonejs/keystone": "^8.1.4",
    "@zeit/next-css": "^1.0.1",
    "apollo-boost": "^0.4.7",
    "aws-sdk": "^2.615.0",
    "bootstrap": "^4.4.1",
    "connect-mongo": "^3.2.0",
    "cross-env": "^7.0.2",
    "express-session": "^1.17.0",
    "graphql": "^14.6.0",
    "graphql-tag": "^2.10.3",
    "moment": "^2.24.0",
    "mongoose": "^5.9.3",
    "next": "^9.2.1",
    "node-fetch": "^2.6.0",
    "path": "^0.12.7",
    "react": "^16.12.0",
    "react-apollo": "^3.1.5",
    "react-dom": "^16.12.0",
    "react-select": "^3.1.0",
    "recharts": "^1.8.5",
    "styled-components": "^5.1.1",
    "url-join": "^4.0.1"
  }

this happens to all lists that have a field of type Wysiwyg.

App crashed and white screen appeared. terminal error from nextjs once visiting this screen event - build page: /next/dist/pages/_error and this is a warning appeared while starting the server ExperimentalWarning: The fs.promises API is experimental

elhakeem commented 4 years ago

Those are lists config for the the lists have the issue:

{
    fields: {
        title: {type: Text},
        summary: {type: Text, isMultiline: true},
        content: {
            type: Wysiwyg,
            editorConfig: {
                // directionality: 'rtl',
                plugins: [
                    'codesample advlist autolink link image lists',
                    'charmap print preview hr anchor pagebreak spellchecker',
                    'searchreplace wordcount visualblocks visualchars',
                    'code fullscreen insertdatetime media nonbreaking',
                    'table emoticons template paste help directionality'
                ],
                codesample_languages: [
                    {text: 'HTML/XML', value: 'markup'},
                    {text: 'JavaScript', value: 'javascript'},
                    {text: 'CSS', value: 'css'},
                    {text: 'PHP', value: 'php'},
                    {text: 'Ruby', value: 'ruby'},
                    {text: 'Python', value: 'python'},
                    {text: 'Java', value: 'java'},
                    {text: 'C', value: 'c'},
                    {text: 'C#', value: 'csharp'},
                    {text: 'C++', value: 'cpp'}
                ],
                menu: {
                    file: { title: 'File', items: 'newdocument restoredraft | preview | print ' },
                    edit: { title: 'Edit', items: 'undo redo | cut copy paste | selectall | searchreplace' },
                    view: { title: 'View', items: 'code | visualaid visualchars visualblocks | spellchecker | preview fullscreen | ltr rtl' },
                    insert: { title: 'Insert', items: 'image link media template codesample inserttable | charmap emoticons hr | pagebreak nonbreaking anchor toc | insertdatetime' },
                    format: { title: 'Format', items: 'bold italic underline strikethrough superscript subscript codeformat | formats blockformats fontformats fontsizes align | forecolor backcolor | removeformat' },
                    tools: { title: 'Tools', items: 'spellchecker spellcheckerlanguage | code wordcount' },
                    table: { title: 'Table', items: 'inserttable | cell row column | tableprops deletetable' },
                    help: { title: 'Help', items: 'help' }
                },
                toolbar: 'styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent | link image | codesample code | ltr rtl | fullscreen',
                menubar: true
            }
        },
        image: {
            type: File,
            adapter: s3FileAdapter,
            hooks: {
                beforeChange: beforeChangeHook(s3FileAdapter),
            },
        },
        categories: {type: Relationship, ref: 'Category', many: true},
        status: {type: Select, options: 'draft,published', defaultValue: 'draft'},
        author: {type: Relationship, ref: 'User'},
    },
    labelField: 'title',
    adminConfig: {
        defaultColumns: 'summary,author,categories'
    },
    hooks: {
        afterDelete: afterDeleteHook(s3FileAdapter),
    }
}
{
    fields: {
        title: {type: Text},
        content: {
            type: Wysiwyg,
            editorConfig: {
                toolbar: 'styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent | link | ltr rtl | fullscreen',
            }
        },
        code: {
            type: Wysiwyg,
            editorConfig: {
                // directionality: 'rtl',
                plugins: ['codesample code fullscreen'],
                codesample_languages: [
                    {text: 'HTML/XML', value: 'markup'},
                    {text: 'JavaScript', value: 'javascript'},
                    {text: 'CSS', value: 'css'},
                    {text: 'PHP', value: 'php'},
                    {text: 'Ruby', value: 'ruby'},
                    {text: 'Python', value: 'python'},
                    {text: 'Java', value: 'java'},
                    {text: 'C', value: 'c'},
                    {text: 'C#', value: 'csharp'},
                    {text: 'C++', value: 'cpp'}
                ],
                toolbar: 'codesample code | ltr rtl | fullscreen',
            }
        },
        status: {type: Select, options: 'draft,published', defaultValue: 'draft'},
    },
    labelField: 'title',
    adminConfig: {
        defaultColumns: 'content'
    },
    hooks: {
        afterDelete: afterDeleteHook(s3FileAdapter),
    }
}

@timleslie

kareraisu commented 4 years ago

+1 Having the same issue with Wysiwig fields, even without any editorConfig Also happening for:

HailZetta commented 4 years ago

Hope you got the answer for this. I just met the same issue today. I'm using default editor and not sure if any conflict after install @keystonejs/fields-content.

HailZetta commented 4 years ago

I changed from @keystonejs/fields-wysiwyg-tinymce@5.3.0 to @keystonejs/fields-wysiwyg-tinymce@5.2.5 and it worked.

elhakeem commented 4 years ago

Thank you @HailZetta the version I had was @keystonejs/fields-wysiwyg-tinymce@5.2.3 I upgraded to 5.2.5 and fortunately it worked.