Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

SyntaxError: Cannot use import statement outside a module

See original GitHub issue

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

<unknown> 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)

Issue Analytics

State:
Created a year ago
Reactions:1
Comments:6 (2 by maintainers)

Top GitHub Comments

2reactions

nbudincommented, May 29, 2022

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!

1reaction

Entkenntniscommented, Jul 19, 2022

@loicfrnt My final solution was to ignore react-blockly and inject blockly directly. I have reused code that was relevat 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-web/blob/main/components/BlockEditor.tsx

no problems with building and export in next.js