Dear RW community,
As the title suggests I’m getting the following import error only in Netlify. Locally everything seems to work and looks fine. The I’m not sure what else I can try, please let me know if you have any ideas!
The error started after I renamed the component (and directory), but as far as I can tell I changed all occurrences (screenshot below).
Thank you!
// Netlify build output
ERROR in ./src/components/ChCustomersCell/ChCustomersCell.tsx 9:0-51
Module not found: Error: Can't resolve '../ChCustomersTable' in '/opt/build/repo/web/src/components/ChCustomersCell'
resolve '../ChCustomersTable' in '/opt/build/repo/web/src/components/ChCustomersCell'
using description file: /opt/build/repo/web/package.json (relative path: ./src/components/ChCustomersCell)
Field 'browser' doesn't contain a valid alias configuration
using description file: /opt/build/repo/web/package.json (relative path: ./src/components/ChCustomersTable)
no extension
Field 'browser' doesn't contain a valid alias configuration
/opt/build/repo/web/src/components/ChCustomersTable doesn't exist
.wasm
Field 'browser' doesn't contain a valid alias configuration
/opt/build/repo/web/src/components/ChCustomersTable.wasm doesn't exist
.mjs
Field 'browser' doesn't contain a valid alias configuration
/opt/build/repo/web/src/components/ChCustomersTable.mjs doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/opt/build/repo/web/src/components/ChCustomersTable.js doesn't exist
.jsx
Field 'browser' doesn't contain a valid alias configuration
/opt/build/repo/web/src/components/ChCustomersTable.jsx doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
/opt/build/repo/web/src/components/ChCustomersTable.ts doesn't exist
.tsx
Field 'browser' doesn't contain a valid alias configuration
/opt/build/repo/web/src/components/ChCustomersTable.tsx doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
/opt/build/repo/web/src/components/ChCustomersTable.json doesn't exist
as directory
/opt/build/repo/web/src/components/ChCustomersTable doesn't exist
@ ./src/pages/HomePage/HomePage.tsx 28:0-79 78:38-53
@ ./src/Routes.tsx
@ ./src/App.tsx 5:0-30 15:159-165
@ ../node_modules/@redwoodjs/web/dist/entry/index.js
webpack 5.72.1 compiled with 1 error in 19299 ms
[21:47:19] Building Web... [failed]
11:47:19 PM: [21:47:19] → Command failed with exit code 1: yarn cross-env NODE_ENV=production webpack --config /opt/build/repo/node_modules/@redwoodjs/core/config/webpack.production.js (https://ntl.fyi/exit-code-1)
11:47:19 PM: Command failed with exit code 1: yarn cross-env NODE_ENV=production webpack --config /opt/build/repo/node_modules/@redwoodjs/core/config/webpack.production.js
Quick screenshot to show that the files actually exist where they should:
And the full component:
import type { ChCustomersQuery } from 'types/graphql'
import type { CellSuccessProps, CellFailureProps } from '@redwoodjs/web'
import ChCustomersTable from '../ChCustomersTable/ChCustomersTable'
export const QUERY = gql`
query GetChCustomersQuery {
chCustomers: getChCustomers {
chCustomers {
id
name
updatedAt
status
}
}
}
`
export const Loading = () => <div>Loading...</div>
export const Empty = () => <div>Empty</div>
export const Failure = ({ error }: CellFailureProps) => (
<div style={{ color: 'red' }}>Error: {error.message}</div>
)
export const Success = ({
chCustomers,
}: CellSuccessProps<ChCustomersQuery>) => {
return (
<>
<ChCustomersTable customers={chCustomers} />
</>
)
}