Module parse failed using next-less in a typescript next js project
AlessandroStaffolani opened this issue · 0 comments
AlessandroStaffolani commented
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"
}
}