汇总无法解析导入 \"jss-plugin-{}\"答案

【问题标题】：Rollup failed to resolve import "jss-plugin-{}"汇总无法解析导入 \"jss-plugin-{}\"
【发布时间】：2022-10-25 17:36:05
【问题描述】：

一段时间以来，我一直在用头撞这个。我的 Vite ReactJS 项目构建没有问题，也没有做出重大改变。它在本地运行良好，但是当我使用 yarn build 时，出现以下错误：

[vite]: Rollup failed to resolve import "jss-plugin-{}" from "node_modules/@material-ui/styles/esm/jssPreset/jssPreset.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
error during build:
Error: [vite]: Rollup failed to resolve import "jss-plugin-{}" from "node_modules/@material-ui/styles/esm/jssPreset/jssPreset.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
    at onRollupWarning (file:///Users/ryanwalter/Dev-Repos/Pelham/liquified/node_modules/vite/dist/node/chunks/dep-557f29e6.js:45907:19)
    at onwarn (file:///Users/ryanwalter/Dev-Repos/Pelham/liquified/node_modules/vite/dist/node/chunks/dep-557f29e6.js:45705:13)
    at Object.onwarn (file:///Users/ryanwalter/Dev-Repos/Pelham/liquified/node_modules/rollup/dist/es/shared/rollup.js:23225:13)
    at ModuleLoader.handleResolveId (file:///Users/ryanwalter/Dev-Repos/Pelham/liquified/node_modules/rollup/dist/es/shared/rollup.js:22352:26)
    at file:///Users/ryanwalter/Dev-Repos/Pelham/liquified/node_modules/rollup/dist/es/shared/rollup.js:22313:26
error Command failed with exit code 1.

我已经尝试更新我的 vite.config.js 文件，因为一些帖子建议使用以下内容：

vite config
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  define: {
    "global": {},
  },
  resolve: {
    alias: {
      './runtimeConfig': './runtimeConfig.browser',
      'jss-plugin-{}': 'jss-plugin-global'
    },
  },
  plugins: [
    react()
  ]
})

不幸的是，即使这确实允许构建我的应用程序，我在生产中也会遇到错误：未捕获的 TypeError: {} is not a function。

这里的任何建议将不胜感激。我很乐意分享任何必要的东西。

这是我的 package.json：

{
  "name": "liquified",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@aws-amplify/ui-react": "^3.5.1",
    "@emotion/react": "^11.10.0",
    "@emotion/styled": "^11.10.0",
    "@material-ui/core": "^4.12.4",
    "@mui/icons-material": "^5.8.4",
    "@mui/material": "^5.10.1",
    "aws-amplify": "^4.3.35",
    "ethers": "^5.7.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.17",
    "@types/react-dom": "^18.0.6",
    "@vitejs/plugin-react": "^2.1.0",
    "autoprefixer": "^10.4.8",
    "postcss": "^8.4.16",
    "tailwindcss": "^3.1.8",
    "vite": "^3.0.7"
  }
}

这是我的 index.html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Liquified App</title>
    <script type="module" crossorigin src="/assets/index.671813cb.js"></script>
    <link rel="stylesheet" href="/assets/index.ac81934a.css">
  </head>
  <body>
    <div id="root"></div>
    
  </body>
</html>

需要帮助请叫我。这是困难的一个！

【问题讨论】：

标签： reactjs vite jss

【解决方案1】：

我找到了一个我不喜欢的解决方案，但它有效！

我使用这个 vite.config.js 文件：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      './runtimeConfig': './runtimeConfig.browser',
    },
  },
  plugins: [
    react()
  ]
})

问题是它不会使用这个文件在本地运行，因为我得到了 Uncaught ReferenceError: global is not defined 错误而没有定义全局。例如，在本地工作的代码是：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  // TODO: comment out before pushing to production
  define: {
    "global": {},
  },
  resolve: {
    alias: {
      './runtimeConfig': './runtimeConfig.browser',
    },
  },
  plugins: [
    react()
  ]
})

当我推动生产时，我会评论它。

【讨论】：

【解决方案2】：

您的解决方案是正确的，但手动更改是一件坏事，特别是如果您想在 CI/CD 管道中使用它。这里提供了一个更清洁、更简单的解决方案：https://github.com/bevacqua/dragula/issues/602#issuecomment-1109840139

<!-- your index.html -->
<script>
var global = global || window
</script>

你可以在这里找到它的解释：https://github.com/vitejs/vite/issues/2778#issuecomment-810086159

Vite 没有像 Webpack 4 那样包含用于 Node 变量的垫片（在版本 5 中，垫片也需要由用户添加）

我喜欢这里的解释：https://stackoverflow.com/a/73208485/4556219

问题是因为 vite 没有像 webpack 那样在 window 中定义一个全局字段。有些库依赖它，因为 webpack 比 vite 更老。

【讨论】：