TypeError: Cannot read property 'local' of undefined

Question

I am getting the following error in my project:

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;
  }
};

And my .babelrc file:

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

I figured the problem comes up when importing packages: If i import packages in this manner it works: import module from package However, if I import the packages in this manner, I get the error described: import module from package/submodule Why is this happening? I suspect that the problem is with babel-loader but I don't have a clue on how to fix it.

Thanks

No, I loaded .less files successfully. The problem is when I try to import modules from directories within the package. Could it be a problem with babel-plugin-import? — Dave Kalu
can you please show me an example of "import modules from directories within the package"? — iurii
import IntlTelInput from 'react-intl-tel-input'; // this works when I only add this // but it stops working when I import modules like this import 'file-loader?name=libphonenumber.js!./libphonenumber.js'; import './main.css'; — Dave Kalu

iurii iurii · Accepted Answer · 2018-10-08T14:18:56

Here is the setup that works for me

/next.config.js

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

See this 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"
}

I do not have .babelrc file at all.

TypeError: Cannot read property 'local' of undefined

1 Answers