"You may need an appropriate loader?" error using next7

[KingScooty]

So i'm not doing anything special. Have a few shared (via lerna/yarn workspaces monorepo structure) react components using styled components.

My babel.config.js file looks like this:

// babel.config.js (in your Next.js folder)
module.exports = api => {
	api.cache(true);

	const presets = ["next/babel"];

	const plugins = ["styled-components"];

	return {
		presets,
		plugins
	};
};

and my next.config.js file looks like:

const withTM = require("next-plugin-transpile-modules");
const withCSS = require("@zeit/next-css");
const withImages = require("next-images");

// Tell webpack to compile the "bar" package
// https://www.npmjs.com/package/next-plugin-transpile-modules
module.exports = withImages(
	withCSS(
		withTM({
			transpileModules: ["dh-ui-atom", "dh-ui-post"]
		})
	)
);

Running yarn dev in my next project runs, but when i try and load the page, i get the following error:

Module parse failed: Unexpected token (20:2)
You may need an appropriate loader to handle this file type.
| 	 */
| 	return (
> 		<div className={logoClasses}>

Weirdly, if i comment out the entries inside transpileModules, everything compiles fine, and the site loads, but then obviously none of the changes are being watched/hot reloaded, so it seems to be a local issue to transpile modules.

What am i doing wrong?

[martpie]

Yarn is not supported because it copies dependencies instead of symlinking them. This is why hot-reloading is not working.

I will add a comment about that in the README because it is a common mistake.

Yarn workspaces work fine though.

I advice two things:

• Read Watching? #5 : Lerna is not a tool to manage monorepos dependencies
• Check the with-yarn-workspaces example on the official repo https://github.com/zeit/next.js/tree/canary/examples/with-yarn-workspaces

Tell me if it solves it for you :)

[martpie]

I just added a FAQ to the README fyi.

[KingScooty]

I am actually already using yarn workspaces though! Just lerna for versioning. (i've updated my original comment).

I am using the latest canary version of next.

[martpie]

Have you tried this? https://github.com/martpie/next-plugin-transpile-modules/blob/master/README.md#i-have-trouble-making-it-work-with-nextjs-7

[KingScooty]

Yeah i've followed all the steps properly. I'm not sure what i've done wrong for a loader to be missing for JSX?

[martpie]

You may need to adapt the babel.config.js to your needs though.

Can you provide an example/repo so I can reproduce your problem?

[KingScooty]

It seemed to be an issue with one of the canary releases of next. I'm having to use canary releases due to the webpack upgrade that's included in them.

I can confirm this issue has gone away, but the hot reloading issue has come back. (next: ^7.0.2-canary.41)

[martpie]

I’ll try to test this plugin with Canary to prevent a future incompatibility

[cyberwombat]

@martpie Can you elucidate:
"Yarn is not supported", "Yarn workspaces work fine though."

How would I use yarn workspaces without using yarn? I'm using yarn workspaces and cannot get next to transpile typescript using this module.

[martpie]

This issue is 2 years old, please open a new one

[martpie]

By "yarn is not supported", I meant yarn add ../../something is not supported ;)