[Bug]: 使用按需 ua，自定义 node server host spa 资源， http://localhost:8080/polyfill 报 500 错误 #6583

crazyxhz · 2024-11-28T23:55:14Z

Version

System:
    OS: macOS 15.1.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 1.14 GB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Browsers:
    Chrome: 131.0.6778.86
    Safari: 18.1.1
  npmPackages:
    @modern-js/app-tools: 2.63.0 => 2.63.0
    @modern-js/plugin-polyfill: 2.63.0 => 2.63.0
    @modern-js/plugin-server: 2.63.0 => 2.63.0
    @modern-js/plugin-tailwindcss: 2.63.0 => 2.63.0
    @modern-js/runtime: 2.63.0 => 2.63.0
    @modern-js/tsconfig: 2.63.0 => 2.63.0

Details

模板工程

import { appTools, defineConfig } from '@modern-js/app-tools';
import { tailwindcssPlugin } from '@modern-js/plugin-tailwindcss';
import { polyfillPlugin } from '@modern-js/plugin-polyfill';
import { serverPlugin } from '@modern-js/plugin-server';
// https://modernjs.dev/en/configure/app/usage
export default defineConfig({
  runtime: {
    router: true,
  },
  output: {
    polyfill: 'ua',
  },
  plugins: [
    appTools({
      bundler: 'rspack', // Set to 'webpack' to enable webpack
    }),
    tailwindcssPlugin(),
    polyfillPlugin(),
    serverPlugin(),
  ],
});

server 定义

import type { AfterRenderHook } from '@modern-js/runtime/server';

export const afterRender: AfterRenderHook = (context, next) => {
  if (context.request.pathname === '/api/health') {
    context.template.set(JSON.stringify({ status: 'UP' }));
  }
  next();
};

npm run deploy
node .output/index.js

访问 http://localhost:8080/__polyfill__ 报错 500

| Server Error - Internal server error, error = Error: Cannot find module '../compiled/mime-types'
 Require stack:
 - /server/package/my-project/test_20241129_77764_52e42713/node_modules/@modern-js/utils/dist/cjs/compiled.js
 - /server/package/my-project/test_20241129_77764_52e42713/node_modules/@modern-js/utils/dist/cjs/index.js
 - /server/package/my-project/test_20241129_77764_52e42713/node_modules/@modern-js/server-core/dist/cjs/adapters/node/helper/loadEnv.js
 - /server/package/my-project/test_20241129_77764_52e42713/node_modules/@modern-js/server-core/dist/cjs/adapters/node/helper/index.js
 - /server/package/my-project/test_20241129_77764_52e42713/node_modules/@modern-js/server-core/dist/cjs/adapters/node/hono.js
 - /server/package/my-project/test_20241129_77764_52e42713/node_modules/@modern-js/server-core/dist/cjs/adapters/node/index.js
 - /server/package/my-project/test_20241129_77764_52e42713/node_modules/@modern-js/prod-server/dist/cjs/index.js
 - /server/package/my-project/test_20241129_77764_52e42713/index.js
     at Function._resolveFilename (node:internal/modules/cjs/loader:1249:15)
     at Module.Hook._require.Module.require (/home/server/.nvm/versions/node/v22.11.0/lib/node_modules/pm2/node_modules/require-in-the-middle/index.js:81:25)
     at require (node:internal/modules/helpers:141:16)
     at lazy (/server/package/my-project/test_20241129_77764_52e42713/node_modules/@modern-js/utils/dist/compiled/import-lazy/index.js:1:68)
     at Object.get (/server/package/my-project/test_20241129_77764_52e42713/node_modules/@modern-js/utils/dist/compiled/import-lazy/index.js:1:121)
     at /server/package/my-project/test_20241129_77764_52e42713/node_modules/@modern-js/plugin-polyfill/dist/cjs/index.js:69:69
     at dispatch (/server/package/my-project/test_20241129_77764_52e42713/node_modules/hono/dist/cjs/compose.js:51:23)
     at /server/package/my-project/test_20241129_77764_52e42713/node_modules/hono/dist/cjs/compose.js:28:12
     at /server/package/my-project/test_20241129_77764_52e42713/node_modules/hono/dist/cjs/hono-base.js:265:31

Reproduce link

https://github.com/web-infra-dev/modern.js/issues/new?q=polyfill&template=1-bug-report.en-US.yml

Reproduce Steps

just moderjs new template

The text was updated successfully, but these errors were encountered:

xxnuo · 2024-12-18T15:48:57Z

System:
  OS: macOS 14.5
  Shell: 5.9 - /bin/zsh
npmPackages:
  @modern-js/app-tools: 2.63.2 => 2.63.2 
  @modern-js/plugin-polyfill: 2.63.2 => 2.63.2 
  @modern-js/plugin-router-v5: 2.63.2 => 2.63.2 
  @modern-js/plugin-ssg: 2.63.2 => 2.63.2 
  @modern-js/plugin-tailwindcss: 2.63.2 => 2.63.2 
  @modern-js/runtime: 2.63.2 => 2.63.2 
  @modern-js/tsconfig: 2.63.2 => 2.63.2

脚手架默认创建的新项目，使用如下配置
The scaffolded new project by default uses the following configuration

import { appTools } from "@modern-js/app-tools";
import { tailwindcssPlugin } from "@modern-js/plugin-tailwindcss";
import { ssgPlugin } from '@modern-js/plugin-ssg';
// import { polyfillPlugin } from '@modern-js/plugin-polyfill';


// https://modernjs.dev/en/configure/app/usage
module.exports = {
	dev: {
		writeToDisk: false,
	},
	output: {
		ssg: true,
	},
	runtime: {
		router: true,
	},
	plugins: [
		appTools({
			bundler: "rspack", // Set to 'webpack' to enable webpack
		}),
		tailwindcssPlugin(),
		ssgPlugin(),
		// polyfillPlugin(), // 只有在使用 Modern.js 内置的 Web Server 时才会生效
	],
};

即使注释不使用 polyfillPlugin，执行 pnpm modern deploy && node .output/index.js 打开 http://localhost:8080/__polyfill__ 页面会陷入无休止的重载，console 提示 The initial URL / and the URL /__polyfill__ to be hydrated do not match, reload.

Even if the polyfillPlugin is not used, running pnpm modern deploy && node .output/index.js and opening the http://localhost:8080/__polyfill__ page will result in an endless reload. The console error The initial URL / and the URL /__polyfill__ to be hydrated do not match, reload.

yimingjfe · 2024-12-19T05:11:02Z

System:
  OS: macOS 14.5
  Shell: 5.9 - /bin/zsh
npmPackages:
  @modern-js/app-tools: 2.63.2 => 2.63.2 
  @modern-js/plugin-polyfill: 2.63.2 => 2.63.2 
  @modern-js/plugin-router-v5: 2.63.2 => 2.63.2 
  @modern-js/plugin-ssg: 2.63.2 => 2.63.2 
  @modern-js/plugin-tailwindcss: 2.63.2 => 2.63.2 
  @modern-js/runtime: 2.63.2 => 2.63.2 
  @modern-js/tsconfig: 2.63.2 => 2.63.2 
脚手架默认创建的新项目，使用如下配置 The scaffolded new project by default uses the following configuration
import { appTools } from "@modern-js/app-tools";
import { tailwindcssPlugin } from "@modern-js/plugin-tailwindcss";
import { ssgPlugin } from '@modern-js/plugin-ssg';
// import { polyfillPlugin } from '@modern-js/plugin-polyfill';


// https://modernjs.dev/en/configure/app/usage
module.exports = {
	dev: {
		writeToDisk: false,
	},
	output: {
		ssg: true,
	},
	runtime: {
		router: true,
	},
	plugins: [
		appTools({
			bundler: "rspack", // Set to 'webpack' to enable webpack
		}),
		tailwindcssPlugin(),
		ssgPlugin(),
		// polyfillPlugin(), // 只有在使用 Modern.js 内置的 Web Server 时才会生效
	],
};
即使注释不使用 polyfillPlugin，执行 pnpm modern deploy && node .output/index.js 打开 http://localhost:8080/__polyfill__ 页面会陷入无休止的重载，console 提示 The initial URL / and the URL /__polyfill__ to be hydrated do not match, reload.

Even if the polyfillPlugin is not used, running pnpm modern deploy && node .output/index.js and opening the http://localhost:8080/__polyfill__ page will result in an endless reload. The console error The initial URL / and the URL /__polyfill__ to be hydrated do not match, reload.

这是一个不同的问题，和 router 及 ssg 有关，请提一个新的 issue

yimingjfe · 2024-12-19T05:14:54Z

Version

System:
OS: macOS 15.1.1
CPU: (10) arm64 Apple M1 Max
Memory: 1.14 GB / 64.00 GB
Shell: 5.9 - /bin/zsh
Browsers:
Chrome: 131.0.6778.86
Safari: 18.1.1
npmPackages:
@modern-js/app-tools: 2.63.0 => 2.63.0
@modern-js/plugin-polyfill: 2.63.0 => 2.63.0
@modern-js/plugin-server: 2.63.0 => 2.63.0
@modern-js/plugin-tailwindcss: 2.63.0 => 2.63.0
@modern-js/runtime: 2.63.0 => 2.63.0
@modern-js/tsconfig: 2.63.0 => 2.63.0

Details

模板工程

import { appTools, defineConfig } from '@modern-js/app-tools';
import { tailwindcssPlugin } from '@modern-js/plugin-tailwindcss';
import { polyfillPlugin } from '@modern-js/plugin-polyfill';
import { serverPlugin } from '@modern-js/plugin-server';
// https://modernjs.dev/en/configure/app/usage
export default defineConfig({
runtime: {
router: true,
},
output: {
polyfill: 'ua',
},
plugins: [
appTools({
bundler: 'rspack', // Set to 'webpack' to enable webpack
}),
tailwindcssPlugin(),
polyfillPlugin(),
serverPlugin(),
],
});
server 定义
import type { AfterRenderHook } from '@modern-js/runtime/server';

export const afterRender: AfterRenderHook = (context, next) => {
  if (context.request.pathname === '/api/health') {
    context.template.set(JSON.stringify({ status: 'UP' }));
  }
  next();
};
npm run deploy node .output/index.js

访问 http://localhost:8080/__polyfill__ 报错 500
| Server Error - Internal server error, error = Error: Cannot find module '../compiled/mime-types'
 Require stack:
 - /server/package/my-project/test_20241129_77764_52e42713/node_modules/@modern-js/utils/dist/cjs/compiled.js
 - /server/package/my-project/test_20241129_77764_52e42713/node_modules/@modern-js/utils/dist/cjs/index.js
 - /server/package/my-project/test_20241129_77764_52e42713/node_modules/@modern-js/server-core/dist/cjs/adapters/node/helper/loadEnv.js
 - /server/package/my-project/test_20241129_77764_52e42713/node_modules/@modern-js/server-core/dist/cjs/adapters/node/helper/index.js
 - /server/package/my-project/test_20241129_77764_52e42713/node_modules/@modern-js/server-core/dist/cjs/adapters/node/hono.js
 - /server/package/my-project/test_20241129_77764_52e42713/node_modules/@modern-js/server-core/dist/cjs/adapters/node/index.js
 - /server/package/my-project/test_20241129_77764_52e42713/node_modules/@modern-js/prod-server/dist/cjs/index.js
 - /server/package/my-project/test_20241129_77764_52e42713/index.js
     at Function._resolveFilename (node:internal/modules/cjs/loader:1249:15)
     at Module.Hook._require.Module.require (/home/server/.nvm/versions/node/v22.11.0/lib/node_modules/pm2/node_modules/require-in-the-middle/index.js:81:25)
     at require (node:internal/modules/helpers:141:16)
     at lazy (/server/package/my-project/test_20241129_77764_52e42713/node_modules/@modern-js/utils/dist/compiled/import-lazy/index.js:1:68)
     at Object.get (/server/package/my-project/test_20241129_77764_52e42713/node_modules/@modern-js/utils/dist/compiled/import-lazy/index.js:1:121)
     at /server/package/my-project/test_20241129_77764_52e42713/node_modules/@modern-js/plugin-polyfill/dist/cjs/index.js:69:69
     at dispatch (/server/package/my-project/test_20241129_77764_52e42713/node_modules/hono/dist/cjs/compose.js:51:23)
     at /server/package/my-project/test_20241129_77764_52e42713/node_modules/hono/dist/cjs/compose.js:28:12
     at /server/package/my-project/test_20241129_77764_52e42713/node_modules/hono/dist/cjs/hono-base.js:265:31
Reproduce link

https://github.com/web-infra-dev/modern.js/issues/new?q=polyfill&template=1-bug-report.en-US.yml

Reproduce Steps

just moderjs new template

Thank you for your feedback, the issue has been fixed, and you can solve it by updating Modern.js to the latest version(2.63.3)

crazyxhz added the bug Something isn't working label Nov 28, 2024

yimingjfe self-assigned this Dec 12, 2024

yimingjfe mentioned this issue Dec 13, 2024

fix(deploy): should handle prebundle package correctly #6632

Merged

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Bug]: 使用按需 ua，自定义 node server host spa 资源， http://localhost:8080/polyfill 报 500 错误 #6583

[Bug]: 使用按需 ua，自定义 node server host spa 资源， http://localhost:8080/polyfill 报 500 错误 #6583

crazyxhz commented Nov 28, 2024

xxnuo commented Dec 18, 2024 •

edited

Loading

yimingjfe commented Dec 19, 2024

yimingjfe commented Dec 19, 2024

Version

Details

Reproduce link

Reproduce Steps

[Bug]: 使用按需 ua，自定义 node server host spa 资源， http://localhost:8080/__polyfill__ 报 500 错误 #6583

[Bug]: 使用按需 ua，自定义 node server host spa 资源， http://localhost:8080/__polyfill__ 报 500 错误 #6583

Comments

crazyxhz commented Nov 28, 2024

Version

Details

Reproduce link

Reproduce Steps

xxnuo commented Dec 18, 2024 • edited Loading

yimingjfe commented Dec 19, 2024

yimingjfe commented Dec 19, 2024

Version

Details

Reproduce link

Reproduce Steps

[Bug]: 使用按需 ua，自定义 node server host spa 资源， http://localhost:8080/polyfill 报 500 错误 #6583

[Bug]: 使用按需 ua，自定义 node server host spa 资源， http://localhost:8080/polyfill 报 500 错误 #6583

xxnuo commented Dec 18, 2024 •

edited

Loading