web-infra-dev / modern.js Goto Github PK

这是我使用 SSR 的总结

个人测试是这样的原因：

在项目启动的时候相当于服务重新启动，因为在执行到组件内部时，会把相应的函数注册到 loaderManger 中，因此第一次返回时 undefined，后续再刷新页面因为服务仍然在启动，仍然属于当前进程中，内部已经存在了当前的订阅器，因此可以等待之前注册的 loader 函数执行完再进行页面的渲染。

咋和 Next.js 这么像 🤔

"output": {
"ssg": "true"
}

写入package.json配置错误
应该是
"output": {
"ssg": true
}

Reproduce

• repository for test
• Steps
  • git clone
  • pnpm i
  • pnpm run new --filter twin.arco
    

Expected

• I want to check unbundle mode available in module solution or not.
• Maybe use esbuild or swc as build tools for node library is a better option.

在复用模块下创建config/storybook/preview.js，编译没出错。但是浏览器报错

Uncaught Error: Cannot find module '/xxxxx/packages/ui/config/storybook/preview'
    at webpackEmptyContext (.storybook|sync:2)
    at Object../node_modules/.modern-js/.storybook/preview.js (preview.js:5)
    at __webpack_require__ (bootstrap:24)
    at fn (hot module replacement:61)
    at fn (hot module replacement:61)
    at Object../node_modules/.modern-js/.storybook/preview.js-generated-config-entry.js (preview.js:33)
    at __webpack_require__ (bootstrap:24)
    at __webpack_exec__ (util.inspect:1)
    at util.inspect:1
    at Function.__webpack_require__.O (chunk loaded:23)

| Loading...[ERROR] run task error: Error: Cannot find module 'C:\Users\xxx\AppData\Local\Temp\csmith-generator@modern-js\[email protected]\dist\js\node\main.js'. Please verify that the package.json has a valid "main" entry

Just for curiosity.

https://modernjs.dev/docs/apis/runtime/model/auto-actions

我测试了半天，ts能够提示对应的set，但是实际调用的时候却找不到 什么情况

之前 Beta 测试时发现有部分支持 windows ，后续大家可以一起尝试适配一下。

按照文档走到这一章，直接复制

function App () {
  return (
    <div className="container lg mx-auto">
        <Switch>
          <Route path="/" exact={true}>
            <Helmet>
              <title>All</title>
            </Helmet>
            <List
              dataSource={mockData}
              renderItem={info => <Item key={info.name} info={info} />}
            />
          </Route>
          <Route path="/archives" exact={true}>
            <Helmet>
              <title>Archives</title>
            </Helmet>
            <List
              dataSource={mockArchivedData}
              renderItem={info => <Item key={info.name} info={info} />}
            />
          </Route>
        </Switch>
    </div>
  )
}

访问 http://localhost:8080/contacts
报错
SSR Error - App Prefetch error = Error: Invariant failed: You should not use <Switch> outside a <Router>
用 BrowserRouter 又会报错
SSR Error - App Prefetch error = Error: Invariant failed: Browser history needs a DOM

node版本：v16.13.0
电脑配置 MacBook Pro (13-inch, 2017, Four Thunderbolt 3 Ports) 内存8GB

使用modern.js开发工具库，创建storyBook后执行 pnpm run dev story 时出错。

使用modern创建其他类型项目时也同样有这个问题。

13% building 1/16 entries 1160/1200 dependencies 121/349 modules
<--- Last few GCs --->

[48400:0x7fefff600000]    42219 ms: Scavenge 2034.4 (2086.0) -> 2030.7 (2086.3) MB, 2.0 / 0.0 ms  (average mu = 0.243, current mu = 0.218) allocation failure 
[48400:0x7fefff600000]    42227 ms: Scavenge 2035.1 (2086.8) -> 2031.6 (2087.0) MB, 2.7 / 0.0 ms  (average mu = 0.243, current mu = 0.218) allocation failure 
[48400:0x7fefff600000]    45197 ms: Mark-sweep 2036.3 (2088.0) -> 2032.2 (2088.3) MB, 2964.5 / 0.0 ms  (average mu = 0.138, current mu = 0.038) allocation failure scavenge might not succeed


<--- JS stacktrace --->

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 0x10dff9515 node::Abort() (.cold.1) [/usr/local/bin/node]
 2: 0x10ccfa989 node::Abort() [/usr/local/bin/node]
 3: 0x10ccfaaff node::OnFatalError(char const*, char const*) [/usr/local/bin/node]
 4: 0x10ce7a2c7 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
 5: 0x10ce7a263 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
 6: 0x10d01b975 v8::internal::Heap::FatalProcessOutOfMemory(char const*) [/usr/local/bin/node]

Error [ERR_STREAM_PREMATURE_CLOSE]: Premature close
at Source.onclose (internal/streams/end-of-stream.js:105:38)
at Source.emit (events.js:315:20)
at Extract.destroy (/usr/local/lib/node_modules/pnpm/dist/pnpm.cjs:67501:22)
at Source.destroy (/usr/local/lib/node_modules/pnpm/dist/pnpm.cjs:67357:20)
at Object.destroyer (internal/streams/destroy.js:166:59)
at internal/streams/pipeline.js:58:19
at internal/util.js:392:14
at Source. (internal/streams/pipeline.js:84:7)
at Source. (internal/util.js:392:14)
at Source.onend (internal/streams/end-of-stream.js:95:49)
Error [ERR_STREAM_PREMATURE_CLOSE]: Premature close
at Source.onclose (internal/streams/end-of-stream.js:105:38)
at Source.emit (events.js:315:20)
at Extract.destroy (/usr/local/lib/node_modules/pnpm/dist/pnpm.cjs:67501:22)
at Source.destroy (/usr/local/lib/node_modules/pnpm/dist/pnpm.cjs:67357:20)
at Object.destroyer (internal/streams/destroy.js:166:59)
at internal/streams/pipeline.js:58:19
at internal/util.js:392:14
at Source. (internal/streams/pipeline.js:84:7)
at Source. (internal/util.js:392:14)
at Source.onend (internal/streams/end-of-stream.js:95:49)

I have some dependencies component provided with TypeScript and have no dist file, is there any way to transpile these dependencies ?

hello-modern@ dev /Users/xxxx/Dev/data-design/hello-modern
modern dev

internal/modules/cjs/loader.js:969
throw err;
^

Error: Cannot find module 'fs/promises'

当打开BFF和SSR模式的时候，浏览器两个tag打开页面，页面会反复刷新

May I know where can i find the package @modern-js/monorepo-tools ? It seems don't include in the repo?

我这里的场景是 开发ui组件库，在开启了 StoryBook 以后执行 yarn dev，即 modern dev 报错。
错误信息如下：

error Command failed with exit code 1.

错误信息太过于简洁，以至于不知道是什么问题

源码里看到 import { getPolyfillString } from '@modern-js/polyfill-lib';
https://www.npmjs.com/package/@modern-js/polyfill-lib 里看到这个包的源头就是本仓库。
但是本仓库搜不到 getPolyfillString 方法的内容诶：https://github.com/modern-js-dev/modern.js/search?q=getPolyfillString&type=

按照《创建最简单的 MWA》创建的示例项目跑不起来。

报错信息：

我的环境：

nvm version: 0.38.0

代码结构：

1，unbundle模式启动不了，编译出错，pnpm和yarn都一样
2，支持react-router 6
3，react 18 实现性支持。并发渲染和Suspense SSR，这比较重要，年底应该可用。
4，emotion比styled-components更合适，参考material-ui
5，注重unbundle而不是webpack，后者开发体验实在太糟糕了

暂时这些吧。目前感受是多了一个更工程化的next.js替代品，还没有太多惊艳的地方。
希望努力做好，会推荐使用。之前受不了next.js(低效+框架约束)转而去使用nuxt.js，现在似乎多了一个选择。
加油吧💪

node version：14.18.1
pnpm version：6.22.1

@modern-js/plugin-egg/src/framework/index.ts:22

第 22 行 super.load() 打 log 可以发现调用了两次，两次 trace：

Trace: ModernJsLoader load
    at /common/temp/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@modern-js/plugin-egg/dist/js/node/framework/index.js:34:15
    at ModernJsLoader.mockBaseDir (/common/temp/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@modern-js/plugin-egg/dist/js/node/framework/index.js:41:5)
    at ModernJsLoader.load (/common/temp/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@modern-js/plugin-egg/dist/js/node/framework/index.js:33:10)
    at new Agent (/common/temp/node_modules/.pnpm/[email protected]/node_modules/egg/lib/agent.js:24:17)
    at new Agent (/common/temp/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@modern-js/plugin-egg/dist/js/node/framework/index.js:113:1)
    at initApp (/common/temp/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@modern-js/plugin-egg/dist/js/node/plugin.js:74:17)
    at prepareApiServer (/common/temp/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@modern-js/plugin-egg/dist/js/node/plugin.js:165:23)
    at /common/temp/node_modules/.pnpm/@[email protected]/node_modules/@modern-js/plugin/dist/js/node/pipeline/async.js:57:61
    at run (/common/temp/node_modules/.pnpm/@[email protected]/node_modules/@modern-js/plugin/dist/js/node/hook.js:45:14)
    at /common/temp/node_modules/.pnpm/@[email protected]/node_modules/@modern-js/plugin/dist/js/node/pipeline/async.js:57:48

Trace: ModernJsLoader load
    at /common/temp/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@modern-js/plugin-egg/dist/js/node/framework/index.js:34:15
    at ModernJsLoader.mockBaseDir (/common/temp/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@modern-js/plugin-egg/dist/js/node/framework/index.js:41:5)
    at ModernJsLoader.load (/common/temp/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@modern-js/plugin-egg/dist/js/node/framework/index.js:33:10)
    at new Application (/common/temp/node_modules/.pnpm/[email protected]/node_modules/egg/lib/application.js:66:19)
    at new Application (/common/temp/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@modern-js/plugin-egg/dist/js/node/framework/index.js:102:1)
    at initApp (/common/temp/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@modern-js/plugin-egg/dist/js/node/plugin.js:76:23)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at prepareApiServer (/common/temp/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@modern-js/plugin-egg/dist/js/node/plugin.js:165:17)
    at /common/temp/node_modules/.pnpm/@[email protected]/node_modules/@modern-js/plugin/dist/js/node/pipeline/async.js:57:20
    at /common/temp/node_modules/.pnpm/@[email protected]/node_modules/@modern-js/plugin/dist/js/node/pipeline/async.js:57:20

现象是会导致 orm 插件对同一个数据库连两次然后报错退出，具体为什么会触发两次 load 还没有 debug 到

node: 16
ubuntu: 2110

https://modernjs.dev/docs/guides/features/server-side/deploy/upload-cdn/cos

满足了我配置不好SSR story 等各种功能的需求，体验下来感觉很稳，粗略的感受打扰一下了：

当我尝试切换到 unbundle 模式的时候，遇到报错。

0. 对于已知的 unbundle 模式问题，希望文档上明确写出来，目前文档对于 unbundle 没有提示和告警，由于已知会遇到报错感觉可以提示一下暂时的缺陷/不足

1. 因为相对大而全的认知，对于新的技术的尝试的探索欲望，有点担心不能很好支持
   比如我如果想尝试 windicss 、unocss，该怎么做？如果能给一个 sample 引导
   如果想尝试新的 jotai valtio swr 又是不是会很顺利呢？
   我甚至想尝试 rescript 替换 typescript，不是希望给团队增加支持的压力，是希望有简单的周边引导，告诉我设计思路，可以让我自由发挥，避免踩坑。

2. 希望参考 astro.build 做一个按需水化，往按需编译的路上走远一点

关于开发移动端页面，会内部包含自适应布局相关的工具么，还是说不打算弄自适应布局，留给开发者自己加

包括自动化路由、内置 Web Server、一体化 SSG/SSR/SPR 等

这里面的SPR, 指的是什么渲染方式

$ pnpm run dev

[email protected] dev D:\code\modernjs-learn\website
modern dev

Starting the development server...
Failed to compile.

./src/App.tsx
Module parse failed: Unexpected token (9:2)
File was processed with these loaders:

• ./node_modules/.pnpm/registry.npmmirror.com+@pmmmwh[email protected]_38b60165483e1a76248535c34b16f9d1/node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
  You may need an additional loader to handle the result of these loaders.
  |
  | const App = () => (

|
|

添加测试用例后，Unbundle 模式下依赖预处理失败

文档地址：https://modernjs.dev/docs/guides/usages/css/postcs

按照文档中的配置，本地会报错

如题，似乎Unbundled和bff不能共存？

npx @modern-js/create api-lie

sh: create: 未找到命令

env:

node -v
v16.13.0

pnpm -v
6.20.1

cat /proc/version
Linux version 3.10.0-1160.el7.x86_64 ([email protected]) (gcc version 4.8.5 20150623 (Red Hat 4.8.5-44) (GCC) ) #1 SMP Mon Oct 19 16:18:59 UTC 2020

建议文档页面的黑色header不要上滑就马上出现，经常看文档里时想上滑一点看上面一点的文档，黑色header就马上出现，再下滑一点就消失，黑白冲突又强烈、且屏幕高度本来就比较小，header又占了一大块高度，看得眼睛很累、很烦躁

建议黑色header就只在上滑至页面最上方时才出现，在上滑时只要在右下角保留回到页首的按钮即可

Following the example in the document, I created modern.config.js with following code. But it didn't work.

const { defineConfig } = require('@modern-js/app-tools');

module.exports = defineConfig({
  tools: {
    webpack: { mode: 'development' },
  },
});

By reading the source code here, I found that the only way to make it available is to use webpack-chain.

const { defineConfig } = require('@modern-js/app-tools');

module.exports = defineConfig({
  tools: {
    webpack: (config, { chain }) => {
      chain.mode('development');
    },
  },
});

This may be a bug or the documentation may need to be fixed.

复现：

• npx @modern-js/create hello-modern
• sudo pnpm run dev

环境：

• node: v17.0.1
• pnpm: v6.19.1

根据文档 开发工具库、开发UI组件 生成的module中，package.json文件里缺少files的定义。

建议默认往package.json中添加files的配置，如：

"files": [
    "dist"
]

这样build出来的包在使用者那里的IDE里能正确识别到types和源码等文件。

按照文档的安装方式，
pnpm run dev之后报错

环境：
macOS: 12.0.1
node：v17.0.1
pnpm: v6.19.0
npm:8.1.0

Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:67:19)
at Object.createHash (node:crypto:130:10)
at BulkUpdateDecorator.hashFactory (/Users/jingjingxinshang/Documents/LGQ/Example/middle-platform/node_modules/.pnpm/[email protected]/node_modules/webpack/lib/util/createHash.js:155:18)
at BulkUpdateDecorator.digest (/Users/jingjingxinshang/Documents/LGQ/Example/middle-platform/node_modules/.pnpm/[email protected]/node_modules/webpack/lib/util/createHash.js:80:21)
at /Users/jingjingxinshang/Documents/LGQ/Example/middle-platform/node_modules/.pnpm/[email protected]/node_modules/webpack/lib/DefinePlugin.js:595:38
at Hook.eval [as call] (eval at create (/Users/jingjingxinshang/Documents/LGQ/Example/middle-platform/node_modules/.pnpm/[email protected]/node_modules/tapable/lib/HookCodeFactory.js:19:10), :198:1)
at Hook.CALL_DELEGATE [as _call] (/Users/jingjingxinshang/Documents/LGQ/Example/middle-platform/node_modules/.pnpm/[email protected]/node_modules/tapable/lib/Hook.js:14:14)
at Compiler.newCompilation (/Users/jingjingxinshang/Documents/LGQ/Example/middle-platform/node_modules/.pnpm/[email protected]/node_modules/webpack/lib/Compiler.js:1053:26)
at /Users/jingjingxinshang/Documents/LGQ/Example/middle-platform/node_modules/.pnpm/[email protected]/node_modules/webpack/lib/Compiler.js:1097:29
at Hook.eval [as callAsync] (eval at create (/Users/jingjingxinshang/Documents/LGQ/Example/middle-platform/node_modules/.pnpm/[email protected]/node_modules/tapable/lib/HookCodeFactory.js:33:10), :22:1)

按文档操作时：https://modernjs.dev/docs/start/mobile

pnpm run new启用可选功能后，新依赖项没有自动安装，需要手动再执行pnpm install
否则执行pnpm run dev会报错：error Error: Can't call useContainer out of scope, it should be placed on top of the function

操作系统：macos 10.15.7
node版本：nvm 14.18.1
pnpm版本：6.19.1

Module solution just exports index by default, and the output file structure make typescript can't search responding d.ts by the import js path

Example library is windicss

node version：14.18.1
pnpm version：6.22.1

稳定复现：是

复现路径：

1. npx @modern-js/create
   log:
   npx: 1 安装成功，用时 1.746 秒
   ? 请选择你想创建的工程类型 应用
   ? 请选择开发语言 TS
   ? 请选择包管理工具 pnpm
   ? 是否需要支持以下类型应用 不需要
   ? 是否需要调整默认配置? 否

2. pnpm run new
   log:
   ? 请选择你想要的操作 启用可选功能
   ? 启用可选功能 启用「BFF」功能
   ? 请选择 BFF 类型 框架模式
   ? 请选择运行时框架 Nest

3. pnpm run dev
   log:
   ● Client █████████████████████████ setup (3%)
   watch run

[Nest] 96690 - 2021/11/23 下午3:47:41 LOG [NestFactory] Starting Nest application...
[Nest] 96690 - 2021/11/23 下午3:47:41 ERROR [ExceptionHandler] Nest can't resolve dependencies of the AppController (?). Please make sure that the argument Object at index [0] is available in the AppModule context.

Potential solutions:

• If Object is a provider, is it part of the current AppModule?
• If Object is exported from a separate @module, is that module imported within AppModule?
  @module({
  imports: [ /* the Module containing Object */ ]
  })

最小复现代码

nest-test.zip

【Describe the bug】
In dev:esm mode, the bff api fails, but in dev mode, the buff api is success

【Possible Causes】
In dev:esm mode, the bff api is setup failed

【Reproduction】
In dev:esm mode, and then start the bff api, it will happen

【System Info】
@modern-js/plugin-bff: "^1.0.0",
@modern-js/plugin-koa: "^1.0.0",
@modern-js/runtime: "^1.0.0",
@koa: "^2.13.4",
@react: "^17.0.1",
@react-dom: "^17.0.1"
@google: Chrome: 94.0.4606.71 (official version) (x86_64),
@os: macOS Catalina 10.15.7,
@javascript: V8 9.4.146.18,