bluebill1049 / little-state-machine-dev-tools Goto Github PK
View Code? Open in Web Editor NEWlittle state machine dev tools
License: MIT License
little state machine dev tools
License: MIT License
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!
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?
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 ๐
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.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.