Mendix8 error when loading React Widget: React-hot-Loader: Appcontainer should be patched...

Hi,   I developed 2 React Widgets and they work fine most of the time. But at time, I get the error you can see below that makes the whole webserver freeze. In order to get the widget to be loaded succesfully again, I have to manually copy the mpk file in the widgets folder again, press F4 and do an update of the widgets. I sometimes have to try this multiple times before the widget can be succesfully dsiplayed again. Is there something I should patch really or is it something in Mendix8? Thank you, Sebastien  
7 answers

Please update the version of your pluggable-widgets-tools to 8.0.4, that solves the problem.


I just did, thank you.


I did update the version of pluggable-widgets-tools to 8.0.4 as recommended and it did update some dependencies:

 "devDependencies": {
    "@mendix/pluggable-widgets-tools": "^8.0.4",
    "@types/big.js": "^4.0.5",
    "@types/classnames": "^2.2.4",
    "@types/jest": "^24.0.18",
    "@types/react": "^16.9.2",
    "@types/react-dom": "^16.9.0",
    "@types/react-test-renderer": "^16.8.1"

Howerver I now get an error when running npm run dev afterwards:

"plugable-widgets-tools' is not recognized as an internal or external command"

Here is the log: 

0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'dev' ]
2 info using npm@6.9.0
3 info using node@v10.16.2
4 verbose run-script [ 'predev', 'dev', 'postdev' ]
5 info lifecycle assetstatusandcounter@1.0.0~predev: assetstatusandcounter@1.0.0
6 info lifecycle assetstatusandcounter@1.0.0~dev: assetstatusandcounter@1.0.0
7 verbose lifecycle assetstatusandcounter@1.0.0~dev: unsafe-perm in lifecycle true
8 verbose lifecycle assetstatusandcounter@1.0.0~dev: PATH: C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\Users\3p3a5f\Documents\Mendix\MxCustomWidgets-main\CustomWidgets\assetStatusAndCounter\node_modules\.bin;C:\Program Files (x86)\Common Files\Oracle\Java\javapath;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\iCLS\;C:\Program Files\Intel\Intel(R) Management Engine Components\iCLS\;C:\windows\system32;C:\windows;C:\windows\System32\Wbem;C:\windows\System32\WindowsPowerShell\v1.0\;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files\Git\cmd;C:\windows\system32\config\systemprofile\.dnx\bin;C:\Program Files\Microsoft DNX\Dnvm\;C:\Program Files (x86)\Windows Kits\8.1\Windows Performance Toolkit\;C:\Program Files\Microsoft SQL Server\120\Tools\Binn\;C:\Program Files\Cloud Foundry;C:\Program Files\dotnet\;C:\Program Files\nodejs\;C:\Users\3p3a5f\AppData\Local\Microsoft\WindowsApps;C:\Program Files\Siemens\Teamcenter10.1\Community\Utilities\;C:\Users\3p3a5f\AppData\Local\Programs\Microsoft VS Code\bin;C:\Users\3p3a5f\.dotnet\tools;C:\Users\3p3a5f\AppData\Roaming\npm
9 verbose lifecycle assetstatusandcounter@1.0.0~dev: CWD: C:\Users\3p3a5f\Documents\Mendix\MxCustomWidgets-main\CustomWidgets\assetStatusAndCounter
10 silly lifecycle assetstatusandcounter@1.0.0~dev: Args: [ '/d /s /c', 'pluggable-widgets-tools start:ts' ]
11 silly lifecycle assetstatusandcounter@1.0.0~dev: Returned: code: 1  signal: null
12 info lifecycle assetstatusandcounter@1.0.0~dev: Failed to exec dev script
13 verbose stack Error: assetstatusandcounter@1.0.0 dev: `pluggable-widgets-tools start:ts`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:301:16)
13 verbose stack     at EventEmitter.emit (events.js:198:13)
13 verbose stack     at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:198:13)
13 verbose stack     at maybeClose (internal/child_process.js:982:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)
14 verbose pkgid assetstatusandcounter@1.0.0
15 verbose cwd C:\Users\3p3a5f\Documents\Mendix\MxCustomWidgets-main\CustomWidgets\assetStatusAndCounter
16 verbose Windows_NT 10.0.16299
17 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "dev"
18 verbose node v10.16.2
19 verbose npm  v6.9.0
20 error code ELIFECYCLE
21 error errno 1
22 error assetstatusandcounter@1.0.0 dev: `pluggable-widgets-tools start:ts`
22 error Exit status 1
23 error Failed at the assetstatusandcounter@1.0.0 dev script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]



You need to clean your .npmrc inside your user folder, some of the other forum users related that this was the solution for them.


I looked up the c:\Users\<My User>\ folder and cannot see a .npmrc folder, not even in the list of hidden folder.

I could not find it anywhere else.


Hi Robinson,

here is what I did:

Since I could not find the npmrc folder I used a npm command to find where they should be:

The npm command `npm config ls -l` will list all settings including location of the npmrc

in a test case:
globalconfig = "/Users/<username>/.nvm/versions/node/v10.15.3/etc/npmrc"
userconfig = "/Users/<username>/.npmrc"

I looked up the globalconfig and userconfig and in my case, neither had a npmrc folder.
so I removed the node_modules and package-lock.json from the CustomWidget folder, then I executed npm install.
Now when I execute npm run dev, the widget is built sucessfully.
And the widget projects has the following dependency: "@mendix/pluggable-widgets-tools": "^8.0.4"
I haven't been able to reproduce the issue since I loaded the newly created widget in my application.


I hope this helps,



See this: