I'm hoping this is a quick fix and someone less dense than I can help me see the light.
I am trying to set up my first Rails 7 with React app. I installed rails with the esbuild flag:
rails new project_name -d postgresql -j esbuild
I yarn added react, react-dom and react-router-dom
I also created a react './components' folder in my 'app/javascript' folder and I'm importing it into the application.js file which is the entry point for the esbuild build script in the package.json.
// Entry point for the build script in your package.json
import "@hotwired/turbo-rails";
import "./controllers";
import "./components";
When I bin/dev, the server spins up properly and I get my project index page. However, esbuild throws the following error.
15:05:03 js.1 | started with pid 6552
15:05:03 js.1 | yarn run v1.22.10
15:05:03 js.1 | $ esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets --watch
15:05:03 js.1 | ✘ [ERROR] Could not resolve "./components"
15:05:03 js.1 |
15:05:03 js.1 | app/javascript/application.js:4:7:
15:05:03 js.1 | 4 │ import "./components";
15:05:03 js.1 | ╵ ~~~~~~~~~~~~~~
15:05:03 js.1 |
15:05:03 js.1 | 1 error
15:05:03 js.1 | [watch] build finished, watching for changes...
I don't understand why this statement can't be resolved when the import "./controllers"; statement functions just fine. I've looked through the esbuild docs and searched for other posts here, but can't seem to find anything that deals with this error.
Hopefully, I'm being dim and there's a simple solution. Any help or guidance would be greatly appreciated from greater minds than my own. Thank you.
My package.json is below as well in case that is useful:
{
"name": "app",
"private": "true",
"dependencies": {
"@hotwired/stimulus": "^3.2.1",
"@hotwired/turbo-rails": "^7.2.4",
"esbuild": "^0.16.10",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.6.1"
},
"scripts": {
"build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets"
}
}
I have tried changing the name of the components folder and using different syntax
import 'components';
import '/components';
import "./test";
etc... I've read through the esbuild docs and tried completely building again from scratch and keep getting stuck with the same error.
from esbuild throwing `[ERROR] Could not resolve [import statement]` while setting up Rails 7/React application
No comments:
Post a Comment