bluebill1049 / little-state-machine-dev-tools Goto Github PK

Hello,

I use LSM in Next.js and the DevTool component doesn't seem to work correctly.

Here is a sandbox: https://codesandbox.io/s/bug-next-littlestatemachine-f4cwq

The sandbox is working online, but when I download it and make yarn and yarn dev, you will normally see the problem.

The error log is

/Users/pom/Downloads/f4cwq/node_modules/little-state-machine-devtools/dist/index.js:1
import * as React from 'react';
       ^

SyntaxError: Unexpected token *
    at Module._compile (internal/modules/cjs/loader.js:723:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (/Users/pom/Downloads/f4cwq/node_modules/little-state-machine-devtools/index.js:6:20)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.little-state-machine-devtools (/Users/pom/Downloads/f4cwq/.next/server/static/development/pages/_app.js:1544:18)
/Users/pom/Downloads/f4cwq/node_modules/little-state-machine-devtools/dist/index.js:1

This is a server side routing problem only, because if I comment the lines mentionning DevTool in the _app.js file and uncomment them, the DevTool will eventually work, but it will fail again at the next hard refresh causing a server side refresh.

So, I don't know why in server side, babel doesn't seem to transpile the import * as React in ES5 syntax of the DevTool module.

Hi! Enjoying LSM so far - many thanks!

Just an FYI - I can see the state change, but I'm not seeing any actions logged, and the reset button has no effect. I don't think the Save,Load state buttons are working either, but I haven't tested them very thoroughly.

I don't see any related errors in the console.

"little-state-machine-devtools": "^1.0.0",

MacOS Chrome 83, incognito tab, only two extensions active: react devtools and fullpage screencapture

Thanks for your efforts - will chime in if I can see any place to help 🙏

Devtool is not working even in link provided by the package. Clicking actions in form update the localStorage and shown in devtool but not the actions

Also tried locally with same result.

Resetting also doesn't work. The window variable is different

When installing this package, it looks like its peerDependencies look for ittle-state-machine version 3.0.0. Copied from the package.json at its current release (version 2.0.0):

  "peerDependencies": {
    "little-state-machine": "^3.0.0",
    "react": "^16.8.0",
    "react-dom": "^16.8.0"
  },
  "dependencies": {
    "little-state-machine": "^4.0.2",
    "lodash.clonedeep": "^4.5.0",
    "lodash.isempty": "^4.4.0",
    "lodash.isequal": "^4.5.0",
    "lodash.isobject": "^3.0.2",
    "lodash.transform": "^4.6.0",
    "react-json-view": "^1.19.1",
    "react-simple-animate": "^3.3.0"
  }

So if a user only have little-state-machine 4.0.2, trying to do an install (npm install little-state-machine-devtools --save-dev) will throw an error, asking the user to either fix the upstream dependency conflict, or use --force to accept the broken dependency resolution:

npm ERR! Could not resolve dependency:
npm ERR! peer little-state-machine@"^3.0.0" from [email protected]

Should we bump both to the latest version? Should we just go ahead with --legacy-peer-deps? What do you recommend?

Thanks for the awesome package!

Can't use it with react-native, it seems it only works with web.

I'm starting a project with Next.js
npx create-next-app my-project

Then i install
npm i little-state-machine

But when i try to install little-state-machine-devtools i have the problem

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: undefined@undefined
npm ERR! Found: react@18.1.0
npm ERR! node_modules/react
npm ERR!   peer react@"^16.8.0 || ^17 || ^18" from little-state-machine@4.3.2
npm ERR!   node_modules/little-state-machine
npm ERR!     little-state-machine@"^4.3.2" from the root project
npm ERR!     peer little-state-machine@"^4.0.0" from little-state-machine-devtools@2.0.1
npm ERR!     node_modules/little-state-machine-devtools
npm ERR!       little-state-machine-devtools@"*" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0" from little-state-machine-devtools@2.0.1
npm ERR! node_modules/little-state-machine-devtools
npm ERR!   little-state-machine-devtools@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

This is my package.json:

{
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "12.1.6",
    "react": "18.1.0",
    "react-dom": "18.1.0"
  },
  "devDependencies": {
    "eslint": "8.15.0",
    "eslint-config-next": "12.1.6"
  }
}

How can i solve this with React 18/Next.js?

npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"17.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0" from [email protected]
npm ERR! node_modules/little-state-machine-devtools
npm ERR! little-state-machine-devtools@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.