SyntaxError: Cannot use import statement outside a module

mudkipdev commented 2 years ago

Whenever I import BlocklyWorkspace I get an error saying "SyntaxError: Cannot use import statement outside a module". I am using Next.js with create-next-app.

My code:

import styles from '../styles/Home.module.css'
import Head from 'next/head'
import Image from 'next/image'
import Script from 'next/script'
import React, { useState } from 'react';

import { BlocklyWorkspace } from 'react-blockly';

function BlocklyEditor() {
    const [xml, setXml] = useState();

    return (
        <BlocklyWorkspace
            className="width-100"
            toolboxConfiguration={MY_TOOLBOX}
            initialXml={xml}
            onXmlChange={setXml}
        />
    )
}
export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Studio</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className={styles.main}>
        <h1>Studio</h1>
        <BlocklyEditor/>
      </main>
    </div>
  )
}

Call Stack

file:///Users/vadim/Documents/studio/node_modules/react-blockly/dist/index.js (1) wrapSafe internal/modules/cjs/loader.js (988:16) Module._compile internal/modules/cjs/loader.js (1036:27) Object.Module._extensions..js internal/modules/cjs/loader.js (1101:10) Module.load internal/modules/cjs/loader.js (937:32) Function.Module._load internal/modules/cjs/loader.js (778:12) Module.require internal/modules/cjs/loader.js (961:19) require internal/modules/cjs/helpers.js (92:18) Object.react-blockly file:///Users/vadim/Documents/studio/.next/server/pages/index.js (174:18) __webpack_require__ file:///Users/vadim/Documents/studio/.next/server/webpack-runtime.js (33:42) eval webpack-internal:///./pages/index.js (17:71)

nbudin commented 2 years ago

Hi @mudkipdev, could you try using the alpha release of react-blockly instead? 7.0.0-alpha.2 is the latest right now, and it's got a substantially different build system from the 6.x series. It may fix your problem - please let me know if it does!

mmv-dev commented 2 years ago

No it doesn't, i have the same issue

Entkenntnis commented 2 years ago

I have found a solution: As the library is only rendered on the client, you can disable server-side-rendering with next.js dynamic import:

const BlocklyWorkspace = dynamic(
  () => import('react-blockly').then((mod) => mod.BlocklyWorkspace),
  { ssr: false }
)

This works for me on next.js 12

nbudin commented 2 years ago

Aha, that makes sense. I don't know much about Next.js myself (I've never tried using it), but if there's a way for me as a library author to tell Next.js to never try to render this component on the server side, I'd be happy to add that. Thanks @Entkenntnis for figuring out the workaround!

loicfrnt commented 2 years ago

Hey ! Was wondering if anyone has made any more progress on this issue. @Entkenntnis's solution works well, but it fails when trying to build the app (e.g. with npm run build) As well, I wasn't able to adapt it to useBlocklyWorkspace

Entkenntnis commented 2 years ago

@loicfrnt My final solution was to ignore react-blockly and inject blockly directly. I have reused code that was relevant for me and added other stuff that this package is missing (e.g. auto-resize, locale, etc..)

you can take a look at my implementation: https://github.com/Entkenntnis/robot-karol-online/blob/main/components/ide/BlockEditor.tsx

no problems with building and export in next.js

Edit: updated file url

open-abbott commented 1 month ago

A year after this issue has been closed, but just in case anyone else comes looking -- this is specifically a problem operating under Next.js. The easiest solution to this problem is to add react-blockly to transpilePackages in your next.config.js (or wherever you configure Next.js.

nbudin / react-blockly

SyntaxError: Cannot use import statement outside a module #71

Call Stack