文章/答案/技术大牛

发布

社区首页 >问答首页 >将(Webpack)迁移到decodeURI格式错误的NX和Vite - URI

问将(Webpack)迁移到decodeURI格式错误的NX和Vite - URI
EN

Stack Overflow用户

提问于 2021-12-10 18:21:22

回答 2查看 2.9K关注 0票数 1

这将是一个棘手的问题，因为这里发生了很多事情。因此，我将尽量简明扼要地避免过多的信息给你带来负担。

我目前正在放弃一个体面大小的，它由Bolt Package Manager和Yarn管理，现在使用Vite管理nx。

我创建了一个空白项目，并开始逐个移动项目。我成功地移植了一个故事书项目(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)

这是我的package.json：

{
  "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"]
}

这是vite的tsconfig.json：

  "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>

有什么想法吗？我将尝试启动一个新项目并逐一安装依赖项..。如果不起作用，那我就试试雪包。

Webpack大约需要3-4分钟才能启动开发服务器，这对于发展来说是无法容忍的。

编辑:我想补充的是，我只添加了一个空的React文件(在呈现DOM之后)，它将加载这个块并抛出错误。

typescript

monorepo

vite

回答 2

Stack Overflow用户

发布于 2021-12-21 17:04:27

更新：

Nx现在增加了vite支持和在版本15.2中发布的生成器。https://nx.dev/packages/vite

我们正在从Nxext中删除vite并作出反应，任何使用nxext的用户都将迁移到nxext。

先前的建议：

注:我是Nxext的核心撰稿人

我认为这个项目可能对你有好处，https://nxext.dev/docs/react/overview。我们最近刚刚为NX编写了vite插件，并开始使用react。

如果您需要帮助，我很乐意为您解决这一问题。

票数 4

Stack Overflow用户

发布于 2021-12-14 14:21:01

准备好了！！

问题是(实际上)错误的index.html。不要仅仅发布Webpack的index.html，因为它不起作用。

我把它从Vite恢复到了Vite，它起了作用！

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70308850

复制

相似问题

问将(Webpack)迁移到decodeURI格式错误的NX和Vite - URI
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将(Webpack)迁移到decodeURI格式错误的NX和Vite - URIEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将(Webpack)迁移到decodeURI格式错误的NX和Vite - URI
EN