Next.js 15 and experimental import attributes

[arnemolland]

The generated files from contentlayer(2) makes use of the experimental import attributes feature when running Node > 16 which worked fine using Babel plugins with previous Next.js versions.

With Next.js 15, Babel has been replaced by swc which does not have any documented way to enable the experimental syntax. Next throws and suggests installing the Babel plugin, which didn't work for me at least (I use Turbopack). The quick fix for me was to patch the @contentlayer2/core package to remove the assert statement.

Removing the statement outright probably breaks stuff, providing a config option to disable them would be a quick fix but I'm not sure if it's the best way to do it either.

Note: The proposed syntax differs from the contentlayer(2) implementation and this will probably need to be updated in the near future anyway; the proposed keyword is with instead of assert.

[timlrx]

Hmm... I would have thought that it should run fine given the swc supports import attributes and the default next.js swc options seems to support it as well.

Let me try changing the code from assert to with and see if that solves the problem.

[timlrx]

The latest canary version of Next 15 seems to work without issues - https://stackblitz.com/edit/github-ekmxur-ba82kk?file=package.json

[arnemolland]

I just tried with the latest canary version and contentlayer2 and I'm still able to reproduce. The reason why the stackblitz example is working is because it's not running contentlayer2 build, just next build. To clarify, Next only complains about it when building the application after the contentlayer files has been generated. next dev does not complain. This is the error message that's being spit out:

.contentlayer/generated/index.mjs:7:42
Syntax error: Support for the experimental syntax 'importAttributes' isn't currently enabled (7:43):

   5 | // NOTE During development Contentlayer imports from `.mjs` files to improve HMR speeds.
   6 | // During (production) builds Contentlayer it imports from `.json` files to improve build performance.
>  7 | import allPosts from './Post/_index.json' assert { type: 'json' }
     |                                           ^
   8 |
   9 | export { allPosts }
  10 |

Add @babel/plugin-syntax-import-attributes (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-import-attributes) to the 'plugins' section of your Babel config to enable parsing.


> Build failed because of webpack errors
error: script "build" exited with code 1

[lishaduck]

While I agree that this is strange, it really should use with, assert is deprecated. I'll send in a PR.

[timlrx]

@arnemolland I have published a fix in v0.5.0. Give it a try and let me know if the problem is fixed. Thanks!

[zslabs]

👋 Hi! Oddly enough; I'm getting an issue referencing with in https://github.com/zslabs/zslabs-v3/tree/zschnackel_tw

This is using React v19, Next.js 15, etc.

Failed to compile.

.contentlayer/generated/index.mjs:7:47
Syntax error: Support for the experimental syntax 'importAttributes' isn't currently enabled (7:48):

   5 | // NOTE During development Contentlayer imports from `.mjs` files to improve HMR speeds.
   6 | // During (production) builds Contentlayer it imports from `.json` files to improve build performance.
>  7 | import allPosts from './Post/_index.json' with { type: 'json' }
     |                                                ^
   8 | import allStatics from './Static/_index.json' with { type: 'json' }
   9 |
  10 | export { allPosts, allStatics }

Add @babel/plugin-syntax-import-attributes (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-import-attributes) to the 'plugins' section of your Babel config to enable parsing.


> Build failed because of webpack errors

[lishaduck]

👋 Hi! Oddly enough; I'm getting an issue referencing with in https://github.com/zslabs/zslabs-v3/tree/zschnackel_tw

This is using React v19, Next.js 15, etc.

Failed to compile.

.contentlayer/generated/index.mjs:7:47
Syntax error: Support for the experimental syntax 'importAttributes' isn't currently enabled (7:48):

   5 | // NOTE During development Contentlayer imports from `.mjs` files to improve HMR speeds.
   6 | // During (production) builds Contentlayer it imports from `.json` files to improve build performance.
>  7 | import allPosts from './Post/_index.json' with { type: 'json' }
     |                                                ^
   8 | import allStatics from './Static/_index.json' with { type: 'json' }
   9 |
  10 | export { allPosts, allStatics }

Add @babel/plugin-syntax-import-attributes (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-import-attributes) to the 'plugins' section of your Babel config to enable parsing.


> Build failed because of webpack errors

I'm not a Next.js guy, so my first advice would be a rewrite 😛
Obviously that's not what you want though. This is a bit of a head-scratcher, because it the error is a Webpack/Babel error, but you're using Turbopack, which uses swc.
Oh, right Next only uses Turbopack for the dev server...
Looks like it should be supported though: vercel/next.js#65749.
I hate to say this, but can you try deleting your lockfile and node_modules, then doing a clean install?

[zslabs]

Yerp, tried the 'ole nuclear attempt, but no dice. I was able to get the following working inside contentlayer.config.ts#makeSource in case anyone else runs into this. Still not sure what's going on, but hope someone finds it useful:

const GENERATED_FILE_PATH = path.resolve('.contentlayer/generated/index.mjs')

...
  onSuccess: async () => {
    if (fs.existsSync(GENERATED_FILE_PATH)) {
      let content = fs.readFileSync(GENERATED_FILE_PATH, 'utf-8')

      // Remove invalid syntax like `with { type: 'json' }`
      content = content.replace(/ with \{.*?\}/g, '')

      fs.writeFileSync(GENERATED_FILE_PATH, content, 'utf-8')
      console.log(
        'Patched .contentlayer/generated/index.mjs after Contentlayer generation.'
      )
    }
  }
...

[lishaduck]

Did that work, omitting the attribute?

[zslabs]

Did that work, omitting the attribute?

Yes

[lishaduck]

I just did some more Googling, and it shouldn't be running Babel at all. Since Next.js 12, it's used SWC via the Next.js compiler instead of Babel. Hmph. Well, I'm glad you found a workaround!