Vexflow: Error "Cannot use import statement outside a module" using VexFlow with Next.js (React) + Typescript

[MaxPowerReforged]

Hi everyone! I am very thankful for this library, what an amazing project. I am trying to build a small app using Next.js (target is static build), but I cannot get Vex working, I get the following error:

import { Vex } from './vex';
^^^^^

SyntaxError: Cannot use import statement outside a module

I have seen some posts about getting Vex running with React or Vue, but maybe the Next compliation is messing up some module configuration.
I am using latest Next.js with Typescript.

Thanks a lot!!

[sschmidTU]

It sounds like the import is the problem, not Vexflow. Can you import anything else in that file?
As the error message says, you cannot use imports outside a module (in a simple script file).
You could try setting "type": "module" in the package.json.
Or just try require instead of import:
const Vex = require("./vex.js");

[MaxPowerReforged]

Yes, that was my first thought, l tried "require" and "type": "module" in the package.json, both failed.
The import error statement seems to come from the Vex package itself, not my import of it (I am importing multiple .ts and .tsx without further problems). I'll paste a longer error message later :)

[MaxPowerReforged]

This is a more complete error message (sorry for the lenght):

<directory path>\node_modules\vexflow\src\index.js:3
import { Vex } from './vex';
^^^^^

SyntaxError: Cannot use import statement outside a module
   at wrapSafe (internal/modules/cjs/loader.js:931:16)
    at Module._compile (internal/modules/cjs/loader.js:979:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1035:10)
    at Module.load (internal/modules/cjs/loader.js:879:32)
    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
    at Module.require (internal/modules/cjs/loader.js:903:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.vexflow (<local directory path>\.next\server\pages\index.js:318:18)
    at __webpack_require__ (<local directory path>\.next\server\pages\index.js:23:31)
    at Module../components/scoreContainer.tsx (<local directory path>\.next\server\pages\index.js:206:13)
    at __webpack_require__ (<local directory path>\.next\server\pages\index.js:23:31)
    at Module../pages/index.tsx (<local directory path>\.next\server\pages\index.js:246:84)
    at __webpack_require__ (<local directory path>\.next\server\pages\index.js:23:31)
    at <local directory path>\.next\server\pages\index.js:91:18
    at Object.<anonymous> (<local directory path>\.next\server\pages\index.js:94:10)
    at Module._compile (internal/modules/cjs/loader.js:1015:30)

This leads me to think that is more related to Webpack compiling. I lack the experience/knowledge to fully understand the complete error message above :D, so I might be missreading the situation.

[sschmidTU]

That message doesn't tell us a lot though.
Have you tried making a class out of your js file? export class MyClass { } etc.
Don't know if that's possible with Next.js, but in general, you can't use these imports in script files without classes in javascript/typescript, as i said, and as the error message says.
Without a class maybe require would be a solution, you said it didn't work, but what's the error message? Did you write the require statement correctly? Is the vexflow build in the same folder (./) and did you write the name correctly?

[MaxPowerReforged]

Using 'require' as so gives same error:

const Vex = require('vexflow');

Yes, I am importing it in a class file:

import React, { Component } from 'react';
import Vex from 'vexflow';

export class ScoreContainer extends Component {
  componentDidMount() {
    const VF = Vex.Flow;
  }

  render() {
    return <div id="scoreContainer"></div>;
  }
}

Next.js gives a similar error:

Server Error
SyntaxError: Cannot use import statement outside a module

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source
external%20%22vexflow%22 (1:0) @ Object.vexflow

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

[sschmidTU]

Hmm, i think i'm stumped here, maybe someone with more JS/React/Next.js experience can help?

[0xfe]

Next.js doesn't know the target for the code (server vs. browser). Try
this: https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr

Mo.

On Mon, Jan 25, 2021 at 3:50 PM Simon [e-mail] wrote:

Hmm, i think i'm stumped here, maybe someone with more JS/React/Next.js
experience can help?

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/0xfe/vexflow/issues/833#issuecomment-767104200, or
unsubscribe
https://github.com/notifications/unsubscribe-auth/AAB25E6MSBUBF7EXYVAUGTTS3XKSXANCNFSM4WOMKB2A
.

--
Mohit Muthanna [mohit (at) muthanna (uhuh) com]

[MaxPowerReforged]

Hi! It is working now! :D
I used import statement inside the component as before (import Vex from 'vexflow').
Then, in my parent component, I imported the vexflow wrapper component using dynamic import without SSR as 0xfe suggested, works properly now.
Many thanks to both of you for your help, and specially for the library creator for such a wonderful work :D