SyntaxError: Cannot use import statement outside a module

[Marten Mooij]

Hello John,

I'm wanting to try allotment in a new React project but I'm getting the following:

SyntaxError: Cannot use import statement outside a module

At:

allotment (1:0) @ eval

> 1 | module.exports = require("allotment");

Any idea how to solve this issue?

Kind regards,
Marten Mooij

[Marten Mooij]

May be worth mentioning I'm also using NextJS.

[John Walley]

Thanks for the feedback @mooijtech.

I have a few NextJS projects I maintain so I'll try to reproduce this error there. If I can reproduce it I'll fix it and publish a new version. If I can't I'll get back to you for some more details.

[Marten Mooij]

Alright, thank you I appreciate it!

[John Walley]

Looks like a reproduction!

I'll have a quick look now for anything obviously wrong I'm doing. Otherwise, I'd hope to get a fix out early next week.

I suspect it's something to do with the server-side generation/rendering in NextJS and the bundle Allotment exports (probably only works in a browser).

[John Walley]

NextJS document a workaround. I can get this to work in my test project. Hopefully this is good enough. I'm reluctant to make the library work outside a browser as it is very much about measuring the size of HTML elements and interacting with browser APIs.

You will also need to import the bundled css that comes with allotment.

import "allotment/dist/style.css";

I will add both these points to the documentation. Apologies for the struggles getting started. You're the first user and I appreciate the feedback. Let me know how you get on.

[Marten Mooij]

Hey John,

Sorry for my late reply.
What's the syntax you are using for the workaround?
The following doesn't seem to work for me:

import dynamic from "next/dynamic"

const Allotment = dynamic(
    () => import("allotment"),
    { ssr: false }
)

The error:

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 `ForwardRef(LoadableComponent)`.

[Marten Mooij]

Got it to work using:

const Allotment = dynamic(() => import("allotment").then(mod => mod.Allotment), { ssr: false });

[Marten Mooij]

Might be a good idea to add that code to the FAQ, the referenced documentation doesn't contain .then(mod => mod.Allotment) which is required to make it work as far as I can see.

Thanks for your help!

[John Walley]

Good point. I tend to import the problematic component in its own file. You can then use the dynamic import on that local file. But your way avoids the extra file. I'll have a go at explaining all this in the README. Thanks again for you help.