Deploying a React project on Github has issue on '[vite]: Rollup failed to resolve import "framer-motion" from "/src/components/Services.jsx".'

Question

I am trying to build a React, TailwindCSS, Vite project on Github pages.

I have deployed projects before, and they worked properly, but I am encountering an issue during the build.

Rollup failed to resolve import "framer-motion" from "/home/runner/work/Refine/Refine/src/components/ Services ".

I have been trying to debug for a few hours now.

The repository link is https://github.com/JaredFunaro/Refine

I believe you can view the action reports to get a better idea of what is going on.

I tried to include more code in this but even if i formatted it as code stackoverflow kept yelling at me so sorry about that — ObsequiousNoodle
– ObsequiousNoodle, Commented Jun 5, 2023 at 22:05

Camilo · Accepted Answer · 2023-06-05 22:08:32Z

1

Looks like you are importing framer-motion but is not listed as a dependency.

Simple install it by running:

npm install framer-motion

answered Jun 5, 2023 at 22:08

Camilo

7,3065 gold badges45 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ObsequiousNoodle Over a year ago

Hm, Yes it wasn't listed under Dependencies in package.json but it was still working and utilizing that library locally when running a dev server, I went ahead and did what you said, and I also updated my vite config back to the basics without the rollout options, but I still got the error after deployment of it being unable to find index.css - "Failed to load resource: the server responded with a status of 404 ()"

Camilo Over a year ago

Not finding index.css is a differente problem, I'm glad that you could fix it. But the original question was related to framer-motion and it probably was because of it not being listed as a dependency

Camilo · Accepted Answer · 2023-06-05 22:31:29Z

0

So it wasn't able to find the css and other files because I forgot to add the 'base' option in vite config for deployment!

my original vite.config.js file was -

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

export default defineConfig({
  plugins: [react()],
})

I just had to update the base option to reflect the name of github repo, so the github repo was named "Refine" so I updated the vite.config.js file to say -

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

export default defineConfig({
  plugins: [react()],
  base: "/Refine/"
})

edited Jun 5, 2023 at 22:31

Camilo

7,3065 gold badges45 silver badges67 bronze badges

answered Jun 5, 2023 at 22:22

ObsequiousNoodle

134 bronze badges

Comments

Dev Preguiçosa · Accepted Answer · 2025-03-27 18:08:47Z

-1

  build: {
    rollupOptions: {
      external: [
        '@emotion/react',
        '@emotion/styled',
        'framer-motion'
      ],

answered Mar 27 at 18:08

Dev Preguiçosa

1

Collectives™ on Stack Overflow

Deploying a React project on Github has issue on '[vite]: Rollup failed to resolve import "framer-motion" from "/src/components/Services.jsx".'

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related