NextJs project dependency - You may need an appropriate loader to handle this file type, currently n-CodePudding

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.

CodePudding user response：

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?)