在 Next.js 中转换 npm 模块

Question

我正在尝试从 node_modules 转译一个模块“react-device-detect”，但还无法实现。以下是我尝试过的：

module.exports = withLess({
  webpack: (config, { isServer, defaultLoaders }) => {
    // other configs
    config.module.rules.push({
      test: /\\.+(ts|tsx)$/,
      include: [path.join(__dirname, 'node_modules/react-device-detect')],
      // exclude: /node_modules/,
      use: [{ loader: 'ts-loader' }],
    });

    config.module.rules.push({
      test: /\\.+(js|jsx)$/,
      include: [path.join(__dirname, 'node_modules/react-device-detect')],
      // exclude: /node_modules/,
      use: [{ loader: 'babel-loader' }],
    });
    return config;
  },
});

我也单独尝试过这些规则，但没有奏效。

更新 1： 完成 next.config.js 配置 @felixmosh

const webpack = require("webpack");
const withLess = require("@zeit/next-less");
const { parsed: localEnv } = require("dotenv").config();
require("dotenv").config({
  path: process.env.NODE_ENV === "production" ? ".env.production" : ".env"
});
const Dotenv = require("dotenv-webpack");

module.exports = withLess({
  webpack: (config, { isServer }) => {
    // Fixes npm packages that depend on `fs` module
    config.node = {
      fs: "empty"
    };
    // add env variables on client end
    config.plugins.push(new webpack.EnvironmentPlugin(localEnv));
    config.plugins.push(new Dotenv());

    if (!isServer) {
      config.resolve.alias["@sentry/node"] = "@sentry/browser";
    }
    return config;
  }
});

更新 2：

似乎用起来next-transpile-modules并不舒服next-i18next。我进入了 IE 浏览器的控制台：

'exports' is undefined

运行时出现如下错误npm run build：

'exports' is undefined

我在跑步时得到了以下信息npm start：

react-i18next:: i18n.languages were undefined or empty undefined

Answer 1

有一个 NPM 模块next-transpile-modules，允许您指定要转译的模块。

// next.config.js
const withTM = require('next-transpile-modules')(['somemodule', 'and-another']); // pass the modules you would like to see transpiled

module.exports = withTM(withLess({
  ... // your custom next config

}));