Next.js Discord

Discord Forum

NextJS component in a standalone project

Unanswered
New Guinea Freshwater Crocodile posted this in #help-forum
Open in Discord
Avatar
New Guinea Freshwater CrocodileOP
Hey guys, I have somewhat of a unique problem that I'm trying to solve:

I have a NextJS project, which is just some default styles. This project is published to npm.

I have another project initialized with plain node, in the package.json I have my nextjs starter above ^
There's a special route in this project (called "tasks") where I write .tsx files, which the nextjs package dynamically imports

When I try to add a .tsx (specifically client components) file here, I get this error:
"You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file"

7 Replies

Avatar
Glö - Node js
Webpack issues
// webpack.config.js

module.exports = {
  // Other webpack configuration settings...
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'ts-loader',
        },
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react'],
          },
        },
      },
      
    ],
  },
};
Avatar
New Guinea Freshwater CrocodileOP
Interesting, going to try this. Will report back to you
Avatar
New Guinea Freshwater CrocodileOP
@Glö - Node js same issue
Tried this
Avatar
Glö - Node js
Provide a screenshot or type out your webpack config
Avatar
New Guinea Freshwater CrocodileOP
@Glö - Node js 
/** @type {import('next').NextConfig} */
const nextConfig = {
    webpack: (config, { isServer }) => {
        config.module.rules.push({
            test: /\.(ts|tsx)$/,
            exclude: /node_modules/,
            use: {
              loader: 'ts-loader',
            },
        })
        return config
    },
}

module.exports = nextConfig