rsnext/packages/next/build/webpack/plugins/wellknown-errors-plugin/webpackModuleError.ts
Steven 9e1d04dd93
Add pretty error when image import is invalid format (#41267)
This PR improves the error message when an invalid image is imported. It
also ensures the page that imported the image is displayed.

### Before

<img width="1062" alt="image"
src="https://user-images.githubusercontent.com/229881/194674177-70f4ae73-64c9-497f-8e20-098f949a4219.png">


### After

<img width="1002" alt="image"
src="https://user-images.githubusercontent.com/229881/194716285-27dd3455-60a9-440f-a50e-eff8d49e764b.png">

Co-authored-by: Balázs Orbán <info@balazsorban.com>
2022-10-11 18:22:13 +02:00

106 lines
2.6 KiB
TypeScript

import { readFileSync } from 'fs'
import * as path from 'path'
import type { webpack } from 'next/dist/compiled/webpack/webpack'
import { getBabelError } from './parseBabel'
import { getCssError } from './parseCss'
import { getScssError } from './parseScss'
import { getNotFoundError, getImageError } from './parseNotFoundError'
import { SimpleWebpackError } from './simpleWebpackError'
import isError from '../../../../lib/is-error'
import { getRscError } from './parseRSC'
function getFileData(
compilation: webpack.Compilation,
m: any
): [string, string | null] {
let resolved: string
let ctx: string | null = compilation.compiler?.context ?? null
if (ctx !== null && typeof m.resource === 'string') {
const res = path.relative(ctx, m.resource).replace(/\\/g, path.posix.sep)
resolved = res.startsWith('.') ? res : `.${path.posix.sep}${res}`
} else {
const requestShortener = compilation.requestShortener
if (typeof m?.readableIdentifier === 'function') {
resolved = m.readableIdentifier(requestShortener)
} else {
resolved = m.request ?? m.userRequest
}
}
if (resolved) {
let content: string | null = null
try {
content = readFileSync(
ctx ? path.resolve(ctx, resolved) : resolved,
'utf8'
)
} catch {}
return [resolved, content]
}
return ['<unknown>', null]
}
export async function getModuleBuildError(
compiler: webpack.Compiler,
compilation: webpack.Compilation,
input: any
): Promise<SimpleWebpackError | false> {
if (
!(
typeof input === 'object' &&
(input?.name === 'ModuleBuildError' ||
input?.name === 'ModuleNotFoundError') &&
Boolean(input.module) &&
isError(input.error)
)
) {
return false
}
const err: Error = input.error
const [sourceFilename, sourceContent] = getFileData(compilation, input.module)
const notFoundError = await getNotFoundError(
compilation,
input,
sourceFilename
)
if (notFoundError !== false) {
return notFoundError
}
const imageError = await getImageError(compilation, input, err)
if (imageError !== false) {
return imageError
}
const babel = getBabelError(sourceFilename, err)
if (babel !== false) {
return babel
}
const css = getCssError(sourceFilename, err)
if (css !== false) {
return css
}
const scss = getScssError(sourceFilename, sourceContent, err)
if (scss !== false) {
return scss
}
const rsc = getRscError(
sourceFilename,
err,
input.module,
compilation,
compiler
)
if (rsc !== false) {
return rsc
}
return false
}