I've been working on the configuration of next.config.js files and I can't get running.
I keep getting this error:
I tried to fix it in many ways. I commented different things out, read the FAQ at next-transpile-module and changed everything. Nothing is working. I keep getting the errors.
Error: next-transpile-modules - an unexpected error happened when trying to resolve "common/src/" Error: Can't resolve 'common/src/' in '/Users/user/development/viboa-landingpage/packages/landing' at getPackageRootDirectory (/Users/user/development/viboa-landingpage/packages/landing/node_modules/next-transpile-modules/src/next-transpile-modules.js:136:15) at Array.map () at withTM (/Users/user/development/viboa-landingpage/packages/landing/node_modules/next-transpile-modules/src/next-transpile-modules.js:145:34) at /Users/user/development/viboa-landingpage/packages/landing/node_modules/next-compose-plugins/lib/compose.js:100:23 at Array.forEach () at composePlugins (/Users/user/development/viboa-landingpage/packages/landing/node_modules/next-compose-plugins/lib/compose.js:77:11) at /Users/user/development/viboa-landingpage/packages/landing/node_modules/next-compose-plugins/lib/index.js:22:38 at normalizeConfig (/Users/user/development/viboa-landingpage/packages/landing/node_modules/next/dist/next-server/server/config-shared.js:1:1558) at loadConfig (/Users/user/development/viboa-landingpage/packages/landing/node_modules/next/dist/next-server/server/config.js:8:158) at async NextServer.loadConfig (/Users/user/development/viboa-landingpage/packages/landing/node_modules/next/dist/server/next.js:1:2962)
my next.config.js
const withPlugins = require('next-compose-plugins');
const withTM = require('next-transpile-modules')([
'common/src/',
{ debug: true }
]);
// const withOptimizedImages = require('next-optimized-images');
// const withFonts = require('next-fonts');
// const withVideos = require('next-videos');
const withImages = require('next-images');
const path = require('path');
const nextConfig = {
future: {
webpack5: true
},
webpack: (config, { isServer, webpack }) => {
// Note: we provide webpack above so you should not `require` it
// Perform customizations to webpack config
config.plugins.push(new webpack.EnvironmentPlugin(process.env));
config.optimization.minimize = false;
config.module.rules.push(
{
test: /\.svg$/,
issuer: {
test: /\.(js|ts)x?$/
},
use: ['@svgr/webpack']
},
{
test: /\.(webm|ogg|mp3|wav|mpe?g)$/i,
exclude: config.exclude,
use: [
{
loader: 'url-loader',
options: {
limit: config.inlineImageLimit,
fallback: 'file-loader',
publicPath: `${config.assetPrefix}/_next/static/images/`,
outputPath: `${isServer ? '../' : ''}static/images/`,
name: '[name]-[hash].[ext]',
esModule: config.esModule || false
}
}
]
},
{
test: /\.css$/i,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
[
'postcss-preset-env',
{
// Options
}
]
]
}
}
}
]
}
// {
// test: /\.(mp4|webm|ogg|swf|ogv)$/,
// use: {
// loaders: [
// {
// test: /\.html$/,
// loader: 'html-loader?attrs[]=video:src'
// },
// {
// test: /\.mp4$/,
// loader: 'url?limit=10000&mimetype=video/mp4'
// }
// ]
// }
// }
);
if (isServer) {
config.externals = ['react', ...config.externals];
}
config.resolve.alias['react'] = path.resolve(
__dirname,
'.',
'node_modules',
'react'
);
// config.resolve.alias = {
// ...config.resolve.alias,
// // Will make webpack look for these modules in parent directories
// common: require.resolve('common')
// // reusecore: require.resolve('packages/reusecore')
// // ...
// };
// Important: return the modified config
return config;
}
};
my package.json
{
"name": "next-viboa-landing-page",
"description": "viboa landing page built with nextjs",
"version": "1.0.0",
"private": true,
"author": {
"name": "Me"
},
"devDependencies": {
"@babel/cli": "^7.13.16",
"cpx": "^1.5.0",
"cross-env": "^7.0.3",
"firebase-tools": "^9.10.0",
"husky": "^6.0.0",
"lerna": "^4.0.0",
"lint-staged": "^10.5.4",
"polished": "^4.1.1",
"prettier": "^2.2.1",
"rimraf": "^3.0.2"
},
"workspaces": [
"packages/*",
"packages/*"
],
"scripts": {
"clean": "lerna clean --yes && rimraf node_modules",
"start": "lerna run --parallel dev",
"preweb": "cpx \"packages/common/src/assets/image/**/*.*\" \"packages/landing/static\" -C",
"next-dev": "yarn workspace viboa-landing-page run dev",
"next-build": "rimraf dist && yarn workspace viboa-landing-page run build",
"next-start": "yarn workspace viboa-landing-page run start",
"next-export": "yarn workspace viboa-landing-page run export",
"gatsby-dev": "yarn workspace gatsby-landing run dev",
"gatsby-build": "yarn workspace gatsby-landing run build",
"gatsby-serve": "yarn workspace gatsby-landing run serve",
"prebuild-public": "rimraf \"dist/functions/**\" && rimraf \"dist/public\"",
"prefirebase-serve": "yarn run build-public && yarn run build-funcs && yarn workspace viboa-landing-page run build && yarn run copy-deps && yarn run install-deps",
"firebase-serve": "cross-env NODE_ENV=production firebase serve",
"prefirebase-deploy": "yarn run build-public && yarn run build-funcs && yarn workspace viboa-landing-page run build && yarn run copy-deps",
"firebase-deploy": "cross-env NODE_ENV=production firebase deploy",
"build-public": "cpx \"packages/common/src/assets/**/*.*\" \"dist/public/static\" -C && cpx \"public/**/*.*\" \"dist/public\" -C && cpx \"packages/landing/public/**/*.*\" \"dist/public\" -C",
"build-funcs": "babel \"packages/functions\" --out-dir \"dist/functions\"",
"copy-deps": "cpx \"packages/landing/*{package.json,package-lock.json,yarn.lock}\" \"dist/functions\" -C",
"install-deps": "cd \"dist/functions\" && yarn",
"pregatsby-firebase-serve": "rimraf dist && yarn run gatsby-build && cpx \"packages/landing-gatsby/public/**/*.*\" \"dist/public\" -C",
"gatsby-firebase-serve": "cross-env NODE_ENV=production firebase serve",
"pregatsby-firebase-deploy": "rimraf dist && yarn run gatsby-build && cpx \"packages/landing-gatsby/public/**/*.*\" \"dist/public\" -C",
"gatsby-firebase-deploy": "firebase deploy",
"netlify-deploy": "yarn workspace viboa-landing-page run netlify-build"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{js,md,css}": [
"prettier --trailing-comma es5 --single-quote --write"
]
}
}
When I remove from the const withTM = require('next-transpile-modules')
I get errors like this:
error - ../common/src/components/Box/index.js Module parse failed: Unexpected token (14:2) 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 | | const Box = ({ children, ...props }) => { > <BoxWrapper {...props}>{children}; | }; |