CSS Modules cannot be imported from within node_modules

Viewed 567

I am using one library in my main project. The library code looks like this /node_modules/@myCompany/all_components/src/Footer/components/Navlink/index.js

  import React from 'react';

  import styles from './style.module.scss';

 export const NavLinks = ({ linksList }) => (
  linksList
   .map(({ url, title, id }) => (
     <a
        key={id}
        className={styles.navLink}
        href={url}>
        {title}
     </a>
   ))
 );

Now in Next app /pages/index.js

import {NavLinks} from '@myCompany/all_components'; 
 .....
 export const Home = ({ data }) => {
 return ()
 };

.bablerc

 {
  "presets": ["next/babel"]
  }

next.config.js

 module.exports = {
 webpack: (config) => {
  config.resolve.extensions = ['.js', '.jsx'];
  config.module.rules.push(
  {test: /\.(js|jsx)$/, use: {
    loader: "babel-loader",
    options: {
      presets: ['@babel/preset-env', '@babel/preset-react']
      }
    }}
   );
  return config;
}

}

But I am getting error -

 error - ./node_modules/@myCompany/all_componentss/src/Footer/components/NavLinks   /style.module.scss
 CSS Modules cannot be imported from within node_modules.
 Read more: https://nextjs.org/docs/messages/css-modules-npm
 Location: node_modules\@myCompany/all_components\src\Footer\components\NavLinks\index.js
 [BABEL] Note: The code generator has deoptimised the styling of C:\Projects\service-page\node_modules\react-dom\cjs\react-dom.development.js as it exceeds the max of 500KB.
 wait  - compiling /_error (client and server)...
 event - compiled client and server successfully in 47.8s (176 modules)
 error - SyntaxError: Unexpected token 'export'

Can you please advice what wrong I am doing here.

0 Answers
Related