a suggestion for "require is not defind"
terralian opened this issue · 1 comments
rules.webpack.js
has a problem:
if some module use typeof require
to check require is define or not
the boilerplate default webpack
rule config will change it , like:
var u = typeof require && require
// compile
var u = true && require
so it will cause a error when app build: ReferenceError: require is not defined
you can change this code in rules.webpack.js
below and solve this problem at line 7
- test: /\.(m?js|node)$/,
+ test: /\.(node)$/,
I don't know why, but it‘s useful
A sample:
-
download the package
-
yarn add exceljs
-
use
exceljs
inApp.tsx
like
+ import Excel from 'exceljs'
export function App() {
+ const workbook = new Excel.Workbook()
- yarn start, then it's broken
- change your
rules.webpack.js
and restart, back to normal.
I spent a day debugging the error require is not defined
. I did not even use require in the renderer.
The culprit is @marshallofsound/webpack-asset-relocator-loader
(or @versel/webpack-asset-relocator-loader
or @timfish/webpack-asset-relocator-loader
) which adds support for locating node_modules
in renderer. According to the current convention, renderer thread should not have access to native node modules. nodeIntegration: false
is set by default. (also contextIsolation: true
).
If you keep using ipcMain
and ipcRenderer
for communication, and don't require any modules in renderer, you will have to remove the loader. There error will persist even if you don't require any modules in renderer. This is because the loaders themselves include the __dirname
(or require()
) into your renderer.
We have two different solutions:
- Keep using
ipcMain
andipcRenderer
for communication in the app, and edit the/webpack/rules.webpack.js
and remove the following lines. And create a newrules.webpack.js
file for main only, with this loader.
{
test: /\.(m?js|node)$/,
parser: { amd: false },
use: {
loader: '@marshallofsound/webpack-asset-relocator-loader',
options: {
outputAssetBase: 'native_modules',
},
},
},
- Set
nodeIntegration: true
andcontextIsolation: false
. You can no longer useipcMain
andipcRenderer
. Doing this will also make the app less secure, as the renderer could be utilize to perform malicious operations on the computer.