Question

我在项目中遇到以下错误：

ModuleBuildError: Module build failed (from ./node_modules/next/dist/build/webpack/loaders/next-babel-loader.js):
TypeError: Cannot read property 'local' of undefined`
Here is my next.config.json
`module.exports = {
  webpack: (config, { dev }) => {
    config.module.rules.push(
      {
        test: /\.(less)/,
        loader: 'emit-file-loader',
        options: {
          name: 'dist/[path][name].[ext]'
        }
      },
      {
        test: /\.less$/,
        use: [
          { loader: 'babel-loader' },
          { loader: 'raw-loader' },
          { loader: 'less-loader', options: { javascriptEnabled: true } }
        ]
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        loader: [
          'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
          'postcss-loader'
        ]
      }
    );
    return config;
  }
};

还有我的.babelrc文件：

{
  "plugins": [
    ["inline-import", { "extensions": [".css"] }],
    ["import", { "libraryName": "antd" }]
  ],
  "presets": ["next/babel"],
  "ignore": []
}

我认为导入软件包时出现问题：如果我以这种方式导入软件包，它将起作用：从包导入模块但是，如果我以这种方式导入软件包，则会得到描述的错误：从包/子模块导入模块为什么会这样呢？我怀疑问题出在babel-loader，但是我不知道如何解决。

谢谢

Answer 1

这是最适合我的设置

/next.config.js

const withLess = require('@zeit/next-less');
module.exports = withLess();

查看此docs on how to enable CSS Modules

/pages/index.js

import React from 'react';
import { parseNumber } from 'libphonenumber-js';
import '../styles.less';

export default () => {
  const info = parseNumber('Phone: +1 (800) 555 35 35.', 'US');

  return (
    <h1 className="example">
      Phone info: {info.country} | {info.phone}
    </h1>
  );
};

/styles.less

@font-size: 50px;

.example {
  font-size: @font-size;
  color: red;
}

package.json

"dependencies": {
  "@zeit/next-less": "^1.0.1",
  "less": "^3.8.1",
  "libphonenumber-js": "^1.5.1",
  "next": "^7.0.1",
  "react": "^16.5.2",
  "react-dom": "^16.5.2"
}

我根本没有.babelrc文件。

TypeError：无法读取未定义的属性“ local”

1 个答案: