Webpacker can't find hello_react.js - reactjs

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.

Related

NextJS getting error on the first npm run dev

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: {
},
}

how to apply webpack.config.js file it on react app

I know this question not quiet right. I couldn't figure how ask this question. When I created a react app using npx create-react-app my-app and started the react app I seen some additional logs in my terminal which is for webpack v5.66. You can see this image. I want to remove those logs and only want to see the warnings and errors that comes from my app.
webpack.config.js file
module.exports = {
infrastructureLogging: {
level: 'warn',
},
};
By defaults its 'info' in webpack v5.66
I don't know to much about webpack can anyone tell how to apply this in react app so the logs can be removed. If there any other instruction need to added please suggest me. Help me.

Gatsby: gatsby-plugin-theme-ui 'Tag is not defined' error

I'm very new to Gatsby and have a project bootstrapped with the gatsby-ghost-starter starter. The starter works just fine and now I'm attempting to install a theme for the blog section of the site.
I'm attempting to use gatsby-theme-blog for the blog section. I've ran npm install gatsby-theme-blog in the root of my project and configured gatsby-config to contain:
`gatsby-plugin-theme-ui`,
{
resolve: `gatsby-theme-blog`,
options: {
// basePath defaults to `/`
basePath: `/blog`,
},
},
Note: this is not my entire config file, the file is longer and I'm just showing what I added for the sake of installing this theme.
After installing the theme and configuring it in the config I ran gatsby build and got the following error:
The error is occurring in my node_modules file located at node_modules/gatsby-plugin-theme-ui/src/provider.js:1:1 and node_modules/gatsby-plugin-theme-ui/gatsby-ssr.js:1:1. I tried deleting the comment /* #jsx jsx */ on line 1 and restarting the server. When I remove that comment and restart I get the same error on line 2.
What is causing this error? This is my first time trying to install a theme within an existing project, am I forgetting something?

Unknown helper createSuper Error in Nextjs

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.

Define is not a function with babel-polyfill and webpack on Azure

I'm having an issue when deploying a React/Redux site to Azure App Service.
It builds and deploys fine, but when visiting the site I get JS errors for babel-polyfill - Uncaught TypeError: define is not a function.
We're using webpack with a few loaders and there is one in particular that I have a feeling could be the problem - imports-loader. We had it set as use: 'imports-loader?define=>false' which I believe overrides the define method. I tried this as true also but with no affect. I tried removing the define=>false altogether and the whole build broke...
See webpack config here.
Advice much welcome!
Cheers
Dave

Resources