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"
]
}```
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