TypeError：无法读取未定义的属性“本地”答案

【问题标题】：TypeError: Cannot read property 'local' of undefinedTypeError：无法读取未定义的属性“本地”
【发布时间】：2018-10-08 10:16:03
【问题描述】：

我的项目中出现以下错误：

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 但我不知道如何解决它。

谢谢

【问题讨论】：

您要加载.less 文件吗？
不，我成功加载了.less 文件。问题是当我尝试从包中的目录导入模块时。会不会是 babel-plugin-import 的问题？
你能给我看一个“从包内目录导入模块”的例子吗？
import IntlTelInput from 'react-intl-tel-input'; // 当我只添加这个时这有效 // 但是当我导入这样的模块时它停止工作 import 'file-loader?name=libphonenumber.js!./libphonenumber.js'; import './main.css';
什么是 libphonenumber.js？它是一些 npm 模块吗？

标签： reactjs babeljs next.js babel-loader

【解决方案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 文件。

【讨论】：

我一直在寻找这个像地狱一样的人！从 dist 导入 css 文件时遇到问题。谢谢你是我的救星！