Module parse failed error when using NextJS

[allan2]

I'm trying to use katex and @matejmazur/react-katex with Next.js.

I'm getting this error: Failed to compile error:

./node_modules/@matejmazur/react-katex/src/index.tsx
Module parse failed: Unexpected token (11:9)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import KaTeX, { ParseError, KatexOptions } from 'katex';
| 
> const TeX: React.FC<TeXProps> = ({
|   children,
|   math,

I have this in my next.config.js file:

// next.config.js

const katex = require('katex')

module.exports = {
  future: {
    webpack5: true,
  },
  webpack: function (config, options) {
    config.experiments = {}
    return config
  },
  katex,
}

I think I'm missing something. Would anybody have any suggestions?

[MatejBransky]

I've tried Next.js and it looks like that it works. Steps to reproduce:

yarn create next-app
yarn add @matejmazur/react-katex katex

index.js

import 'katex/dist/katex.min.css';
import TeX from '@matejmazur/react-katex';

export default function Home() {
  return (
    ...
    <TeX>\int_0^\infty x^2 dx</TeX>
  );
}

Could you please create or publish the repository with the given error so I can look at it.

[allan2]

Matej, thanks for taking the time.

My minimal working example is here ---> https://github.com/allan2/nextjs-katex It works.

My problem was the import of <TeX> was filled in by WebStorm like this:

// what the IDE does when I right-click on <TeX>
import TeX from '@matejmazur/react-katex/src/index'

// what it should be
 import TeX from '@matejmazur/react-katex'

Is this something that could be fixed so the IDE fills it in the correct way?

[MatejBransky]

I use VS Code so I don't know why this happens in Webstorm. Maybe somebody else with Webstorm can help. :)