Unexpected token '?' when going to specific page.

[nsoubelet]

I am seeing this really strange behavior, basically If I move to certain page using next's route.push it renders w/o problem. However, if I go to the page directly by typing the URL, I get the following:

error - .../node_modules/flowbite-react/lib/cjs/components/Card/index.js:15
    return ((0, jsx_runtime_1.jsxs)(Component, { className: (0, classnames_1.default)(theme.base, theme.horizontal[horizontal ? 'on' : 'off'], href && theme.href), "data-testid": "flowbite-card", href: href, ...theirProps, children: [imgSrc && ((0, jsx_runtime_1.jsx)("img", { alt: imgAlt ?? '', className: (0, classnames_1.default)(theme.img.base, theme.img.horizontal[horizontal ? 'on' : 'off']), src: imgSrc })), (0, jsx_runtime_1.jsx)("div", { className: theme.children, children: children })] }));

With this stack:

SyntaxError: Unexpected token '?'
    at wrapSafe (internal/modules/cjs/loader.js:915:16)
    at Module._compile (internal/modules/cjs/loader.js:963:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (.../node_modules/flowbite-react/lib/cjs/components/index.js:23:14)
    at Module._compile (internal/modules/cjs/loader.js:999:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)

Important: the component I'm trying to render uses Spinner. Important 2: the next's page component is doing nothing but returning the other component that imports Spinner.

• OS: Ubuntu 18.04
• Browser: Tested in Chrome/Opera/FF
• Version: Latest in all cases

Dependencies' version:

    "@headlessui/react": "^1.6.6",
    "@heroicons/react": "^2.0.10",
    "flowbite": "^1.5.3",
    "flowbite-react": "^0.1.11",
    "next": "12.3.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-inlinesvg": "^3.0.1",
    "react-range": "^1.8.14",
    "react-select": "^5.4.0",
    "swr": "1.3.0",
    "underscore.string": "^3.3.6",

At this point I am not quite sure whether it is a Next's or flowbite-react's problem, however I think it's the latter because at some point the stacktrace mentions at Object.<anonymous> (.../node_modules/flowbite-react/lib/cjs/components/index.js:23:14)

Anyone else saw this before? Thanks guys

[nsoubelet]

Just wanted to add that I confirmed that problem is Spinner. If I remove it completely, then it starts to work correctly...

But, most interesting part. The following page:

import ComponentWithSpinner from "../blah/ComponentWithSpinner"

function SomePage() {

    return (
        <div>hi</div>
    )
}

export default SomePage

... fails even though the imported component is not being used (makes sense at some point). When removing the Spinner import sentence from ComponentWithSpinner, it renders ok.

Conclusion: there is something in the Spinner that fails in specific conditions.

[nsoubelet]

More stuff -- The same happens when using, for example, DropDown component and entering URL manually.

I see always the same problematic file at the same line: /node_modules/flowbite-react/lib/cjs/components/Card/index.js:15

Maybe it's me doing something wrong, but it only happened with flowbite-react components so far...

[rluders]

@nsoubelet could you please provide some code sample to reproduce the issue?

[rluders]

I tried to reproduce the issue using the flowbite-next-starter but I didn't find anything wrong. So, I'm closing it.