I have stumbled in deploying my next.js app through vercel. It works pletely well in local using mand '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 pile.
18:07:58.299    ModuleNotFoundError: Module not found: Error: Can't resolve '../ponents/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 ponent 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 ponent, using proper path for it and not omitting .js extension, too. I changed all the ponents` 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 '../ponents/layout.js';
import modifyData from '../lib/data_modifier.js'

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


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.

I have stumbled in deploying my next.js app through vercel. It works pletely well in local using mand '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 pile.
18:07:58.299    ModuleNotFoundError: Module not found: Error: Can't resolve '../ponents/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 ponent 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 ponent, using proper path for it and not omitting .js extension, too. I changed all the ponents` 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 '../ponents/layout.js';
import modifyData from '../lib/data_modifier.js'

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


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.

• javascript
• reactjs
• webpack
• next.js

• Do you get any errors when running npm run build locally? – juliomalves Commented Jan 10, 2021 at 13:07
• No, it works fine when running npm run build. Frankly speaking, I didn't know the mand so that I implemented it for the first time. Anyway, there wasn't any error, though. – kyle ausk Commented Jan 10, 2021 at 13:29

3 Answers 3

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.

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

1. Make sure you are exporting and importing the right files
2. Run git rm -r --cached . this mand 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 mit -m "mit message here!!!"
5. Run git push origin 'github branch name', to push code to github

I had a similar problem with my first deployment.

I tried to change the ponent 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.