Syntax errors from MDX in blog.tailwind.com

[christian-fuss]

What version of @tailwindcss/jit are you using?

0.1.17

What version of Node.js are you using?

15.12.0

What browser are you using?

Chrome Version 89.0.4389.90 (Official Build) (64-bit)

What operating system are you using?

Windows 10

Reproduction repository

https://github.com/christian-fuss/blog.tailwindcss.com.git

I am using your very nice MDX-blog setup for my own application and upgraded everything to the latest and even migrated everything to Typescript. All worked like a breeze and then I stumbled over the brand new JIT feature and wanted to give it a try: BOOOOM.

One of the errors I have seen is the following (but I have seen others, too):

./src/css/tailwind.css
Error: Syntax error: Unexpected token

1 | export const meta = {
| ^
at runMicrotasks ()
at async Promise.all (index 0)

Build error occurred
Error: > Build failed because of webpack errors
at /home/cfuss/projects/temp/blog.tailwindcss.com/node_modules/next/dist/build/index.js:15:918
at async Span.traceAsyncFn (/home/cfuss/projects/temp/blog.tailwindcss.com/node_modules/next/dist/telemetry/trace/trace.js:5:584)
npm ERR! code 1
npm ERR! path /home/cfuss/projects/temp/blog.tailwindcss.com
npm ERR! command failed
npm ERR! command sh -c next build && next export && npm run build:rss

npm ERR! A complete log of this run can be found in:
npm ERR! /home/cfuss/.npm/_logs/2021-03-28T21_44_03_428Z-debug.log

The log:
0 verbose cli [
0 verbose cli '/home/cfuss/.nvm/versions/node/v15.12.0/bin/node',
0 verbose cli '/home/cfuss/.nvm/versions/node/v15.12.0/bin/npm',
0 verbose cli 'run',
0 verbose cli 'build'
0 verbose cli ]
1 info using npm@7.6.3
2 info using node@v15.12.0
3 timing config:load:defaults Completed in 1ms
4 timing config:load:file:/home/cfuss/.nvm/versions/node/v15.12.0/lib/node_modules/npm/npmrc Completed in 1ms
5 timing config:load:builtin Completed in 1ms
6 timing config:load:cli Completed in 1ms
7 timing config:load:env Completed in 0ms
8 timing config:load:file:/home/cfuss/projects/temp/blog.tailwindcss.com/.npmrc Completed in 0ms
9 timing config:load:project Completed in 1ms
10 timing config:load:file:/home/cfuss/.npmrc Completed in 0ms
11 timing config:load:user Completed in 0ms
12 timing config:load:file:/home/cfuss/.nvm/versions/node/v15.12.0/etc/npmrc Completed in 0ms
13 timing config:load:global Completed in 0ms
14 timing config:load:cafile Completed in 0ms
15 timing config:load:validate Completed in 0ms
16 timing config:load:setUserAgent Completed in 1ms
17 timing config:load:setEnvs Completed in 0ms
18 timing config:load Completed in 5ms
19 verbose npm-session 1c6e16f4c1b2341c
20 timing npm:load Completed in 11ms
21 timing command:run Completed in 9773ms
22 verbose stack Error: command failed
22 verbose stack at ChildProcess. (/home/cfuss/.nvm/versions/node/v15.12.0/lib/node_modules/npm/node_modules/@npmcli/promise-spawn/index.js:64:27)
22 verbose stack at ChildProcess.emit (node:events:369:20)
22 verbose stack at maybeClose (node:internal/child_process:1067:16)
22 verbose stack at Process.ChildProcess._handle.onexit (node:internal/child_process:301:5)
23 verbose pkgid tailwind-blog@0.1.0
24 verbose cwd /home/cfuss/projects/temp/blog.tailwindcss.com
25 verbose Linux 4.19.128-microsoft-standard
26 verbose argv "/home/cfuss/.nvm/versions/node/v15.12.0/bin/node" "/home/cfuss/.nvm/versions/node/v15.12.0/bin/npm" "run" "build"
27 verbose node v15.12.0
28 verbose npm v7.6.3
29 error code 1
30 error path /home/cfuss/projects/temp/blog.tailwindcss.com
31 error command failed
32 error command sh -c next build && next export && npm run build:rss
33 verbose exit 1

[bradlc]

Hey @christian-fuss. We just added a new transform API that will fix this, but it requires some changes to the purge config:

purge: {
  content: ['./src/**/*.{js,mdx}', './next.config.js'],
  transform: {
    mdx: mdx.sync,
  },
},

You will also need to use the canary release of tailwindcss (npm install -D tailwindcss@canary) and add mode: 'jit' to your config 👍

Edit: Oh actually that new API hasn't been published yet, sorry! But it will be available in the canary release (and eventually latest) very soon!