fix(build): dyn import in skypack (native ESM)

[ahaoboy]

fix: dyn import in skypack (close: #452)
I compared the versions that works, this is the difference

error

import {useSyncExternalStore} from "/-/[email protected]/dist=es2019,mode=imports/unoptimized/shim/index.js";

ok

import de from "/-/[email protected]/dist=es2019,mode=imports/unoptimized/shim/index.js";

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
valtio	✅ Ready (Inspect)	Visit Preview	May 20, 2022 at 11:04AM (UTC)

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 490ac59:

Sandbox	Source
React	Configuration
React Typescript	Configuration
React Browserify	Configuration
React Snowpack	Configuration
React Parcel	Configuration

[ahaoboy]

I'm not sure if it will affect #410

[dai-shi]

Thanks for the investigation.
This looks like a valid workaround until use-sync-external-store provides ESM.
I'll add a commit for some comments.

[dai-shi]

https://codesandbox.io/s/react-forked-2d7r4r?file=/src/App.js This one seems working.

[dai-shi]

I'm a little confused. Why doesn't 'react' cause the same issue?

valtio/src/react.ts

Line 1 in af26b60

import { useCallback, useDebugValue, useEffect, useMemo, useRef } from 'react'

[dai-shi]

Maybe because it's a peer dependency.

[dai-shi]

I'm not 100% confident, but let's merge this and ship it. We will see then.

[dai-shi]

@ahaoboy I'm thinking about reverting this because @s-cork reported that it didn't fix. facebook/react#24590

[ahaoboy]

I try 1.6.1, it works...

[s-cork]

When I do that I get:

use-sync-external-store-shim.development.js:17 Uncaught ReferenceError: process is not defined
    at use-sync-external-store-shim.development.js:16:3
    at createCommonjsModule (use-sync-external-store-shim.development.js:4:10)
    at use-sync-external-store-shim.development.js:15:22

When I look at what's trying to be imported from use-sync-external-store-shim there are some references to (process.env.NODE_ENV !== "production")

[ahaoboy]

I've made an example, if it's what you need? or if you can give some specific details of the problem
@s-cork
Web Platform (forked) - StackBlitz

[ahaoboy]

When I do that I get:

use-sync-external-store-shim.development.js:17 Uncaught ReferenceError: process is not defined
    at use-sync-external-store-shim.development.js:16:3
    at createCommonjsModule (use-sync-external-store-shim.development.js:4:10)
    at use-sync-external-store-shim.development.js:15:22

When I look at what's trying to be imported from use-sync-external-store-shim there are some references to (process.env.NODE_ENV !== "production")

You should add some code before your script tag, like this:

    <script>
      globalThis.process = { env: { NODE_ENV: "dev" } };
    </script>