Rollup "Unexpected token (Note that you need plugins ...)"

By Kaveh Alemi·Latchkey

Rollup parses plain JavaScript out of the box. When it meets JSX, TypeScript, JSON, or CSS without a plugin to handle it, it stops with "Unexpected token" and a note that you need a plugin for non-JS files.

What this error means

A Rollup build (or a tool built on Rollup) fails with Unexpected token and the hint "Note that you need plugins to import files that are not JavaScript." It points at JSX or a non-JS import.

[!] (plugin commonjs--resolver) RollupError: Unexpected token (5:9) in /app/src/App.jsx
Note that you need plugins to import files that are not JavaScript
  3: function App() {
  4:   return (
  5:     <div className="app">
              ^

Diagnose it: is it resolution, transform, or memory?

Bundler failures in CI fall into three families and the error text often points at the wrong one. A module that resolves on your machine and not on the runner is nearly always case sensitivity or a missing optional dependency; a transform error is a config or version mismatch; and an unexplained kill with no stack is the out-of-memory reaper, not a build error at all.

# 1. resolution: does the file exist with EXACTLY that case?
git ls-files | grep -i "the/imported/path"

# 2. transform: what versions is CI actually resolving?
npm ls webpack vite rollup esbuild typescript 2>/dev/null | head -20

# 3. memory: was it killed rather than failed?
#    exit 137 = SIGKILL (OOM). Nothing in the bundler log will explain it.
node --max-old-space-size=4096 node_modules/.bin/vite build

Common causes

No plugin for JSX/TS syntax

Rollup needs @rollup/plugin-babel, @rollup/plugin-typescript, or an esbuild/swc plugin to parse JSX/TS. Without one, the < of JSX is an unexpected token.

Importing JSON/CSS/assets without a plugin

Importing .json needs @rollup/plugin-json; CSS/asset imports need their own plugins. Otherwise Rollup parses the file content as JavaScript.

How to fix it

Add the plugin for the syntax/file type

Register the plugin that teaches Rollup to handle the file.

// rollup.config.js
import babel from '@rollup/plugin-babel'
import json from '@rollup/plugin-json'
export default {
  plugins: [
    babel({ babelHelpers: 'bundled', extensions: ['.js', '.jsx', '.ts', '.tsx'] }),
    json(),
  ],
}

Order resolution plugins correctly

1. Put @rollup/plugin-node-resolve and @rollup/plugin-commonjs before transform plugins.
2. Set the transform plugin's extensions to include .jsx/.tsx.
3. Confirm the file extension matches a configured plugin.

Make the build reproducible before you debug it

• Pin the Node major in setup-node and in engines. A bundler that resolves native bindings will pick a different prebuilt binary across majors.
• Delete node_modules locally and reinstall from the lockfile before concluding the runner is at fault; most "works locally" reports are stale local state.
• Set CI=true locally to reproduce. Several toolchains change behaviour under it, including treating warnings as errors.
• Exit code 137 is an out-of-memory kill. Raise --max-old-space-size or move to a larger runner rather than searching the bundler config.

How to prevent it

• Add Rollup plugins for every non-plain-JS file type you import.
• Keep plugin extensions lists aligned with your source files.
• Order node-resolve/commonjs before transform plugins.

Frequently asked questions

Related guides

References

• Node.js documentation
• npm CLI documentation
• GitHub Actions documentation