CODEWITHSUNDEEP
reactjsvitejss
Ryan Walter
Ryan Walter

Reputation: 21

Rollup failed to resolve import "jss-plugin-{}"

I've been banging my head against this one for a while. I had my Vite ReactJS project building with no problems, and have not made significant changes. It runs fine on local, but when I use yarn build, I get the following 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`
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.

I've tried updating my vite.config.js file as some posts had suggested with the following:

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()
  ]
})

Unfortunately, even though this does allow my app to build, I get an error in production: uncaught TypeError: {} is not a function.

Any advise here would be appreciated. I'm happy to share anything necessary.

Here's my 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"
  }
}

Here's my 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>

Let me know if you need anything else. This is a tough one!

Upvotes: 1

Views: 6204

Answers (4)

Moises Castillo
Moises Castillo

Reputation: 1

try this it work for me.

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

export default defineConfig(({ command }) => {
  if (command === 'serve') {
    return {
      plugins: [react()],
      define: {
        global: {},
      },
    };
  }
  if (command === 'build') {
    return {
      plugins: [react()],
      build: {
        chunkSizeWarningLimit: 1000,
      },
    };
  }
})

Upvotes: 0

Anup
Anup

Reputation: 11

Removing below block form vite.config.js helped me

define: { "global": {}, },

However, I am finding a solution where we can dynamically use vite.config.js file or it's contents, as it's not working with above code block during local dev run

Upvotes: 1

Ahmed Rafik Ibrahim
Ahmed Rafik Ibrahim

Reputation: 547

Your solution is correct, yet manual changes are a bad thing especially if you want to use it in a CI/CD pipeline. A cleaner and simpler solution was provided here: https://github.com/bevacqua/dragula/issues/602#issuecomment-1109840139

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

You can find the explaination for it here: https://github.com/vitejs/vite/issues/2778#issuecomment-810086159

Vite doesn't include shims for Node variables like Webpack 4 does (in Version 5, shims also needs to be added by the user)

I like how it's explained here: https://stackoverflow.com/a/73208485/4556219

The problem is because vite doesn't define a global field in window as webpack does. And some libraries relies on it since webpack is much more older than vite.

Upvotes: 3

Ryan Walter
Ryan Walter

Reputation: 21

I found a solution that I don't love, but it works!

I use this vite.config.js file:

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

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

The problem is that it won't run locally with this file as I get the Uncaught ReferenceError: global is not defined error without defining global. For example, the code that works locally is:

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()
  ]
})

I will just comment it out when I push to production.

Upvotes: 1

Related Questions