While working on my Next.js application, I observed that the file sizes are quite large during the build process. Interestingly, the size remains consistent across pages, indicating that the entire AntD package is being imported.
Page Size First Load JS
┌ λ / 3.21 kB 324 kB
├ /_app 0 B 86.6 kB
├ ○ /404 194 B 86.8 kB
├ λ /account 7.92 kB 314 kB
├ λ /announcement/[reference] 20.8 kB 338 kB
├ λ /api/announcements 0 B 86.6 kB
└ ...I have made attempts to modify various configuration files like package.json, tsconfig.json, next.config.js, .babelrc.js in the hope of optimizing the build output. However, every time I feel like I am making progress, I encounter the error message below. The goal is to utilize the es version of AntD instead of the lib.
SyntaxError: Cannot use import statement outside a module
Here is the configuration settings I am using:
// .babelrc.js
module.exports = {
presets: [
['next/babel']
],
plugins: [
['import',
{
libraryName: 'antd', style: true, libraryDirectory: 'es',
}
]
],
};
// next.config.js
const withNextTranslate = require('next-translate');
const withAntdLess = require('next-plugin-antd-less');
module.exports = withNextTranslate(withAntdLess({
lessVarsFilePath: "./styles.antd.less",
cssLoaderOptions: {},
images: {
domains: ["storage.googleapis.com"],
},
webpack: (config) => {
config.module.rules.push(
{
test: /\.(png|jpg|gif|svg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8000,
name: '[name].[hash:7].[ext]'
}
}
]
}
)
return config;
}
}));
// tsconfig.json
{
"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"
]
}
In addition to this, I've set the import in the .less file as
@import '~antd/es/style/themes/default.less'; If anyone has any insights on what might be wrong with these configuration files, please let me know.