web-infra-dev / modern.js Goto Github PK
View Code? Open in Web Editor NEWModern.js is a web engineering system, including a web framework and a npm package solution.
Home Page: https://modernjs.dev/en/
License: MIT License
Modern.js is a web engineering system, including a web framework and a npm package solution.
Home Page: https://modernjs.dev/en/
License: MIT License
这是我使用 SSR 的总结
个人测试是这样的原因:
在项目启动的时候相当于服务重新启动,因为在执行到组件内部时,会把相应的函数注册到 loaderManger 中,因此第一次返回时 undefined,后续再刷新页面因为服务仍然在启动,仍然属于当前进程中,内部已经存在了当前的订阅器,因此可以等待之前注册的 loader 函数执行完再进行页面的渲染。
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'
按照文档走到这一章,直接复制
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
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
之前 Beta 测试时发现有部分支持 windows ,后续大家可以一起尝试适配一下。
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
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)
建议文档页面的黑色header不要上滑就马上出现,经常看文档里时想上滑一点看上面一点的文档,黑色header就马上出现,再下滑一点就消失,黑白冲突又强烈、且屏幕高度本来就比较小,header又占了一大块高度,看得眼睛很累、很烦躁
建议黑色header就只在上滑至页面最上方时才出现,在上滑时只要在右下角保留回到页首的按钮即可
我这里的场景是 开发ui组件库,在开启了 StoryBook 以后执行 yarn dev
,即 modern dev
报错。
错误信息如下:
error Command failed with exit code 1.
错误信息太过于简洁,以至于不知道是什么问题
关于开发移动端页面,会内部包含自适应布局相关的工具么,还是说不打算弄自适应布局,留给开发者自己加
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,现在似乎多了一个选择。
加油吧💪
esbuild
or swc
as build tools for node library
is a better option.$ 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:
|
|
Compiling...
Failed to compile.
文档地址:https://modernjs.dev/docs/guides/usages/css/postcs
按照文档中的配置,本地会报错
$ pnpm run dev:electron
WARN Unsupported engine: wanted: {"node":">=14.17.6"} (current: {"node":"v14.15.2","pnpm":"6.19.1"})
> [email protected] dev:electron /Users/muwoo/mywork/middle-platform-electron
> modern dev electron
(node:47840) UnhandledPromiseRejectionWarning: TypeError: Get Error while loading config file: /Users/muwoo/mywork/middle-platform-electron/modern.config.js, please check it and retry.
(0 , _crypto.randomUUID) is not a function
at defaultGetOutputFile (/Users/muwoo/mywork/middle-platform-electron/node_modules/_@[email protected]@@modern-js/node-bundle-require/dist/js/node/index.js:42:127)
at bundleRequire (/Users/muwoo/mywork/middle-platform-electron/node_modules/_@[email protected]@@modern-js/node-bundle-require/dist/js/node/index.js:52:19)
at bundleRequireWithCatch (/Users/muwoo/mywork/middle-platform-electron/node_modules/_@[email protected]@@modern-js/load-config/dist/js/node/index.js:68:60)
at loadConfig (/Users/muwoo/mywork/middle-platform-electron/node_modules/_@[email protected]@@modern-js/load-config/dist/js/node/index.js:94:23)
at loadUserConfig (/Users/muwoo/mywork/middle-platform-electron/node_modules/_@[email protected]@@modern-js/core/dist/js/node/config/index.js:53:51)
at init (/Users/muwoo/mywork/middle-platform-electron/node_modules/_@[email protected]@@modern-js/core/dist/js/node/index.js:157:53)
at async Object.run (/Users/muwoo/mywork/middle-platform-electron/node_modules/_@[email protected]@@modern-js/core/dist/js/node/index.js:208:9)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:47840) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 3)
(node:47840) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
咋和 Next.js 这么像 🤔
包括自动化路由、内置 Web Server、一体化 SSG/SSR/SPR 等
这里面的SPR, 指的是什么渲染方式
满足了我配置不好SSR story 等各种功能的需求,体验下来感觉很稳,粗略的感受打扰一下了:
对于已知的 unbundle 模式问题,希望文档上明确写出来,目前文档对于 unbundle 没有提示和告警,由于已知会遇到报错感觉可以提示一下暂时的缺陷/不足
因为相对大而全的认知,对于新的技术的尝试的探索欲望,有点担心不能很好支持
比如我如果想尝试 windicss 、unocss,该怎么做?如果能给一个 sample 引导
如果想尝试新的 jotai valtio swr 又是不是会很顺利呢?
我甚至想尝试 rescript 替换 typescript,不是希望给团队增加支持的压力,是希望有简单的周边引导,告诉我设计思路,可以让我自由发挥,避免踩坑。
希望参考 astro.build 做一个按需水化,往按需编译的路上走远一点
在复用模块下创建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)
如题,似乎Unbundled和bff不能共存?
按照文档的安装方式,
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)
Just for curiosity.
node version:14.18.1
pnpm version:6.22.1
稳定复现:是
npx @modern-js/create
log:
npx: 1 安装成功,用时 1.746 秒
? 请选择你想创建的工程类型 应用
? 请选择开发语言 TS
? 请选择包管理工具 pnpm
? 是否需要支持以下类型应用 不需要
? 是否需要调整默认配置? 否
pnpm run new
log:
? 请选择你想要的操作 启用可选功能
? 启用可选功能 启用「BFF」功能
? 请选择 BFF 类型 框架模式
? 请选择运行时框架 Nest
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:
【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,
https://modernjs.dev/docs/apis/runtime/model/auto-actions
我测试了半天,ts能够提示对应的set,但是实际调用的时候却找不到 什么情况
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 到
| 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
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.
按文档操作时: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
"output": {
"ssg": "true"
}
写入package.json配置错误
应该是
"output": {
"ssg": true
}
I have some dependencies component provided with TypeScript and have no dist file, is there any way to transpile these dependencies ?
源码里看到 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=
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]
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.