Still includes react-json-view when not using DevTools about little-state-machine

[ururk]

Trying it out - need to do a few tests.

[ururk]

I know - just wanted to try running it locally to see the new tree view, and build my app to see if it included the new library (react-json-tree).

It now includes the new library, although it is smaller in size.

[ururk]

[bluebill1049]

I think i know the fix now, i will sort out in the next couple days.

[bluebill1049]

hey @ururk what's the bundle tool that you are using? definitely not intentional.

[ururk]

create-react-app - not ejected

[bluebill1049]

may i know which version?

[ururk]

3.4.1

[ururk]

I'm not sure it's create-react app's fault - in the dist folder for little-state-machine, index.js, line 425-429:

const clone = require('lodash.clonedeep');
let ReactJson = (props) => React.createElement("div", Object.assign({}, props));
if (typeof window !== 'undefined' && typeof document !== 'undefined') {
    ReactJson = require('react-json-view').default;
}

I'm not as well-versed on the build/bundling side of things, but it looks to me like require will always be called when run in-browser.

There's no conditional outside of these lines.

[bluebill1049]

looks like that's a bug at little state machine.

[ururk]

Yep - sorry if I wasn't clear enough!

[bluebill1049]

nah all good, i think the reason little state machine did that because of SSR: mac-s-g/react-json-view#121

[bluebill1049]

i may have to switch to another lib...

[bluebill1049]

can you try this version: 3.0.0-beta.1

[bluebill1049]

core codebase is not changed @ururk only that dev tool with json view.

[bluebill1049]

sounds good to me :) so it's still in the prod build? 🤔

[ururk]

Yes - still in prod build. I even tried removing "import DevTool" and {process.env.NODE_ENV !== 'production' && <DevTool />}.

[bluebill1049]

can i see a snapshot of the build result?

[bluebill1049]

looks like this one is CRA related? facebook/create-react-app#2748

[bluebill1049]

Here is the index.ts file

import {
  setStorageType,
  createStore,
  StateMachineProvider,
  useStateMachine,
} from './stateMachine';
import { DevTool } from './components/DevTool';
import StateMachineContext from './StateMachineContext';

export {
  setStorageType,
  createStore,
  StateMachineProvider,
  useStateMachine,
  StateMachineContext,
  DevTool,
};

[ururk]

Checking something...

[bluebill1049]

Thanks for helping @ururk

i have sent a StackOverflow question around this as well: https://stackoverflow.com/questions/61471907/export-module-with-node-env-with-ts

[ururk]

Thanks! FYI - it is using index.es.js - not index.js from the dist folder.

I did a quick test and commented out the createElement calls in DevToolStateTree and it still included react-json-tree, so this feels like a webpack/CRA bug like you suspected.

[bluebill1049]

Yea, and it's difficult with TS as well, it probably doesn't support dynamic export. I will publish v3 anyhow later tonight, it's better than what we got right.

[ururk]

Yep! With the new library, I noticed you cannot scroll the tree when it is expanded past the browser window, can't recall now what the old behavior was, and if it is my app or not :P

[bluebill1049]

@ururk i will fix that :) (before the release)

[D1plo1d]

I'm also seeing react-hook-form in my parcel 2 builds. Am I right in understanding that this is fixed on the master branch? Also little-state-machine is showing as 16.01KB?

$ NODE_ENV=production parcel build src/index.html --experimental-scope-hoisting --detailed-report 20
✨  Built in 6.62s.

dist/src.eb090cc8.js                                             545.78 KB    6.54s
├── node_modules/react-json-view/dist/main.js                    147.96 KB     11ms
├── node_modules/react-hook-form/dist/react-hook-form.es.js        33.8 KB     71ms
├── node_modules/jss/dist/jss.esm.js                              25.36 KB     23ms
├── node_modules/little-state-machine/dist/index.es.js            16.01 KB      5ms

[bluebill1049]

i will have to move dev tool out from the main repo.