Develop Reference

Critical dependency: the request of a dependency is an expression webpack svelte

When I try to import Gun into a svelte component using var Gun = require("gun/gun"), all I get is this error:
WARNING in ./node_modules/gun/gun.js 5:16-28
Critical dependency: the request of a dependency is an expression
# ./src/Header.svelte 196:11-29
# ./src/App.svelte 16:0-37 23:14-20 125:41-47
# ./src/main.js 3:0-31 5:16-19
The webpack docs say that this is due to my request containing expressions, but this doesn't seem like the case.

For importing the gun in svelte js file try this code below
import GUN from 'gun';
This will work

Problem in importing chessboard.js in vue application

I am trying to import chessboard.js on my jetstream-vue application. After creating the project I ran
npm install #chrisoakman/chessboardjs
and it's in my node_modules folder. But when i tried import Chessboard from '#chrisoakman/chessboardjs' on app.js it shows error as
ERROR in ./resources/js/app.js
Module not found: Error: Can't resolve '#chrisoakman/chessboardjs' in '/home/user/project-chess/resources/js'
# ./resources/js/app.js 9:0-51
# multi ./resources/js/app.js ./resources/css/app.css
Is there any other way I should try to import it or from to a different file than app.js.

#chrisoakman/chessboardjs can't be imported, since it doesn't export anything.
Look at the code, at the end it says:
// TODO: do module exports here

Webpack Build generation Issue, Module not found: Error: Can't resolve (Note: working in local pc)

I have two imports
import OptionCard from '../OptionCard';
import RolesDropdown from '../RolesDropdown';
First import is working fine in local system and aws server, but the second import has issue in aws server.
These imports are working fine in local system. when we try to do build in aws server, we are getting this error.
ERROR in ./public/js/react/Pack/Share/components/Forms/InviteByLinkForm.js
Module not found: Error: Can't resolve '../RolesDropdown.js' in '/var/www/html/tigersheet/staging2/releases/release_1592082265023/public/js/react/Pack/Share/components/Forms'
# ./public/js/react/Pack/Share/components/Forms/InviteByLinkForm.js 13:20-50
# ./public/js/react/Pack/Share/components/Forms/Index.js
# ./public/js/react/Pack/Share/SharePopup.js
# ./webpack/js/app.js
Node version 10

Reference error from react inside meteor only when minified

I'm using react inside a meteor app. It works fine when running in development mode, but when I run it in production mode and the code is minified, I get the below ReferenceError and minified react error in the browser console when the app loads. The same thing happens when I try to deploy it.
It's being minified using the built in standard-minifier-js. When I meteor remove this package, it works fine, so it's definitely the minification.
I'm stumped. I know that the line in question is part of react-dom, but I can't figure out which part or why it's only throwing an error after minification.
The react error decoder says:
Should have found an error boundary. This error is likely caused by a bug in React. Please file an issue.
Which isn't much more helpful. Any ideas what could be causing the error, or how to troubleshoot it? I'm using the latest versions of everything, AFAICT:
react version: 16.0.0
meteor version: 1.5.2.2
standard-minifier-js version: 2.1.2
Thanks.
b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:5149 ReferenceError: av is not defined
at b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:4003
at sv (b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:4107)
at dv (b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:4104)
at beginWork (b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:4243)
at ov (b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:4941)
at fv (b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:4976)
at lv (b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:5028)
at mv (b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:5182)
at bv (b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:5164)
at Object.updateContainer (b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:8400)
pv # b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:5149
lv # b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:5042
mv # b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:5182
bv # b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:5164
updateContainer # b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:8400
(anonymous) # b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:5603
unbatchedUpdates # b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:5258
Dr # b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:5602
render # b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:8559
(anonymous) # b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:93855
s # b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:315
u # b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:321
b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:3148 Uncaught Error: Minified React error #183; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=183 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at ot (b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:3148)
at lv (b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:5043)
at mv (b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:5182)
at bv (b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:5164)
at Object.updateContainer (b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:8400)
at b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:5603
at Object.unbatchedUpdates (b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:5258)
at Dr (b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:5602)
at render (b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:8559)
at b2413faf75d38415b6ec79874ae1bd18fb0a8af3.js?meteor_js_resource=true:formatted:93855

I tried another minification package, uglifyjs2, instead of standard-minifier-js and that appears to have worked. But it seems like there's a bug here with either react or meteor.
meteor remove standard-minifier-js
meteor add ssrwpo:uglifyjs2

react or npm issue: Module not found: [CaseSensitivePathsPlugin] `...\react.js` does not match the corresponding path on disk `react`

I'm getting the following errors when I execute the npm start command on a react project.
Failed to compile.
Error in ./~/react-scroll-pagination/dist/index.js
Module not found: [CaseSensitivePathsPlugin] `C:\Users\timhu\Dev\MongoDbStitch\PlateSpace\Web\node_modules\React\react.js` does not match the corresponding path on disk `react`.
# ./~/react-scroll-pagination/dist/index.js 3:27-43
Error in ./~/react-scroll-pagination/dist/index.js
Module not found: [CaseSensitivePathsPlugin] `C:\Users\timhu\Dev\MongoDbStitch\PlateSpace\Web\node_modules\jQuery\dist\jquery.js` does not match the corresponding path on disk `jquery`.
# ./~/react-scroll-pagination/dist/index.js 3:45-62
I'm new to react - but from what I can tell it's a pathing issue where npm install adds modules into the node_modules folder, all with lowercase folder names, but the compiler resolves to folder names with mixed case paths.
How do I fix this? The code is from the MongoDb Stitch PlateSpace tutorial project
Do I updated the existing code (maybe the import statements) or is it a npm or react issue?
Thanks
Tim

I come across the same problem.
I replaced :
import React, {Component} from 'React', with :
import React, {Component} from 'react'.
React is case-sensitive, so be careful and good luck.

For anyone facing this issue who is using CRA, I was getting this error and was not understanding why. My VS Code clearly showed the correctly named file, so I decided to check in the terminal:
ls -la [path/to/file/location]
I then actually saw that the file was in fact lowercase!
I renamed the file via the terminal and re-listed it to confirm:
mv src/create_page/createPage.jsx src/create_page/CreateDashboard.jsx
ls -la [path/to/file/location]
This fixed my issue, so at the end, I am not sure why this happened, maybe because my VS Code was not autosaving before I set the settings flag.

Solved it...
I haven't import all the libraries. So, I went to my root folder and excecute.
npm install
then
npm start

You may be executing the npm install / start inside of the wrong folder. I would delete the current directory and make sure to run the install in:
cd /stitch-examples/helloworld/react-example/
then
npm install
npm start

For this error :
import React from 'react'; in your index.js file . For this error : Error in ./~/react-scroll-pagination/dist/index.js
Module not found: [CaseSensitivePathsPlugin]C:\Users\timhu\Dev\MongoDbStitch\PlateSpace\Web\node_modules\jQuery\dist\jquery.jsdoes not match the corresponding path on diskjquery.
replace this code import React from 'react'; in your index.js file .
For this error :
Error in ./~/react-scroll-pagination/dist/index.js
Module not found: [CaseSensitivePathsPlugin]C:\Users\timhu\Dev\MongoDbStitch\PlateSpace\Web\node_modules\jQuery\dist\jquery.jsdoes not match the corresponding path on diskjquery.
replace the code with import Jquery from './jquery';
Don't worry this errors will shows pretty commonly its because react is a case sensitive.

For me the issue was the files on my disk was named filename.js, but my imports were doing this import thing from 'fileName.js'.
Renaming the file from filename.js to fileName.js on disk fixed the issue.