Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

SyntaxError: Cannot use import statement outside a module #71

Open
mudkipdev opened this issue May 27, 2022 · 7 comments
Open

SyntaxError: Cannot use import statement outside a module #71

mudkipdev opened this issue May 27, 2022 · 7 comments

Comments

@mudkipdev
Copy link

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
Copy link
Owner

nbudin commented 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!

@mmv-dev
Copy link

mmv-dev commented Jun 9, 2022

No it doesn't, i have the same issue

@Entkenntnis
Copy link

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
Copy link
Owner

nbudin commented Jun 17, 2022

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
Copy link

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
Copy link

Entkenntnis commented Jul 19, 2022 •
edited
Loading

@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

@Entkenntnis Entkenntnis mentioned this issue Jun 18, 2023
Closed
@open-abbott
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@nbudin @open-abbott @Entkenntnis @loicfrnt @mmv-dev @mudkipdev