Comments (9)
@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.
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.
works with createUseMachine
from robot-hooks
:
https://codesandbox.io/s/cool-currying-y3w6s?file=/pages/index.tsx:111-158
from robot.
looks similar to: matthewp/robot-hooks#12
from robot.
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.
What is the best workaround for this?
from robot.
Moving to the main repo. Still open to having a CJS build as some of the others do.
from robot.
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.
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)
- [Question] Using the returned objects in place of the function calls HOT 2
- A library to visualise Robot3 state machines HOT 1
- `onChange` not called for `immediate` states HOT 3
- Allow `action()`s to send events back to the fsm HOT 2
- invoke dynamic child machines HOT 5
- **CRITICAL BUG** Interpret reference HOT 5
- Bring integrations into the main repo
- Get CI setup
- Automate release process
- The machine's current state is not updated when send is triggered HOT 1
- Feature request: Official qwik integration
- TypeError: Cannot read properties of undefined (reading 'default') HOT 4
- Method to check if transition is traversable
- [Question] How to update context while running invoke HOT 1
- How to start and await for a state machine's asynchronous execution? HOT 2
- Package path ./debug is not exported from package
- `immediate` with no transition?
- Not understanding how to use the API HOT 2
- Integration with Lit = integration with lit-based web components?
- [bug] Invoke should fire transitions only within its state
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from robot.