Netlify Webpack build failed: module not found due to dynamic import (code splitting)

Netlify build failed…

12:03:49 AM: ERROR in ./src/admin/views/index.ts
12:03:49 AM: Module not found: Error: Can't resolve './home/Home' in '/opt/build/repo/client/src/admin/views'
12:03:49 AM:  @ ./src/admin/views/index.ts 16:22-18:16
12:03:49 AM:  @ ./src/Root.tsx
12:03:49 AM:  @ ./src/index.tsx
12:03:49 AM: ERROR in ./src/app/views/index.ts
12:03:49 AM: Module not found: Error: Can't resolve './home/Home' in '/opt/build/repo/client/src/app/views'
12:03:49 AM:  @ ./src/app/views/index.ts 13:9-15:16
12:03:49 AM:  @ ./src/Root.tsx
12:03:49 AM:  @ ./src/index.tsx

and my code…as you can see, I am using dynamic import with code splitting

export const Home = lazy(() => {
  return Promise.all([
    import(/* webpackChunkName: 'admin-home' */ './home/Home'),
    new Promise(resolve => setTimeout(resolve, DELAY)),
  ]).then(([moduleExports]) => moduleExports);
});

export const Auth = lazy(() => {
  return Promise.all([
    import(/* webpackChunkName: 'admin-auth' */ './auth/Auth'),
    new Promise(resolve => setTimeout(resolve, DELAY)),
  ]).then(([moduleExports]) => moduleExports);
});

This succeeds in local build, but failed in Netlify, have tried both lowercase and pascal case filenames :frowning:

Failed build: https://app.netlify.com/sites/wenwentips-stage/deploys/5d6f62dfd884070008f339f7

Hi there,

Seems likely this is due to one or two of these things:

  1. case sensitivity problems: [Common Issue]: Frequently encountered problems during builds (#3 in the list)
  2. the path - do you really have files in home/home/* instead of just home/*?

Thanks for your reply. I have tried to convert them to lowercase, but still same issue. My other react component files are named PascalCase, and Webpack can recognize them. So I don’t think it’s case sensitivity problems. It’s just somehow, Webpack couldnot recognize path in dynamic import

Here is my folder structure, as you can see, home/Home is there

ok, so as I said:

do you really have files in home/home/* instead of just home/* ?

The answer from your screenshot is, no, you don’t :slight_smile: so change that path in your code or output from your build?

I dont think changing to ./home' would work. The file I am trying to import isHome.tsxand the import file isindex.ts. The relative path toHome.tsxis./home/Home`. I dont think I fully understand your point

@zicodeng do you have a public repo for this project that we can take a look at?