Giters

nbudin / react-blockly

A React component that embeds a Blockly visual programming editor.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

SyntaxError: Cannot use import statement outside a module

mudkipdev opened this issue · comments

commented

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)

commented

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!

commented

No it doesn't, i have the same issue

commented

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

commented

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!

commented

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

commented

@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