logo标签列表

CSS模块无法从node_modules中导入。

reactjswebpacknext.jsbabeljs
3

我在我的主项目中使用了一个库。该库的代码看起来像这样/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>
   ))
 );

现在在 Next 应用程序 /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;
}

}

但是我遇到了错误 -

 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'

请问我在这里做错了什么。

1
你看过错误信息中提供的链接了吗：https://nextjs.org/docs/messages/css-modules-npm？“这通常发生在意外使用软件包源文件而不是构建软件包时。”- 这就是你的问题，尝试编译你正在使用的库。 - juliomalves
1个回答
0
@zeit/next-css 软件包已被弃用。Next.js 内置了对 CSS 的支持。 - juliomalves
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接