Ошибка типа: невозможно прочитать свойство 'local' из неопределенного - PullRequest
Новая
       26

Ошибка типа: невозможно прочитать свойство 'local' из неопределенного

0 голосов
/ 08 октября 2018

В моем проекте появляется следующая ошибка: 

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, но я понятия не имею, как это исправить.

Спасибо

1 Ответ

0 голосов
/ 08 октября 2018

Вот настройка, которая работает для меня

/ next.config.js 

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

См. Этот документацию о том, как включить модули CSS

/ 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 файла вообще.

...