react-robot: Problem with es modules with next.js

[Drapegnik]

/sandbox/node_modules/react-robot/machine.js:1
import { useEffect, useState } from 'react';
       ^

SyntaxError: Unexpected token {

https://codesandbox.io/s/recursing-breeze-n34wd?file=/pages/index.js

[Drapegnik]

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'
}

[Drapegnik]

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

[Drapegnik]

looks similar to: matthewp/robot-hooks#12

[matthewp]

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.

[resusio]

What is the best workaround for this?

[Drapegnik]

@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);

[matthewp]

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

[lveillard]

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?

[lveillard]

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.

[ehuelsmann]

@lveillard , @resusio : rather than work around the issue in your own code, please provide a PR to our project to fix the root cause: having a CJS build.

[matthewp]

Is this still a problem for people? We switched over to using "type": "module" some time ago which should have fixed it. Also this example seems to work as I would expect: https://stackblitz.com/edit/nextjs-ktyj7z3g?file=package.json,app%2Fpage.tsx