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

Question

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.

question from:https://stackoverflow.com/questions/65651791/modulenotfounderror-module-not-found-error-cant-resolve-components-chart

Answer 1

Waitting for answers