NextJS component in a standalone project
Unanswered
New Guinea Freshwater Crocodile posted this in #help-forum
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"
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
@New Guinea Freshwater Crocodile 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"
// 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'],
},
},
},
],
},
};New Guinea Freshwater CrocodileOP
Interesting, going to try this. Will report back to you
New Guinea Freshwater CrocodileOP
@Glö - Node js same issue
Tried this
Provide a screenshot or type out your webpack config
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