CODEWITHSUNDEEP
webpacknext.jsmaterial-ui
dcr31000
dcr31000

Reputation: 53

NextJs project dependency - You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file

I'm looking to export some nextjs components into a "commons" project that will me used by many nextjs applications.

So, I added this to my package.json

"commons-project": "../commons-project",

I changed components importation to use the commons component. For example:

import MyComponent from 'commons-project/components/my-component';

But, my project not compile anymore. This is the complete error:

Module parse failed: Unexpected token (21:4)
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
| 
|   return (
>     <Box mb={1} flex={1} display="flex" alignItems="center" 
|         justifyContent="center" className={classes.buttonRoot}
|         style={{backgroundColor: bgColor ? bgColor : '#C3AEF8',

Box came from @material-ui/core

I tried to add a webpack.config.js, and trying something like this:

module.exports = {
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: [/node_modules/],
                loader: 'babel-loader',
            },
        ],
    },
}

But I don't understand how to configure webpack correctly.

Upvotes: 1

Views: 1796

Answers (2)

dimiguel
dimiguel

Reputation: 1569

If you're here, it's likely because you ran into an issue using a package in your monorepo with Next.js. Unfortunately, it's not enough to reference your package in your project's tsconfig.json; you'll also need to use next-transpile-modules so that Next.js understands what packages in your node_modules folder it needs to transpile.

In your terminal:

npm i next-transpile-modules

Edit your next.config.js file to look like this:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true
}

const withTranspilation = require("next-transpile-modules")([
  "@your-org/your-awesome-package"
])

module.exports = withTranspilation(nextConfig)

Make sure to replace @your-org/your-awesome-package with the package in your monorepo that you're trying to use in your Next.js app.

Upvotes: 4

dcr31000
dcr31000

Reputation: 53

I found that I can't share components like this.

I need to do a component library ( how can I share components in two projects in NextJs?)

Upvotes: 0

Related Questions