i just updated my create-next-app from 9.1 to 9.3(the latest version) and got this error, couldn't figure out how to solve it. Help pls!
and now again, i installed npm with my older package.json file and still getting this error... what is it? , if anyone know pls share it.
[ error ] ./node_modules/next/dist/client/index.js
ReferenceError: D:\code\project\webapp\node_modules\next\dist\client\index.js: Unknown helper createSuper
[ wait ] compiling ...
[ error ] ./node_modules/next/dist/client/index.js
ReferenceError: D:\code\project\webapp\node_modules\next\dist\client\index.js: Unknown helper createSuper
[ event ] build page: /next/dist/pages/_error
[ wait ] compiling ...
[ error ] ./node_modules/next/dist/client/index.js
ReferenceError: D:\code\project\webapp\node_modules\next\dist\client\index.js: Unknown helper createSuper
Error: Cannot find module 'D:\code\project\webapp\.next\build-manifest.json'
Require stack:
- D:\code\project\webapp\node_modules\next\dist\next-server\server\load-components.js
- D:\code\project\webapp\node_modules\next\dist\next-server\server\api-utils.js
- D:\code\project\webapp\node_modules\next\dist\next-server\server\next-server.js
- D:\code\project\webapp\node_modules\next\dist\server\next.js
- D:\code\project\webapp\node_modules\next\dist\server\lib\start-server.js
- D:\code\project\webapp\node_modules\next\dist\cli\next-dev.js
- D:\code\project\webapp\node_modules\next\dist\bin\next
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:954:17)
at Function.Module._load (internal/modules/cjs/loader.js:847:27)
at Module.require (internal/modules/cjs/loader.js:1016:19)
at require (internal/modules/cjs/helpers.js:69:18)
at Object.loadComponents (D:\code\project\webapp\node_modules\next\dist\next-server\server\load-components.js:29:9)
Seems to be an issue introduced by babel-loader#8.1.0
See https://github.com/zeit/next.js/discussions/11233#discussioncomment-1739
Either upgrade Babel to 7.9.0 or pin babel-loader to 8.0.6.
Note - If you are on Heroku: when upgrading, make sure the node-modules contains the correct babel package. In heroku this is possible with heroku ps:exec and looking in the node-modules/ directory.
Many other packages may be relying on an older version of Babel and they will need to be upgraded as well.
My fix for
error - ./node_modules/next/dist/client/dev/amp-dev.js
It seems that your global ./node_modules/next/dist/client package is missing or misconfigured.
My Solution was to
Delete this folder or even the entire next folder from your root ./node_modules/next
Run npm i to install new node_modules packages
This resolved my errors.
Related
I don't know what is going on with my PC but every time I create the NextJS application and run development. It will return this error
error - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[2]!./styles/globals.css
TypeError: Cannot read property 'config' of undefined
(node:20136) [DEP_WEBPACK_MODULE_ISSUER] DeprecationWarning: Module.issuer: Use new ModuleGraph API
(Use `node --trace-deprecation ...` to show where the warning was created)
wait - compiling /_error (client and server)...
error - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[2]!./styles/globals.css
TypeError: Cannot read property 'config' of undefined
at runMicrotasks (<anonymous>)
<w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: ENOENT: no such file or directory, rename 'C:\laragon\www\bayu-personal-website\.next\cache\webpack\client-development-fallback\0.pack_' -> 'C:\laragon\www\bayu-personal-website\.next\cache\webpack\client-development-fallback\0.pack'
I can't find any cause of this error on my project because it happened after I run yarn create-next-app and yarn dev. Thank you in advance.
Create a postcss.config.js file in the root directory of my NextJS project, fixed it for me.
Example code
module.exports = {
plugins: {
},
}
I manage to create the nextJS project on Users/ directory and it turns out to fix the error. Before that, I created the project outside of Users/ directory (directly on C: and create folder on there). So maybe it was a permission thing that make the project can't run.
I dont really know why, but I installed postcss-loader, css-loader and also created a config file for postcss, postcss.config.js and then the server ran successfully!!
try out that too, I think postcss.config.js is the problem
I was facing the same problem and i fixed it by restarting the IDE AND IT JUST WORK !!
I got a very similar error while updating Tailwind from v2 to v3: TypeError: Cannot read property 'config' of undefined. This was also caused by the postcss.config.js file, as others have suggested. I needed to remove '#tailwindcss/jit': {} from the plugins section. My working config is now:
module.exports = {
plugins: {
autoprefixer: {},
},
}
Run this command in CLI : npm install postcss-flexbugs-fixes postcss-preset-env --save-exact
in postcss.config.js file , write following code:
module.exports={
"plugins" :[
"postcss-flexbugs-fixes",
[
"postcss-preset-env",
{
"autoprefixer": {
"flexbox": "no-2009"
},
"stage": 3,
"features": {
"custom-properties": false
}
}
]
]
}
and you are done ... this worked for me.
Need to create a postcss.config.js file in your root directory if it isnt there from init.
"PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more." from postcss Github
postcss.config.js:
module.exports = {
plugins: {
},
}
I am setting up a new react with rails (learning) application but can't get past this error. I am using rails 6. I have webpacker installed and setup in my app.
I am getting error at this line in my application.html.erb
<%= javascript_pack_tag 'hello_react' %>
When i hit / i get this error:
Webpacker can't find hello_react.js in /Users/apple/www/projects/react/example/public/packs/manifest.json. Possible causes:
1. You want to set webpacker.yml value of compile to true for your environment
unless you are using the `webpack -w` or the webpack-dev-server.
2. webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's config/webpacker.yml file.
4. Your webpack configuration is not creating a manifest.
Your manifest contains:
{
"application.js": "/packs/js/application-3dd0dc24d9c39bc09227.js",
"application.js.map": "/packs/js/application-3dd0dc24d9c39bc09227.js.map",
"entrypoints": {
"application": {
"js": [
"/packs/js/application-3dd0dc24d9c39bc09227.js"
],
"js.map": [
"/packs/js/application-3dd0dc24d9c39bc09227.js.map"
]
}
}
}
Can someone please guide me on what i might be doing wrong? I have removed node_modules and re-installed webpack and yarn in my application but the error persists.
I would suggest to run bin/webpack-dev-server as described on the Rails Guide
I think your problem is a mapping problem that will be solve locally with this.
Do not forget add the requirement of hello_react.js on your packs folder in case you're using it.
I'm upgrading packages in my Next app, including Next 11 and React v17. I tried everything I could find online but still getting this error.
Here's full console output.
Error: Cannot find module 'react/jsx-dev-runtime'
Require stack:
- /Users/wk/repo/.next/server/pages/_document.js
- /Users/wk/repo/guest/node_modules/next/dist/next-server/server/require.js
- /Users/wk/repo/guest/node_modules/next/dist/next-server/server/load-components.js
- /Users/wk/repo/guest/node_modules/next/dist/next-server/server/api-utils.js
- /Users/wk/repo/guest/node_modules/next/dist/next-server/server/next-server.js
- /Users/wk/repo/guest/node_modules/next/dist/server/next.js
- /Users/wk/repo/guest/node_modules/next/dist/server/lib/start-server.js
- /Users/wk/repo/guest/node_modules/next/dist/cli/next-dev.js
- /Users/wk/repo/guest/node_modules/next/dist/bin/next
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:957:15)
at Function.mod._resolveFilename (/Users/wk/repo/guest/node_modules/next/dist/build/webpack/require-hook.js:4:1855)
at Function.Module._load (internal/modules/cjs/loader.js:840:27)
at Module.require (internal/modules/cjs/loader.js:1019:19)
at require (internal/modules/cjs/helpers.js:77:18)
at Object.react/jsx-dev-runtime (/Users/wk/repo/.next/server/pages/_document.js:227:18)
at __webpack_require__ (/Users/wk/repo/.next/server/webpack-runtime.js:33:42)
at eval (webpack-internal:///./src/pages/_document.js:5:79)
at Object../src/pages/_document.js (/Users/wk/repo/.next/server/pages/_document.js:66:1)
at __webpack_require__ (/Users/wk/repo/.next/server/webpack-runtime.js:33:42) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'/Users/wk/repo/.next/server/pages/_document.js',
'/Users/wk/repo/guest/node_modules/next/dist/next-server/server/require.js',
'/Users/wk/repo/guest/node_modules/next/dist/next-server/server/load-components.js',
'/Users/wk/repo/guest/node_modules/next/dist/next-server/server/api-utils.js',
'/Users/wk/repo/guest/node_modules/next/dist/next-server/server/next-server.js',
'/Users/wk/repo/guest/node_modules/next/dist/server/next.js',
'/Users/wk/repo/guest/node_modules/next/dist/server/lib/start-server.js',
'/Users/wk/repo/guest/node_modules/next/dist/cli/next-dev.js',
'/Users/wk/repo/guest/node_modules/next/dist/bin/next'
]
}
Would appreciate any suggestions. Thanks!
EDIT
I already tried removing node_modules, yarn.lock file etc.
Updating react and react-dom didn't work?
I had the same problem after updating next, I removed the .next folder before updating react and react-dom and after that it worked. I am not sure that removing the folder is needed.
I updated both react and react-dom to 17.0.2.
I also ran into this issue, and simply removing the webpack folder from .next solved the issue.
React noob here. Trying to clone and run https://github.com/strangebnb/react-airbnb
I clone. run npm install. Then webpack but I get
ERROR in ./~/react-tap-event-plugin/src/injectTapEventPlugin.js
Module not found: Error: Cannot resolve module 'react/lib/EventPluginHub' in /Users/thomas/tom/node_modules/react-tap-event-plugin/src
# ./~/react-tap-event-plugin/src/injectTapEventPlugin.js 23:2-37
ERROR in ./~/react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Cannot resolve module 'react/lib/EventConstants' in /Users/thomas/tom/node_modules/react-tap-event-plugin/src
# ./~/react-tap-event-plugin/src/TapEventPlugin.js 22:21-56
ERROR in ./~/react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Cannot resolve module 'react/lib/EventPluginUtils' in /Users/thomas/tom/node_modules/react-tap-event-plugin/src
# ./~/react-tap-event-plugin/src/TapEventPlugin.js 23:23-60
ERROR in ./~/react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Cannot resolve module 'react/lib/EventPropagators' in /Users/thomas/tom/node_modules/react-tap-event-plugin/src
# ./~/react-tap-event-plugin/src/TapEventPlugin.js 24:23-60
ERROR in ./~/react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Cannot resolve module 'react/lib/SyntheticUIEvent' in /Users/thomas/tom/node_modules/react-tap-event-plugin/src
# ./~/react-tap-event-plugin/src/TapEventPlugin.js 25:23-60
ERROR in ./~/react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Cannot resolve module 'react/lib/ViewportMetrics' in /Users/thomas/tom/node_modules/react-tap-event-plugin/src
# ./~/react-tap-event-plugin/src/TapEventPlugin.js 27:22-58
ERROR in ./~/react-portal/build/portal.js
Module not found: Error: Cannot resolve module 'react/lib/CSSPropertyOperations' in /Users/thomas/tom/node_modules/react-portal/build
# ./~/react-portal/build/portal.js 17:29-71
I found https://github.com/thereactivestack/meteor-webpack/issues/21 (I see this is very recent, read: yesterday), and after messing around with my packages.json, changing react, react-dom, material-ui version numbers and running npm i --save react-tap-event-plugin, I got down to 'only' 1 error message
ERROR in ./~/react-portal/build/portal.js
Module not found: Error: Cannot resolve module 'react/lib/CSSPropertyOperations' in /Users/thomas/react-airbnb/node_modules/react-portal/build
# ./~/react-portal/build/portal.js 17:29-71
I'm pretty new and I'm not sure how to go about fixing this. Any hints greatly welcomed.
Thanks
Due to update in React, react-tap-event-plugin breaks
Change react-tap-event-plugin to ^2.0.0 in your package.json if using react version ^15.4.0.
I forked that repo and fixed this issue in my repo. Also, sent pull request to the owner of original repo. Here's link to my forked repo:
https://github.com/pankajvishwani/react-airbnb
If you don't want to clone my repo, you can add the following in webpack.config.js:
var reactDomLibPath = path.join(__dirname, "./node_modules/react-dom/lib");
var alias = {};
["EventPluginHub", "EventConstants", "EventPluginUtils", "EventPropagators",
"SyntheticUIEvent", "CSSPropertyOperations", "ViewportMetrics"].forEach(function(filename){
alias["react/lib/"+filename] = path.join(__dirname, "./node_modules/react-dom/lib", filename);
});
module.exports = {
...
resolve: {alias: alias},
...
}
UPDATE: As of React 16 the react-tap-event-plugin is deprecated and no longer required https://www.npmjs.com/package/react-tap-event-plugin
Old solution redundant as of React 16
Updating the react tap event plugin to over 2.0.1 will fix your issue if you're using React 15.4.0.
A new React version has been released (https://github.com/facebook/react/blob/master/CHANGELOG.md), and I read recently that there have been big changes where react-dom still secretly lived on in the react package but is now being removed. If you read 15.4.0, the first point: 'React package and browser build no longer "secretly" includes React DOM. (#sebmarkbage in #7164 and #7168)'
Also reading the tap event plugins npm docs: Only the latest tap event plugin (v2.0.1 currently) supports React 15.4+. https://www.npmjs.com/package/react-tap-event-plugin
Check the version of React and react-tap-event-plugin.
npm list --depth=0
In the short term, you could fix React to a specific earlier version.
If your package.json file contains something like:
"react": "^15.3.2",
in the dependencies section, you could change it to say
"react": "=15.3.2”,
For react 16+ react-tap-event-plugin is not required anymore:
react-tap-event-plugin
I'm currently using the mean.io stack for a personal project and everything runs smoothly locally. I tried to deploy to Heroku and I'm having problems with one module not instantiating properly! I found similar questions here on Stack Overflow, but none of the answers worked for me.
Here's my error:
Error: [$injector:modulerr] Failed to instantiate module mean due to:
[$injector:modulerr] Failed to instantiate module angularFileUpload due to:
[$injector:nomod] Module 'angularFileUpload' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. (dist.min.js)
It seems like my module is not loading. But according to the logs, it installed properly:
mean#0.3.3 postinstall /tmp/build_5d155aeb-14b5-4414-af19-986a68df3b19
node node_modules/bower/bin/bower install
bower ng-file-upload-shim#* not-cached git://github.com/danialfarid/angular-file-upload-shim-bower.git#*
bower ng-file-upload-shim#* resolve git://github.com/danialfarid/angular-file-upload-shim-bower.git#*
bower angular#* not-cached git://github.com/angular/bower-angular.git#*
bower angular#* resolve git://github.com/angular/bower-angular.git#*
...
bower ng-file-upload#* not-cached git://github.com/danialfarid/angular-file->upload-bower.git#*
bower ng-file-upload#* resolve git://github.com/danialfarid/angular-file->upload-bower.git#*
...
bower ng-file-upload-shim#* install ng-file-upload-shim#1.4.0
bower ng-file-upload#* install ng-file-upload#1.4.0
...
bower angular#1.2.19 install angular#1.2.19
...
Done, without errors.
Note: angularFileUpload by Danial Farid requires that the shim.js file is loaded before angular, which in turn gets loaded before angularFileUpload. Seems like angular got installed afterwards, would that be a problem?
Here's my module, where I declare dependency:
angular.module('mean.thingy', ['angularFileUpload','ngAnimate']).controller(...
and finally, my assets.json:
"js": {
"public/build/js/dist.min.js": [
"public/system/lib/jquery/dist/jquery.min.js",
"public/system/lib/angular-file-upload-master/dist/angular-file-upload-shim.js",
"public/system/lib/angular/angular.js",
...
"public/system/lib/angular-file-upload-master/dist/angular-file-upload.js",
"public/init.js",
"public/*/*.js",
"public/*/{controllers,routes,services}/*.js"
]
}
I'd appreciate any help or hunches that you may have! Thanks!
I got the same error and it got fixed by adding the file path to karma.conf.js
I had this same problem, I am using mean.js rather that mean.io so might be slightly different.
You were on the right track when you asked "Seems like angular got installed afterwards, would that be a problem?" I believe so.
To fix this, make sure that in your production.js config you put the scripts in the right order as well as in all.js e.g.
'public/lib/ng-file-upload/FileAPI.min.js',
'public/lib/ng-file-upload/angular-file-upload-shim.min.js',
'public/lib/angular/angular.js',
'public/lib/ng-file-upload/angular-file-upload.min.js',
Change your upload dependency declaration to:
angular.module('mean.thingy', ['ngFileUpload','ngAnimate'])...
In my case it was because my local copies of angular-file-upload-shim.min.js and angular-file-upload.min.js were corrupted (I did not fetch them using bower).
Try downloading the raw .js files from the author's github page: https://github.com/danialfarid/angular-file-upload/tree/master/dist , click on the file, click on "Raw", then point your JS file to the local copies of these files.