Skip to content

Commit

Permalink
Add file, positional info to crashes in webpack loader
Browse files Browse the repository at this point in the history
Closes GH-2124.

Reviewed-by: Titus Wormer <tituswormer@gmail.com>
  • Loading branch information
Twipped authored Sep 8, 2022
1 parent 56d7066 commit 9d2aa80
Show file tree
Hide file tree
Showing 2 changed files with 58 additions and 7 deletions.
16 changes: 12 additions & 4 deletions packages/loader/lib/index.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
/**
* @typedef {import('vfile').VFileCompatible} VFileCompatible
* @typedef {import('vfile').VFile} VFile
* @typedef {import('vfile-message').VFileMessage} VFileMessage
* @typedef {import('@mdx-js/mdx').CompileOptions} CompileOptions
* @typedef {Pick<CompileOptions, 'SourceMapGenerator'>} Defaults
* @typedef {Omit<CompileOptions, 'SourceMapGenerator'>} Options
Expand All @@ -10,6 +11,7 @@
*/

import {createHash} from 'node:crypto'
import path from 'node:path';
import {SourceMapGenerator} from 'source-map'
import {createFormatAwareProcessors} from '@mdx-js/mdx/lib/util/create-format-aware-processors.js'

Expand Down Expand Up @@ -62,10 +64,16 @@ export function loader(value, callback) {
map.set(hash, process)
}

process({value, path: this.resourcePath}).then((file) => {
callback(null, file.value, file.map)
return file
}, callback)
process({value, path: this.resourcePath}).then(
(file) => {
callback(null, file.value, file.map)
},
(/** @type VFileMessage */ e) => {
const fpath = path.relative(this.context, this.resourcePath);
e.message = `${fpath}:${e.name}: ${e.message}`;
callback(e);
}
)
}

/**
Expand Down
49 changes: 46 additions & 3 deletions packages/loader/test/index.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,49 @@ test('@mdx-js/loader', async () => {
// Setup.
const base = new URL('.', import.meta.url)

await fs.writeFile(
new URL('webpack.mdx', base),
'# Hello, {<Message />'
)

// Errors.
const failedResult = await promisify(webpack)({
// @ts-expect-error To do: webpack types miss support for `context`.
context: fileURLToPath(base),
entry: './webpack.mdx',
mode: 'none',
module: {
rules: [
{
test: /\.mdx$/,
use: [fileURLToPath(new URL('../index.cjs', import.meta.url))]
}
]
},
output: {
path: fileURLToPath(base),
filename: 'react.cjs',
libraryTarget: 'commonjs'
}
})

const error = failedResult?.toJson()?.errors?.[0]

assert.ok(error);
assert.equal(
error.message,
`Module build failed (from ../index.cjs):
webpack.mdx:1:22: Unexpected end of file in expression, expected a corresponding closing brace for \`{\``,
'received expected error message'
)

await fs.writeFile(
new URL('webpack.mdx', base),
'export const Message = () => <>World!</>\n\n# Hello, <Message />'
)

// React.
await promisify(webpack)({
const reactBuild = await promisify(webpack)({
// @ts-expect-error To do: webpack types miss support for `context`.
context: fileURLToPath(base),
entry: './webpack.mdx',
Expand All @@ -48,6 +84,8 @@ test('@mdx-js/loader', async () => {
}
})

assert.not.ok(reactBuild?.hasErrors())

// One for ESM loading CJS, one for webpack.
const modReact = /** @type {{default: {default: MDXContent}}} */ (
// @ts-expect-error file is dynamically generated
Expand All @@ -63,7 +101,7 @@ test('@mdx-js/loader', async () => {
await fs.unlink(new URL('react.cjs', base))

// Preact and source maps
await promisify(webpack)({
const preactBuild = await promisify(webpack)({
// @ts-expect-error To do: webpack types miss support for `context`.
context: fileURLToPath(base),
entry: './webpack.mdx',
Expand All @@ -89,6 +127,9 @@ test('@mdx-js/loader', async () => {
}
})

assert.not.ok(preactBuild?.hasErrors())


// One for ESM loading CJS, one for webpack.
const modPreact = /** @type {{default: {default: PreactComponent}}} */ (
// @ts-expect-error file is dynamically generated.
Expand All @@ -110,7 +151,7 @@ test('@mdx-js/loader', async () => {
await fs.unlink(new URL('preact.cjs', base))

// Vue.
await promisify(webpack)({
const vueBuild = await promisify(webpack)({
// @ts-expect-error To do: webpack types miss support for `context`.
context: fileURLToPath(base),
entry: './webpack.mdx',
Expand Down Expand Up @@ -140,6 +181,8 @@ test('@mdx-js/loader', async () => {
}
})

assert.not.ok(vueBuild?.hasErrors())

// One for ESM loading CJS, one for webpack.
const modVue = /** @type {{default: {default: VueComponent}}} */ (
// @ts-expect-error file is dynamically generated
Expand Down

1 comment on commit 9d2aa80

@vercel
Copy link

@vercel vercel bot commented on 9d2aa80 Sep 8, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

mdx – ./

mdx-git-main-mdx.vercel.app
mdxjs.com
mdx-mdx.vercel.app
v2.mdxjs.com

Please sign in to comment.