I have been attempting to transpile the module "react-device-detect" from node_modules, but so far I have been unsuccessful. Here is what I have tried:
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;
},
});
I have also experimented with applying the rules individually, but unfortunately without success.
UPDATE 1: Refer to complete next.config.js configurations @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;
}
});
UPDATE 2:
It appears that next-transpile-modules does not integrate smoothly with next-i18next. In the console of IE browser, I encountered the following error:
'exports' is undefined
When running npm run build, errors like the ones below surfaced:
./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'.
Running npm start led to this output:
react-i18next:: i18n.languages were undefined or empty undefined