I have the following directory structure
src +actions +components +reducers +utils -views -app app-container.jsx app.jsx index.jsx -more-info index.js more-info-container.jsx more-info.jsx -overview index.jsx overview-container.jsx overview.jsx Under src/views/more-info, if I try to update index.js to have the file extension index.jsx my build fails with Module build failed: Error: ENOENT: no such file or directory, open '/Users/smcclaine/Documents/Projects/ReactReduxBoilerPlate/src/views/more-info/index.js'.
If I remove the hyphen from the directory structure and the import, it will then allow me to use the .jsx extension.
Anyone have any idea how to configure my application so it will use the .jsx if the directory has a hyphen in it?
Git Repo: https://github.com/sethimcclaine/SALT
1 Answers
Answers 1
webpack-dev-server has a problem when you rename files or create folders with the same name as your file while it's running.
Example, say you have the following structure:
src App.jsx Then, you want to make your App component more complex, so you're turning it into a folder and adding more files, like so:
src -App index.jsx helper.js Webpack will not understand it and will start to spill out errors. If you stop it and start it again (npm start, maybe?), it will work just fine.
Same thing applies to filename extensions.
Example:
src App.js And you decide to rename App.js to App.jsx, Webpack will say that it can't find App.js. You need to stop and start the server again.
I deal with it every day since I always start small (App.jsx) and then make things more complex (App/index.jsx and friends), and I have to restart webpack-dev-server and wait several seconds for it to be ready (big project).
0 comments:
Post a Comment