ModuleNotFoundError: Module not found: Error: Can't resolve '../components/charts/be.js' in '/vercel/workpath0/my-app/pages'

user_13971694 0
Viewed 3987

I have stumbled in deploying my next.js app through vercel. It works completely well in local using command 'npm run dev'. But when I tried to deploy it through vercel with Github remote repository, it throws error like below

18:07:58.299    Failed to compile.
18:07:58.299    ModuleNotFoundError: Module not found: Error: Can't resolve '../components/charts/be.js' in '/vercel/workpath0/my-app/pages'
18:07:58.299    > Build error occurred
18:07:58.300    Error: > Build failed because of webpack errors
18:07:58.300        at /vercel/workpath0/my-app/node_modules/next/dist/build/index.js:15:918
18:07:58.300        at processTicksAndRejections (internal/process/task_queues.js:97:5)
18:07:58.300        at async /vercel/workpath0/my-app/node_modules/next/dist/build/tracer.js:1:525

My be.js component never used any server side methods or modules but only a library using in client side.

import { PureComponent } from "react";
import { Treemap, Tooltip } from 'recharts';

// some internal code

export default class BE extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            data : this.props.data
        }
    }
    render() {
        return (
            <Treemap
                width={500}
                height={300}
                data={this.state.data}
                dataKey="size"
                ratio={4 / 3}
                stroke="#fff"
                fill="#8884d8"
                content={<CustomizedContent colors={COLORS} />}
                style={{marginTop:50}}
            >
                <Tooltip content={<CustomTooltip/>}/>
            </Treemap>
        );
      }
}

And also in index.js which imports the be.js component, using proper path for it and not omitting .js extension, too. I changed all the components` name to lower case just in case error occurs regarding Case.

import Head from 'next/head'
import styles from '../styles/Home.module.css'
import fs from 'fs';
import Layout from '../components/layout.js';
import modifyData from '../lib/data_modifier.js'

import BE from '../components/charts/be.js';
// there are more imported components


export default function Home({ data }) {
  // internal code. no error
}
export async function getStaticProps() {
  const rawData = fs.readFileSync('./dataset/test.json');
  const data = modifyData(JSON.parse(rawData));
  return {
    props: {
      data
    }
  }
}

My app is only a simple single page, and configs are pretty simple as well. Just in case you should look through my version of dependencies, I attach it below.

{
  "dependencies": {
    "bootstrap": "^4.5.3",
    "fs": "0.0.1-security",
    "next": "^10.0.5",
    "react": "^16.13.1",
    "react-bootstrap": "^1.4.0",
    "react-dom": "^16.13.1",
    "recharts": "^1.8.5"
  }
}

I used 'fs' module only inside of getStaticProps() in index.js.

webpack next.js reactjs javascript
3 Answers

Your remote branch may not be updated with the new names after you change to lower case because the name not changed, only lower case characters. In Vercel and other server that use Linux will show the ModuleNotFoundError, because in Linux the same folder or file with lower case and Upper case are different.

Fix the names in the remote branch to fix error.

user_144588690

I recently had this same issue. So basically, I used wrong way of importing my layout component. I wrote import Layout from 'path-to-component/layout' but I had export default function Layout()... in my Layout component. My fix:

  1. Make sure you are exporting and importing the right files
  2. Run git rm -r --cached . this command will remove all cached files in your git.
  3. After removing all cached files, we need to add all our files to git again with the updates. So run git add --all .
  4. Run git commit -m "commit message here!!!"
  5. Run git push origin 'github branch name', to push code to github
user_142181930

I had a similar problem with my first deployment.

I tried to change the component name, import path (full with .js), different providers, etc...

The only thing that helped me was deleting Git Repository and pushing a new one from Visual Studio Code. After that, the build was a success on both Vercel and DigitalOcean.

user_118035420
Related