vercel/next-plugins

Module parse failed using next-less in a typescript next js project

AlessandroStaffolani opened this issue · 0 comments

I've a nextjs project which is running properly using typescript. Now I want to add also next-less support.

But I get the following error when I run yarn dev:

error - ./styles/app.less 1:0
Module parse failed: Unexpected character '@' (1:0)
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 "_variables";

I followed the example here.

So I have:

// next.config.js file

const withLess = require("@zeit/next-less");

module.exports = withLess({ cssModules: true });
// pages/_app.js file

import type { AppProps /*, AppContext */ } from "next/app";
import "../styles/app.less";
import Head from "next/head";
import Main from "../components/layout/Main";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <Main>
        <Component {...pageProps} />
    </Main>
  );
}

export default MyApp;
// styles/app.less file

@import "_variables";
@import "_global";
// tsconfig.json file

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}
// package.json file

{
  "name": "...",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@zeit/next-css": "^1.0.1",
    "@zeit/next-less": "^1.0.1",
    "less": "^3.12.2",
    "next": "9.5.2",
    "react": "16.13.1",
    "react-dom": "16.13.1"
  },
  "devDependencies": {
    "@types/node": "^14.6.2",
    "@types/react": "^16.9.48",
    "prettier": "^2.1.1",
    "typescript": "^4.0.2"
  }
}