Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 15 hours ago.
Improve this question
I am working on a next js 13 application in which I am making an image upload service through the formidable package and the backblaze b2 object storage service, I get this error after starting my application in next js, it worked fine but I've been getting this error for a while now, I've already tried uninstalling the node modules and installing the latest versions of the npm dependencies.
error stacktrace
Critical dependency: the request of a dependency is an expression
Import trace for requested module:
./node_modules/formidable/src/Formidable.js
./node_modules/formidable/src/index.js
./controllers/uploadController.js
./controllers/productController.js
./app/page.jsx
warn - Fast Refresh had to perform a full reload due to a runtime error.
error - node_modules\backblaze-b2\lib\b2.js (24:4) # axiosRetry
error - TypeError: axiosRetry is not a function
at new B2 (webpack-internal:///(sc_server)/./node_modules/backblaze-b2/lib/b2.js:22:8)
at eval (webpack-internal:///(sc_server)/./lib/storageB2.js:8:18)
at (sc_server)/./lib/storageB2.js (C:\Users\fxliv\OneDrive\Escritorio\tuganga\.next\server\app\page.js:1005:1)
at __webpack_require__ (C:\Users\fxliv\OneDrive\Escritorio\tuganga\.next\server\webpack-runtime.js:33:43)
at eval (webpack-internal:///(sc_server)/./controllers/uploadController.js:5:72)
at (sc_server)/./controllers/uploadController.js (C:\Users\fxliv\OneDrive\Escritorio\tuganga\.next\server\app\page.js:983:1)
at __webpack_require__ (C:\Users\fxliv\OneDrive\Escritorio\tuganga\.next\server\webpack-runtime.js:33:43)
at eval (webpack-internal:///(sc_server)/./controllers/productController.js:9:75)
at (sc_server)/./controllers/productController.js (C:\Users\fxliv\OneDrive\Escritorio\tuganga\.next\server\app\page.js:972:1)
at __webpack_require__ (C:\Users\fxliv\OneDrive\Escritorio\tuganga\.next\server\webpack-runtime.js:33:43) {
type: 'TypeError',
page: '/'
}
null
I need someone to help me to continue working on my project, thanks!!
i am attempting to install vuetify's Internationalization (i18n) feature.
following the documentation provided by vuetify here https://vuetifyjs.com/en/features/internationalization/
i had already installed vuetify using the CLI approach, and have been customizing and using vuetify for a couple of days in this project before exploring this translation feature.
so im trying to install this feature after having installed vuetify, dont know if that is the cause of any issues or not.
so i attempted to run vue add vuetify -lang
which triggered this response
📦 Installing vue-cli-plugin-vuetify...
removed 22 packages, and audited 674 packages in 2s
83 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
✔ Successfully installed plugin: vue-cli-plugin-vuetify
🚀 Invoking generator for vue-cli-plugin-vuetify...
ERROR Error: Cannot find module '../presets/undefined'
Require stack:
- D:\Projects\DigitalCV\node_modules\vue-cli-plugin-vuetify\generator\index.js
- D:\Projects\DigitalCV\package.json
Error: Cannot find module '../presets/undefined'
Require stack:
- D:\Projects\DigitalCV\package.json
at Module._resolveFilename (node:internal/modules/cjs/loader:995:15)
at Module._load (node:internal/modules/cjs/loader:841:27)
at Module.require (node:internal/modules/cjs/loader:1061:19)
at require (node:internal/modules/cjs/helpers:103:18)
at module.exports (D:\Projects\DigitalCV\node_modules\vue-cli-plugin-vuetify\generator\index.js:15:10)
at Generator.initPlugins (C:\Users\spels47\AppData\Roaming\npm\node_modules\#vue\cli\lib\Generator.js:180:13)
at Generator.generate (C:\Users\spels47\AppData\Roaming\npm\node_modules\#vue\cli\lib\Generator.js:198:16)
at runGenerator (C:\Users\spels47\AppData\Roaming\npm\node_modules\#vue\cli\lib\invoke.js:111:19)
at async invoke (C:\Users\spels47\AppData\Roaming\npm\node_modules\#vue\cli\lib\invoke.js:92:3)
checking the file paths provided in the require stack section showed me the files were in fact there.
i decided to check inside the generator\index.js file
there i could see the part where '../presets/undefined' came from
module.exports = (api, opts) => {
const { fileExists } = require('../util/helpers')
const alaCarte = require('./tools/alaCarte')
const fonts = require('./tools/fonts')
const polyfill = require('./tools/polyfill')
const vite = require('./tools/vite')
const vuetify = require('./tools/vuetify')
const fs = require('fs')
if (opts.install !== 'configure') {
opts = {
hasTS: api.hasPlugin('typescript') || Object.keys(api.generator.pkg.devDependencies).includes('typescript'),
...opts,
...require(`../presets/${opts.install}`).plugins['vue-cli-plugin-vuetify'],
}
}
here we can see that undefined was supposed to be opts.install but its undefined for some reason.
i dont know why this installation process fails or how i can fix it, does anyone know or have any ideas as to what the issue could be here?
i tried to run vue add vuetify -lang and expected the installation to run its course without errors.
i tried looking in the file paths provided in the error and while i did find what the undefined value was supposed to be provided by the opts.install property. this information doesnt tell me anything i can use to further debug the error.
tried checking out similar stack overflow issues,
closest i found was this Unable to install vuetify
but in that case vuetify failed to install in the first place, my case is different because vuetify did install correctly but fails when trying to add the lang feature.
I'm using Vue 2 (but I think that my question isn't Vue-specific). The application uses a WebAssembly library of mine that I've installed with npm install [directory_name]. When I run npm run serve, it serves the .wasm file as text/html instead of application/wasm.
I add this to vue.config.js:
module.exports = {
// ...
devServer: {
mimeTypes: { 'application/wasm': ['wasm'] },
},
};
But in that case, I get this:
Error: Attempt to change mapping for "wasm" extension from "application/wasm" to "application/wasm". Pass force=true to allow this, otherwise remove "wasm" from the list of extensions for "application/wasm".
Is it possible cli-vue-service/webpack-dev-server already knows about .wasm files, and I've understood something wrong about how we install libraries with npm install?
I'm answering my own question.
It's tricky (assuming it's possible) to get webpack to load the .wasm file because of the way webpack works. What I did was add -s "SINGLE_FILE=1" to emcc's options so that it does not produce a .wasm file; instead, it embeds the wasm in the glue .js file.
Btw I came here after getting this error:
Uncaught (in promise) TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.
I had a typo in my wasm fetch URL and I was fetching a file that didn't exist, but it was giving me this mime type error. Once I fixed the typo, everything worked. I didn't have to add the mime type to the webpack config. (maybe they fixed it since you posted in February.) I'm using the Vue development server.
I was trying to run webpack-4 first time
webpack ./src/js/app.js ./dist/app.bundle.js
it shows warning / error :
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
ERROR in multi ./src/js/app.js ./dist/app.bundle.js
Module not found: Error: Can't resolve './dist/app.bundle.js' in 'D:\wamp64\www\webpack-4'
# multi ./src/js/app.js ./dist/app.bundle.js
Then i tried to change the mode
webpack --mode development
it shows :
ERROR in Entry module not found: Error: Can't resolve './src'
Resolved
Spent a lot of time to find out the solution.
Solution: Add index.js file into src folder.
That's it!.. solved :)
During Research, I found some facts about webpack 4 :
webpack 4 doesn’t need a configuration file by default!
webpack 4 there is no need to define the entry point: it will take ./src/index.js as the default!
Met this problem when deploying on now.sh
Solution: Use Default Behavior
Move entry point to src/index.js.
This leverage webpack#4 default value for entry:
By default its value is ./src/index.js, but you can specify a
different (or multiple entry points) by configuring the entry property
in the webpack configuration.
Solution: Be Specific
As #Lokeh pointed out, if you don't want to change your JS file location you can always use path.resolve() in your webpack.config.js:
entry: path.resolve(__dirname, 'src') + '/path/to/your/file.js',
Adding a context explicitly in webpack.config.js fixed issue for me. Adapt the following piece of code in your project:
context: __dirname + '/src',
entry: './index.js',
webpack ./src/js/app.js --output ./dist/app.bundle.js --mode development
This worked for me. I had the same trouble, it is because of a new version of webpack
webpack version 4.46.0
Perhaps someone gets stuck during migration from webpack 4 to 5.
in case of multiple webpack config files and if anyone uses merge:
Say webpack.common.js relies on some variables passed from cli eg:
module.export = (env) => {
const {myCustomVar} = env;
return {
// some common webpack config that uses myCustomVar
}
}
When you require common config in say webpack.prod.js:
const { merge } = require('webpack-merge'); // <-- `merge` is now named import if you are using > v5
const common = require('./webpack.common.js');
const getProdConfig = () => {....}
module.exports = (env) => {
return merge(common(env), getProdConfig()); // <-- here, `call` common as its exported as a fn()
};
I had a similar error and was able to resolve it with the command webpack src/index.js -o dist/bundle.js the -o did the trick. The issue wasn't the location of index.js it was missing the operator for defining the output path location.
See https://webpack.js.org/api/cli/
Version of webpack was 4.44.1
Other solutions didn't work. I solved this by adding this to package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack" //this
},
Then npm run build and it works. At first i've tried with npx webpack. Would love to know why it works.
Just leaving this here, incase someone is not paying attention to the details like me, I had the same error, but because my webpack config file was named webpack.config instead on webpack.config.js, so my custom configurations were never picked and webpack was falling back to the defaults entry "src/index.js"
As of webpack ^4.29.6 you don't need any configuration file so instead of giving path in package.json we need to write simply "build": "webpack" and keep index.js as entry point in src folder. However if you want to change entry point you can do so in webpack config file
For Rails 6 application this steps worked for me:
1) bundle exec rails webpacker:install
system will reinstall webpacker but will rewrite few files:
modified: config/webpack/environment.js
modified: config/webpacker.yml
modified: package.json
modified: yarn.lock
2) Return configs to initial state:
git checkout config/webpack/environment.js
git checkout config/webpacker.yml
package.json and yarn.lock you can leave as they are
Spent a lot of time similarly to others to get around this annoying problem. Finally changed webpack.config.js as follows:-
output: {
path: path.resolve(__dirname, './src'), //src instead of dist
publicPath: '/src/', //src instead of dist
filename: 'main.js' //main.js instead of build.js
}
...as Edouard Lopez and Sabir Hussain mentioned that you don't need to mention an entry point, removed that also and the app compiled after a long frustration.
So my problem, which I would wager is a lot of people's problem is that I set the entry path based on my whole app root. So in my case, it was /client/main.ts. But because my webpack.config.js file was actually inside /client, I had to move into that folder to run webpack. Therefore my entry was now looking for /client/client/main.ts.
So if you get this error you need to really look at your entry path and make sure it is right based on where you are running webpack and where your webpack.config.js file is. Your entry path needs to be relative to where you are running webpack. Not relative to your app root.
I had this problem when changing between React/Rails gems. Running rails webpacker:install restored me to the Rails webpacker defaults, but also overwrote all of my config files. Upon closer inspection, the culprit turned out to be my webpack/development.js file, which in a previous gem version had gotten modified from this Rails webpacker default:
process.env.NODE_ENV = process.env.NODE_ENV || 'development'
const environment = require('./environment')
module.exports = environment.toWebpackConfig()
Once I restored the file to those contents, this error went away. Specifically I had been missing the module.exports = environment.toWebpackConfig() line, which apparently is pretty important for those who want to avoid Rails webpacker thinking it needs a src/index.js file (it doesn't)
After adding a new dependency, I get the error message "Unable to resolve module path" in a red screen in my React Native app. I've tried clearing the cache as the screen instructs.
(question is brief as I'm answering it myself)
The error message:
Unable to resolve module path
Should really be:
Unable to resolve module "path"
path is the name of the module it can't load! I was reading the error message as "can't resolve a path to the module".
So the root cause is, the file it lists in the error message is importing the native Node module path, which isn't available on React Native.
The solution is to npm install -D path, which is a replica implementation.
Any imports from #babel/core package is causing this error.
Some code editors are inserting the import line automatically.
For example, import { types } from '#babel/core' is inserted by Visual Studio Code when you enter types.
If you remove the imports from #babel/core in the codes, it will be fixed.
Quote from chronikum on react-native github issues for future readers
Just check if you somewhere accidentally imported something from
#babel/core.
Here is the original link
https://github.com/facebook/react-native/issues/27522#issuecomment-568306279
None of the answers are really helpful, I found that the problem in my case was that the macros plugin was missing in my babel configuration file.
This is what I had in my babel.config.js
module.exports = {
presets: ["module:metro-react-native-babel-preset"],
};
After adding the macros plugin
module.exports = {
plugins: ["macros"],
presets: ["module:metro-react-native-babel-preset"],
};
If you get this error, most like you are missing a plugin in your babel config.
I have solved my issue by the below steps.
Read the error message carefully, the error is node modules path(mentioned as NO: 1 in below image). In my case, I have the "just-cli/" module (Mentioned NO: 2).
search the module (just-cli) you have imported somewhere in your project and just Remove it. The problem will be solved.