Module not found: Can't resolve 'v8' #836
Description
I am getting Module not found: Can't resolve 'v8' while using the package in Nextjs with Typescript.
If I use .js file, then it's working fine, If I use .tsx file then it throws Module Not found error. Even after installing this package, Further packages start reporting issues of missing.
Here's very simple code block which I am using and still it's not working.
import tw from 'twin.macro';
export default function MyComponent() {
const Container = tw.div`relative bg-gray-200 -mx-8 -mb-8 px-8`;
return (
<div>Hey Buddy</div>
)
}Here's the package info -
"next": "14.0.0",
"react": "18.0.0",
"twin.macro": "^3.4.0"
"tailwindcss": "^3.0.0",
"typescript": "^5"Here's withTwin config -
const path = require('path');
const includedDirs = [path.resolve(__dirname, 'src')];
module.exports = function withTwin(nextConfig) {
return {
...nextConfig,
webpack(config, options) {
const { dev, isServer } = options;
// Make the loader work with the new app directory
const patchedDefaultLoaders = options.defaultLoaders.babel;
patchedDefaultLoaders.options.hasServerComponents = true;
patchedDefaultLoaders.options.hasReactRefresh = false;
config.module = config.module || {};
config.module.rules = config.module.rules || [];
config.module.rules.push({
test: /\.(jsx|js)$/,
include: includedDirs,
use: [
patchedDefaultLoaders,
{
loader: 'babel-loader',
options: {
sourceMaps: dev,
plugins: [
require.resolve('babel-plugin-macros'),
[
require.resolve('babel-plugin-styled-components'),
{ ssr: true, displayName: true },
],
],
},
},
],
});
if (!isServer) {
config.resolve.fallback = {
...(config.resolve.fallback || {}),
fs: false,
module: false,
path: false,
os: false,
crypto: false,
};
}
if (typeof nextConfig.webpack === 'function') {
return nextConfig.webpack(config, options);
} else {
return config;
}
},
};
};Here's the issue I am facing -
