dc7290
Support ESM
Describe the bug
After following the getting started guide and building i get the message info - [next-export-optimize-images]: Configuration was not loaded. and the build doesnt appear to have optimized any images.
Here is my next.config.mjs
import rehypeShiki from '@leafac/rehype-shiki'
import nextMDX from '@next/mdx'
import { Parser } from 'acorn'
import jsx from 'acorn-jsx'
import escapeStringRegexp from 'escape-string-regexp'
import * as path from 'path'
import { recmaImportImages } from 'recma-import-images'
import remarkGfm from 'remark-gfm'
import { remarkRehypeWrap } from 'remark-rehype-wrap'
import remarkUnwrapImages from 'remark-unwrap-images'
import shiki from 'shiki'
import { unifiedConditional } from 'unified-conditional'
import withExportImages from 'next-export-optimize-images'
/** @type {import('next').NextConfig} */
const nextConfig = withExportImages({
pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'mdx'],
output:'export',
// images: {unoptimized:true},
path: {
fs: false,
path: false
},
experimental: {
webpackBuildWorker: true,
},
})
function remarkMDXLayout(source, metaName) {
let parser = Parser.extend(jsx())
let parseOptions = { ecmaVersion: 'latest', sourceType: 'module' }
return (tree) => {
let imp = `import _Layout from '${source}'`
let exp = `export default function Layout(props) {
return <_Layout {...props} ${metaName}={${metaName}} />
}`
tree.children.push(
{
type: 'mdxjsEsm',
value: imp,
data: { estree: parser.parse(imp, parseOptions) },
},
{
type: 'mdxjsEsm',
value: exp,
data: { estree: parser.parse(exp, parseOptions) },
},
)
}
}
export default async function config() {
let highlighter = await shiki.getHighlighter({
theme: 'css-variables',
})
let withMDX = nextMDX({
extension: /\.mdx$/,
options: {
recmaPlugins: [recmaImportImages],
rehypePlugins: [
[rehypeShiki, { highlighter }],
[
remarkRehypeWrap,
{
node: { type: 'mdxJsxFlowElement', name: 'Typography' },
start: ':root > :not(mdxJsxFlowElement)',
end: ':root > mdxJsxFlowElement',
},
],
],
remarkPlugins: [
remarkGfm,
remarkUnwrapImages,
[
unifiedConditional,
[
new RegExp(`^${escapeStringRegexp(path.resolve('src/app/blog'))}`),
[[remarkMDXLayout, '@/app/blog/wrapper', 'article']],
],
[
new RegExp(`^${escapeStringRegexp(path.resolve('src/app/work'))}`),
[[remarkMDXLayout, '@/app/work/wrapper', 'caseStudy']],
],
],
],
},
})
return withMDX(nextConfig)
}
My image component
import Image from 'next-export-optimize-images/image'
<Image
src={sourceImage}
className=""
alt="a tiny image."
height={'512'}
width={'465'}
/>
</div>
Desktop (please complete the following information):
- debian
- firefox
Additional context The error message:
> [email protected] build
> next build && next-export-optimize-images
info - [next-export-optimize-images]: Configuration was not loaded. (This i)
▲ Next.js 14.2.3
Creating an optimized production build ...
✓ Compiled successfully
✓ Linting and checking validity of types
✓ Collecting page data
✓ Generating static pages (10/10)
✓ Collecting build traces
✓ Finalizing page optimization
Route (app) Size First Load JS
┌ ○ / 4.41 kB 146 kB
├ ○ /_not-found 138 B 87.2 kB
├ ○ /about 361 B 142 kB
├ ○ /blog 363 B 142 kB
├ ○ /contact 516 B 127 kB
├ ○ /process 2.48 kB 135 kB
└ ○ /work 363 B 142 kB
+ First Load JS shared by all 87.1 kB
├ chunks/563-980961a6dc58e512.js 31.5 kB
├ chunks/669fb589-43a640a2bf7dd213.js 53.6 kB
└ other shared chunks (total) 1.95 kB
○ (Static) prerendered as static content
next-export-optimize-images: Optimize images.
info - [next-export-optimize-images]: Configuration was not loaded. (This i)
- Collect images in public directory -
- Image Optimization -
Optimization progress |████████████████████████████████████████| 100% || 0/0
Successful optimization!
^C
I have the same issue, it seems like next-export-optimize-images won't accept config files that have .cjs or .mjs extensions, it seems like it only accepts .js files.
In my case, this makes it impossible for the export-images.config.js to correctly resolve the imports needed to create the remoteImages array dynamically. It's a shame, it basically means it's currently not possible to use remote images unless one manually hardcodes every single value into this file.
In the case of your config file, I think the following will work.
return withMDX(await nextConfig)