Currently, I am in the process of optimizing a Next.js project and came across the requirement to include type: 'module' in thepackage.json file. However, this led to an error being thrown:
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: my_path/next.config.js require() of ES modules is not supported.
It appears that next.config.js does not yet support ESM (ES Modules). There has been some discussion around this issue here: https://github.com/vercel/next.js/issues/9607 but a solution has not been found yet. Can anyone offer assistance?
The versions I am using are:
node v12.17.0
next 11.1.0
Below is my next.config.js configuration:
import withLess from '@zeit/next-less'
const nextConfig = {
target: 'serverless',
productionBrowserSourceMaps: true,
webpack5: true,
onDemandEntries: {
maxInactiveAge: 1000 * 60 * 60,
pagesBufferLength: 5
},
lessLoaderOptions: {
javascriptEnabled: true
},
trailingSlash: false,
}
export default withLess(nextConfig)
Here is a snippet from my package.json file:
{
"type": "module"
...
}
UPDATE:
The optimization change I made involved modifying how components from the 'ant' package were called.
Originally,
import { Row, Col } from 'antd'
I switched it to
import Row from 'antd/es/row'
import Col from 'antd/es/col'
and encountered the following error:
my_path/node_modules/antd/es/row/index.js:1
import { Row } from '../grid'; ^^^^^^
SyntaxError: Cannot use import statement outside a module
To resolve this, I added type: "module" to my package.json and faced challenges with the next.config.js file.