Прозрачный npm модуль в Next. js - PullRequest
Новая
       3

Прозрачный npm модуль в Next. js

0 голосов
/ 17 февраля 2020

Я пытаюсь перенести модуль «реагировать на обнаружение устройства» из node_modules, но пока не могу достичь. Вот что я попробовал: 

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 конфигурации @ felixmo sh

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 у меня возникают ошибки, подобные следующим: 

./utils.js
Attempted import error: 'isMobileSafari' is not exported from 'react-device-detect'.

./utils.js
Attempted import error: 'isMobileSafari' is not exported from 'react-device-detect'.

./utils.js
Attempted import error: 'osName' is not exported from 'react-device-detect'.

При запуске npm start появляется следующее:

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

1 Ответ

1 голос
/ 17 февраля 2020

Для этого next-transpile-modules имеется модуль NPM, который позволяет указать, какие модули переносить. 

// 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

}));
...