这将是一个棘手的问题,因为这里有很多事情要做。因此,我会尽可能简洁,不要让你负担太多的信息。
我目前正在放弃一个体面的大小创建React应用程序Monorepo管理与螺栓包管理器和Yarn到一个nx monorepo管理与维特的过程。
我已经创建了一个空白项目,并开始一个一个地移动项目。我能够成功地迁移故事书项目(Webpack),但不能迁移我试图在Vite中运行的主应用程序:
我目前遇到decodeURI格式错误的问题。我不知道是什么原因造成的。
C:\Users\asili\Documents\Programming\schon\node_modules\vite\dist\node\chunks\dep-3daf770c.js:57562
let url = decodeURI(removeTimestampQuery(req.url)).replace(NULL_BYTE_PLACEHOLDER, '\0');
URIError: URI malformed
at decodeURI (<anonymous>)
at viteTransformMiddleware (C:\Users\asili\Documents\Programming\schon\node_modules\vite\dist\node\chunks\dep-3daf770c.js:57562:19)
at call (C:\Users\asili\Documents\Programming\schon\node_modules\vite\dist\node\chunks\dep-3daf770c.js:46063:7)
at next (C:\Users\asili\Documents\Programming\schon\node_modules\vite\dist\node\chunks\dep-3daf770c.js:46007:5)
at C:\Users\asili\Documents\Programming\schon\node_modules\vite\dist\node\chunks\dep-3daf770c.js:57212:28
at viteServePublicMiddleware (C:\Users\asili\Documents\Programming\schon\node_modules\vite\dist\node\chunks\dep-3daf770c.js:57251:9)
at call (C:\Users\asili\Documents\Programming\schon\node_modules\vite\dist\node\chunks\dep-3daf770c.js:46063:7)
at next (C:\Users\asili\Documents\Programming\schon\node_modules\vite\dist\node\chunks\dep-3daf770c.js:46007:5)
at next (C:\Users\asili\Documents\Programming\schon\node_modules\vite\dist\node\chunks\dep-3daf770c.js:45985:14)
at next (C:\Users\asili\Documents\Programming\schon\node_modules\vite\dist\node\chunks\dep-3daf770c.js:45985:14)
这是我的包裹
{
"name": "schon",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"start": "nx serve",
"build": "nx build",
"test": "nx test"
},
"private": true,
"dependencies": {
"@apollo/client": "^3.5.6",
"@auth0/auth0-react": "^1.8.0",
"@aws-sdk/client-s3": "^3.44.0",
"@date-io/date-fns": "^2.11.0",
"@material-table/core": "^4.3.11",
"@material-ui/core": "^4.12.3",
"@material-ui/icons": "^4.11.2",
"@material-ui/lab": "^4.0.0-alpha.60",
"@material-ui/pickers": "^3.3.10",
"@material-ui/system": "^4.12.1",
"@nivo/calendar": "^0.74.0",
"@nivo/core": "^0.74.0",
"@nivo/line": "^0.74.0",
"@nivo/tooltip": "^0.74.0",
"@reach/router": "^1.3.4",
"auth0-js": "^9.18.0",
"aws-appsync-auth-link": "^3.0.7",
"aws-appsync-subscription-link": "^3.0.9",
"aws-sdk": "^2.1046.0",
"clsx": "^1.1.1",
"core-js": "^3.6.5",
"d3-array": "^3.1.1",
"date-fns": "^2.27.0",
"dotenv": "^10.0.0",
"exceljs": "^4.3.0",
"file-saver": "^2.0.5",
"formik": "^2.2.9",
"formik-persist": "^1.1.0",
"framer-motion": "^5.4.5",
"fraql": "^1.2.1",
"graphql": "^16.1.0",
"husky": "^7.0.4",
"immer": "^9.0.7",
"linkifyjs": "^3.0.4",
"lodash": "^4.17.21",
"logrocket": "^2.1.2",
"material-table": "^1.69.3",
"msw": "^0.36.3",
"password-validator": "^5.2.1",
"randomcolor": "^0.6.2",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-dropzone-uploader": "^2.11.0",
"react-elastic-carousel": "^0.11.5",
"react-error-boundary": "^3.1.4",
"react-google-docs-viewer": "^1.0.1",
"react-icons": "^4.3.1",
"react-intersection-observer": "^8.32.5",
"react-lazy-load-image-component": "^1.5.1",
"react-loading-skeleton": "^3.0.1",
"react-prerendered-component": "^1.2.4",
"regenerator-runtime": "0.13.7",
"stream-browserify": "^3.0.0",
"styled-components": "^5.3.3",
"suneditor": "^2.41.3",
"suneditor-react": "^3.3.1",
"sw-precache": "^5.2.1",
"tiny-slider-react": "^0.5.3",
"tslib": "^2.0.0",
"use-debounce": "^7.0.1",
"uuid": "^8.3.2",
"validate-password": "^1.0.4",
"yup": "^0.32.11"
},
"devDependencies": {
"@angular-devkit/schematics": "^13.0.4",
"@babel/core": "7.12.13",
"@babel/preset-typescript": "7.12.13",
"@nrwl/cli": "13.2.4",
"@nrwl/cypress": "13.2.4",
"@nrwl/eslint-plugin-nx": "13.2.4",
"@nrwl/jest": "13.2.4",
"@nrwl/linter": "13.2.4",
"@nrwl/node": "^13.2.4",
"@nrwl/nx-cloud": "latest",
"@nrwl/react": "13.2.4",
"@nrwl/storybook": "^13.3.0",
"@nrwl/tao": "^13.2.4",
"@nrwl/web": "13.2.4",
"@nrwl/workspace": "^13.2.4",
"@storybook/addon-actions": "^6.4.9",
"@storybook/addon-essentials": "~6.3.0",
"@storybook/addon-knobs": "^6.4.0",
"@storybook/addon-links": "^6.4.9",
"@storybook/addon-storysource": "^6.4.9",
"@storybook/builder-webpack5": "~6.3.0",
"@storybook/manager-webpack5": "~6.3.0",
"@storybook/react": "~6.3.0",
"@svgr/webpack": "^5.4.0",
"@testing-library/react": "12.1.2",
"@testing-library/react-hooks": "7.0.2",
"@types/auth0-js": "^9.14.5",
"@types/jest": "27.0.2",
"@types/node": "14.14.33",
"@types/react": "17.0.30",
"@types/react-dom": "17.0.9",
"@types/react-lazy-load-image-component": "^1.5.2",
"@types/tiny-slider-react": "^0.3.3",
"@types/uuid": "^8.3.3",
"@types/yup": "^0.29.13",
"@typescript-eslint/eslint-plugin": "~4.33.0",
"@typescript-eslint/parser": "~4.33.0",
"@vitejs/plugin-react-refresh": "^1.3.1",
"babel-jest": "27.2.3",
"babel-loader": "8.1.0",
"cypress": "^8.3.0",
"eslint": "7.32.0",
"eslint-config-prettier": "8.1.0",
"eslint-plugin-cypress": "^2.10.3",
"eslint-plugin-import": "2.25.2",
"eslint-plugin-jsx-a11y": "6.4.1",
"eslint-plugin-react": "7.26.1",
"eslint-plugin-react-hooks": "4.2.0",
"jest": "27.2.3",
"nx-plugin-vite": "^1.1.0",
"prettier": "^2.3.1",
"react-test-renderer": "17.0.2",
"storybook-theme-toggle": "^0.1.2",
"ts-jest": "27.0.5",
"typescript": "~4.4.3",
"url-loader": "^3.0.0",
"vite": "^2.7.1",
"vite-tsconfig-paths": "^3.3.17"
}
}
基本tsconfig.json:
{
"compileOnSave": false,
"compilerOptions": {
"rootDir": ".",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"importHelpers": true,
"target": "es2015",
"module": "esnext",
"lib": ["dom", "dom.iterable", "esnext"],
"skipLibCheck": true,
"skipDefaultLibCheck": true,
"baseUrl": ".",
"paths": {
"@schon/typings": ["libs/components/src/typings/index.ts"],
"@schon/components": ["libs/components/src/index.ts"],
"@schon/utils": ["libs/components/src/utils/index.ts"]
}
},
"exclude": ["node_modules", "tmp"]
}
下面是一个例子:
"extends": "../../tsconfig.base.json",
"compilerOptions": {
"target": "es2017",
"useDefineForClassFields": true,
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"allowJs": true,
"skipLibCheck": false,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "ESNext",
"moduleResolution": "Node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"noFallthroughCasesInSwitch": true
},
"include": ["src"]
}
以下是vite.config.ts:
import { defineConfig } from 'vite';
import reactRefresh from '@vitejs/plugin-react-refresh';
import tsconfigPaths from 'vite-tsconfig-paths';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [reactRefresh(), tsconfigPaths()],
resolve: {
alias: {
stream: 'stream-browserify',
},
},
});
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<link
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
rel="stylesheet"
/>
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Ayuda a la gestión administrativa y a la
evaluación del estudiante bajo el nuevo sistema de competencias. ¡Regístrate ya!"
/>
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>
Schon - Plataforma educativa para evaluar a los estudiantes usando el
sistema de competencias.
</title>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script
async
src="https://www.googletagmanager.com/gtag/js?id=UA-174022724-1"
></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'UA-174022724-1');
</script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<!-- CUSTOM DOWN BELOW-->
<!--
add entry for snowpack, only used in dev, it is pruned in production.
-->
<script type="module" src="/src/index.tsx"></script>
</body>
</html>
有什么想法吗?我会尝试开始一个新的项目,并安装依赖项一个接一个...如果这不工作,那么我会尝试Snowpack代替。
Webpack需要大约3-4分钟来启动开发服务器,这对开发来说是无法忍受的。
编辑:我想补充的是,我只添加了一个空的React文件(在呈现DOM之后),它将加载该块并向我抛出错误。
2条答案
按热度按时间zkure5ic1#
更新:
Nx现在添加了vite支持,并且在15.2. https://nx.dev/packages/vite版本中发布了生成器。
我们将从Nxext中删除vite和react,任何使用Nxext的用户都将迁移到NX vite
以前的建议:
我认为这个项目可能对你有好处https://nxext.dev/docs/react/overview。我们最近刚刚为NX写了vite插件,并得到了React工作。
如果您需要任何帮助,我很乐意为您配对程序来解决此问题
rseugnpd2#
一切就绪!!
这个问题(确实)是错误的index.html。不要只是从Webpack发布你的
index.html
,因为它不会工作。我把它恢复到维特的那个,它起作用了!