[Question] maelstrom::components.media_manager issues

[cameronluke]

I am having issues with the media manager component (maelstrom::components.media_manager) when using to import media to a post.

The media manager works, in that it lets me select the image, though once I select the image the field disappears from the page, doesn't fill the selected image into the form data and returns the below errors in the JS Console:

maelstrom.js:288810 Warning: React.createElement: 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.

Check the render method of `MediaManager`.
    in MediaManager
printWarning @ maelstrom.js:288810

Uncaught 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.

Check the render method of `MediaManager`.
    at createFiberFromTypeAndProps (maelstrom.js:279862)
    at createFiberFromElement (maelstrom.js:279885)
    at createChild (maelstrom.js:269525)
    at reconcileChildrenArray (maelstrom.js:269797)
    at reconcileChildFibers (maelstrom.js:270202)
    at reconcileChildren (maelstrom.js:272666)
    at updateFragment (maelstrom.js:272874)
    at beginWork (maelstrom.js:274546)
    at HTMLUnknownElement.callCallback (maelstrom.js:256085)
    at Object.invokeGuardedCallbackDev (maelstrom.js:256134)

The above error occurred in one of your React components:
    in span (created by Context.Consumer)
    in div (created by Context.Consumer)
    in div (created by Context.Consumer)
    in Col (created by Context.Consumer)
    in div (created by Context.Consumer)
    in Row (created by Context.Consumer)
    in FormItem (created by MediaManager)
    in MediaManager

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
logCapturedError @ maelstrom.js:275424

Uncaught 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.

Check the render method of `MediaManager`.
    at createFiberFromTypeAndProps (maelstrom.js:279862)
    at createFiberFromElement (maelstrom.js:279885)
    at createChild (maelstrom.js:269525)
    at reconcileChildrenArray (maelstrom.js:269797)
    at reconcileChildFibers (maelstrom.js:270202)
    at reconcileChildren (maelstrom.js:272666)
    at updateFragment (maelstrom.js:272874)
    at beginWork (maelstrom.js:274546)
    at HTMLUnknownElement.callCallback (maelstrom.js:256085)
    at Object.invokeGuardedCallbackDev (maelstrom.js:256134)

I have attempted re-running npm run dev and I have run npm run prod to try regenerating the maelstrom.js file which didn't work. I did kinda resolve the issue by grabbing the maelstrom.js file from your demo site and that seemed to fix the issue, though I would prefer that the issue is fixed when running npm run dev/prod.

webpack.mix.js is:

const mix = require('laravel-mix');

mix.react('resources/js/maelstrom.js', 'public/js');
//mix.react('resources/js/app.js', 'public/js');

if (mix.inProduction()) {
    mix.version();
}

mix.postCss('resources/sass/maelstrom.css', 'public/css', [
    require('postcss-import'),
    require('tailwindcss'),
]);

mix.webpackConfig({
    module: {
        rules: [require('@maelstrom-cms/toolkit/js/support/DontIgnoreMaelstrom')()],
    },
});

package.json is:

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "@babel/preset-react": "^7.0.0",
        "@maelstrom-cms/toolkit": "^1.0.42",
        "axios": "^0.19",
        "bootstrap": "^4.0.0",
        "cross-env": "^7.0.2",
        "eslint": "^7.3.1",
        "jquery": "^3.2",
        "laravel-mix": "^5.0.1",
        "lodash": "^4.17.13",
        "popper.js": "^1.12",
        "react": "^16.2.0",
        "react-dom": "^16.2.0",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.20.1",
        "sass-loader": "^8.0.0"
    },
    "dependencies": {
        "antd": "^4.4.0",
        "tailwindcss": "^1.4.6"
    }

I don't know if this has been caused by something that has been implemented wrong on my end and I'm pulling an old file or if there is some other issue causing me to have a version of maelstrom.js that doesn't work.

I look forward to your help.

Thanks Cam

[OwenMelbz]

Hi,

Sorry I’ve only just seen this.

Could you try updating the version of react you’re using please? Maybe to 16.8 from 16.2 just incase?

Thanks

[cameronluke]

Hi Owen,

Apologies for the delayed response. I didn't get around to updating react. Though I have just re-ran the npm run dev and it appears that its working as expected again.

Thanks for your suggestion though. It is a very strange issue/bug.

[cameronluke]

Hi Owen, I apologise, I spoke to soon. It appears I was just loading a cached file that was allowing it to work. I have updated my package.json to be react >= 16.8.x and I am still encountering issues with the mediaManager.

I have included the JS console again:

Warning: React.createElement: 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.

Check the render method of `MediaManager`.
    in MediaManager

Line: maelstrom.js:288810

Uncaught 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.

Check the render method of `MediaManager`.
    at createFiberFromTypeAndProps (maelstrom.js:279862)
    at createFiberFromElement (maelstrom.js:279885)
    at createChild (maelstrom.js:269525)
    at reconcileChildrenArray (maelstrom.js:269797)
    at reconcileChildFibers (maelstrom.js:270202)
    at reconcileChildren (maelstrom.js:272666)
    at updateFragment (maelstrom.js:272874)
    at beginWork (maelstrom.js:274546)
    at HTMLUnknownElement.callCallback (maelstrom.js:256085)
    at Object.invokeGuardedCallbackDev (maelstrom.js:256134)

Line: maelstrom.js:279862

The above error occurred in one of your React components:
    in span (created by Context.Consumer)
    in div (created by Context.Consumer)
    in div (created by Context.Consumer)
    in Col (created by Context.Consumer)
    in div (created by Context.Consumer)
    in Row (created by Context.Consumer)
    in FormItem (created by MediaManager)
    in MediaManager

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
logCapturedError @ maelstrom.js:275424

Line: maelstrom.js:275424

Uncaught 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.

Check the render method of `MediaManager`.
    at createFiberFromTypeAndProps (maelstrom.js:279862)
    at createFiberFromElement (maelstrom.js:279885)
    at createChild (maelstrom.js:269525)
    at reconcileChildrenArray (maelstrom.js:269797)
    at reconcileChildFibers (maelstrom.js:270202)
    at reconcileChildren (maelstrom.js:272666)
    at updateFragment (maelstrom.js:272874)
    at beginWork (maelstrom.js:274546)
    at HTMLUnknownElement.callCallback (maelstrom.js:256085)
    at Object.invokeGuardedCallbackDev (maelstrom.js:256134)

Line: maelstrom.js:266999

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
    in MediaManager

Line: maelstrom.js:255985

Please let me know if you require further detail.

[OwenMelbz]

Is there anyway you can give me access to the repo so i can take a look?

[cameronluke]

@OwenMelbz I've added you in. I'm currently working off the cms-improvements branch.

I am currently using the compiled maelstrom.js from your demo so you would need to re-rerun npm run dev

Also the repo I invited you to is a clone, so you won't break anything in there.

[OwenMelbz]

Hi,

I've not received any notifications or appearing in my GitHub repos, could you send the direct link to it please?

Thanks

[cameronluke]

https://github.com/cameronluke/vhrc

[OwenMelbz]

Hi,

I've found where the problem lays, tomorrow I'll try find a work around for it.

It seems to be an external dependency has changed which has broken the integration with react-sortable-hoc. I'm unable to find exactly which package it is that has caused it, however I can change the internal method used by Maelstrom to bypass the issue.

I can work on this tomorrow and release a new version 👍

[cameronluke]

Awesome. Thanks Owen, appreciate your help and looking forward to the fix.

[OwenMelbz]

Hi, If you make sure you're project is using at least 1.0.43 of @maelstrom-cms/toolkit then hopefully the issue should be gone.

Still not 100% sure why it happened on your project, it looks to me to be something related to the version of babel/class properties that's installed isn't working as it used to, so I've changed the code so it doesn't need to use it which solves the issue.