reactjstypescriptnext.jsamddefined

define is not defined while build nextjs app


i'm using next version 10.0.1, and react 17.0.2,

When i'm trying build my next app, i get an error:

ReferenceError: define is not defined
    at Object.<anonymous> (/Users/***/Desktop/gm/toesim-web/node_modules/@glonassmobile/codebase-web/createAction.js:1:1)
    at Module._compile (node:internal/modules/cjs/loader:1092:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1121:10)
    at Module.load (node:internal/modules/cjs/loader:972:32)
    at Function.Module._load (node:internal/modules/cjs/loader:813:14)
    at Module.require (node:internal/modules/cjs/loader:996:19)
    at require (node:internal/modules/cjs/helpers:92:18)
    at Object.i1ag (/Users//Desktop/gm/toesim-web/.next/server/pages/deeplink/payment/[paymentId].js:7425:18)
    at __webpack_require__ (/Users/Desktop/gm/toesim-web/.next/server/pages/deeplink/payment/[paymentId].js:23:31)
    at Object.S/7G (/Users/Desktop/gm/toesim-web/.next/server/pages/deeplink/payment/[paymentId].js:5128:21) {
  type: 'ReferenceError'
}

this is the code from node_modules where error is occurred

define(["require", "exports"], function (require, exports) {
    "use strict";
    exports.__esModule = true;
    exports.createAction = void 0;
    var createAction = function (type, payload) { return ({ type: type, payload: payload }); };
    exports.createAction = createAction;
});
//# sourceMappingURL=createAction.js.map

i try to add to my next.config file

require('amd-loader') but it doesnt work too

i was looking for answer around a week, but it all was useless could somebody give a help?

PS next.config.js

const path = require('path');
const withCSS = require('@zeit/next-css');
const withSass = require('@zeit/next-sass');
const webpack = require('webpack');
const ES6Promise = require("es6-promise");
ES6Promise.polyfill();

if (typeof define !== 'function') {
    var define = require('amdefine')(module); // this doesn't work too
}

module.exports = withCSS(withSass({
    webpack: function (config, options) {
        config.plugins.push(new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            Promise: 'es6-promise-promise',
        }))
        config.module.rules.push(
            {
                test: /.(js|jsx|tsx|ts)$/,
                exclude: /node_modules/,
                include: path.resolve('./client/pages/'),
                use: {
                    loader: "ts-loader",
                    options: {
                        configFile: './src/client/app/tsc.json',
                    },
                },
            },
            {
                test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
                use:{
                    loader: 'url-loader',
                    options: {
                        name: '[name].[ext]',
                        limit: 10000000,
                        esModule : false,
                    }
                }
            },
        )
        return config
    }
}))

and tsconfig

  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "target": "ES6",
    "moduleResolution": "Node",
    "sourceMap": true,
    "module": "commonjs",
    "jsx": "preserve",
    "allowJs": true,
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": false,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "baseUrl": "./src/client/",
    "isolatedModules": true
  },
  "files": [
    "./src/pages/index.tsx"
  ],
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
  ],
  "exclude": [
    "src/**/*.proto",
    "node_modules"
  ]
}```

Solution

  • Probably you are trying to import some library on server which require browser environment

    looking from the error trace its /node_modules/@glonassmobile/codebase-web/createAction.js:1:1

    If you decide to use this library, you need to check if you are server or client side like const isServer = typeof window === 'undefined', and import the library only in case you are client side