Git Product home page Git Product logo

Comments (9)

Drapegnik avatar Drapegnik commented on September 18, 2024 1

@resusio, as a temporary solution I use robot-hooks:

import { useEffect, useState } from 'react';
import { createUseMachine } from 'robot-hooks';
export const useMachine = createUseMachine(useEffect, useState);

from robot.

Drapegnik avatar Drapegnik commented on September 18, 2024
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /node_modules/react-robot/machine.js
require() of ES modules is not supported.
require() of /node_modules/react-robot/machine.js from /.next/server/pages/temp.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename machine.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /node_modules/react-robot/package.json.

    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1080:13)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at eval (webpack-internal:///react-robot:1:18)
    at Object.react-robot (.next/server/pages/temp.js:587:1)
    at __webpack_require__ (.next/server/pages/temp.js:23:31)
    at eval (webpack-internal:///./lib/fsm/index.ts:12:69)
    at Module../lib/fsm/index.ts (.next/server/pages/temp.js:187:1) {
  code: 'ERR_REQUIRE_ESM'
}

from robot.

Drapegnik avatar Drapegnik commented on September 18, 2024

works with createUseMachine from robot-hooks:
https://codesandbox.io/s/cool-currying-y3w6s?file=/pages/index.tsx:111-158

from robot.

Drapegnik avatar Drapegnik commented on September 18, 2024

looks similar to: matthewp/robot-hooks#12

from robot.

matthewp avatar matthewp commented on September 18, 2024

robot-hooks has a CommonJS build and this does not (don't remember why). Should just port the build stuff over to here and have a CJS version.

from robot.

resusio avatar resusio commented on September 18, 2024

What is the best workaround for this?

from robot.

matthewp avatar matthewp commented on September 18, 2024

Moving to the main repo. Still open to having a CJS build as some of the others do.

from robot.

lveillard avatar lveillard commented on September 18, 2024

Hello! having a similar issue. We use robot3 in our open source ORM (https://github.com/Blitzapps/blitz-orm)
Import works here, but when building and distributing this orm, the import in a nextjs environment throws this error:

import { transition, reduce, createMachine, invoke, guard, state, interpret } from 'robot3';
                    ^^^^^^^^^^^^^
SyntaxError: Named export 'createMachine' not found. The requested module 'robot3' is a CommonJS module, which may not support all module.exports as named exports.

So it works locally for this package but not when exporting this package into other ones.

The problem is that being used in an intermediary pkg i'm not able to exchange it by its hook version. Also it is used in the api-route side of nextjs so it would make no sense to use hooks

Any idea on another workaround?

from robot.

lveillard avatar lveillard commented on September 18, 2024

As an ugly workaround I just copied machine.js into a .ts file inside my project and ignored the types. This way nextjs is ok with the imports. Tried lots of alternatives without success.

from robot.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.