英文:
Module not found Error when uploading code to server (React Js, Tailwind CSS, render.com)
问题
当我在本地主机上运行我的程序时,没有错误,它可以完美运行。但一旦我将它上传到render.com服务器并添加Tailwind CSS到我的项目后,它无法构建,因为出现以下错误:
找不到模块: 错误: 无法解析 '/opt/render/project/src/src/pages' 目录下的 '../components/Navbar.js'
我已经检查了我的导入语句,它们似乎都是正确的。我还尝试了检查与我添加的Tailwind相关的所有内容,它们都是有道理的。我怀疑问题可能出在tailwind配置文件,也许它在构建时忽略了我的组件?
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
},
}
这是一个导入Navbar的页面(可能是问题所在?)
import Navbar from "../components/Navbar.js";
function Home() {
return (
<div className="App">
<Navbar/>
</div>
);
}
我已经尝试了所有其他类似的Stack Overflow问题,但没有一个解决了我的问题。我还尝试了将我的导入更改为.js,检查导入中的不可见空格、大小写等,还尝试了更改我的Tailwind CSS文件。
这是我的package.json文件:
{
"name": "ratemyjudge.com",
"version": "0.1.0",
"private": false,
"dependencies": {
"@emotion/react": "^11.10.5",
"@emotion/styled": "^11.10.5",
"@material-ui/core": "^4.12.4",
"@material-ui/icons": "^4.11.3",
"@mui/joy": "^5.0.0-alpha.63",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"firebase": "^9.15.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.2.0",
"react-rangeslider": "^2.2.0",
"react-router-dom": "^6.7.0",
"react-scripts": "5.0.1",
"react-toastify": "^9.1.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"gh-pages": "^5.0.0",
"tailwindcss": "^3.2.6"
}
}
这是我的整个存储库链接:https://github.com/shreybirmiwal/ratemyjudge
非常感谢你的帮助。
英文:
When I run my program in local host, I get no errors, and it works perfectly. As soon as I uploaded to render.com server following adding Tailwind css to my project, It fails to build because
Module not found: Error: Can't resolve '../components/Navbar.js' in '/opt/render/project/src/src/pages'
I have checked my import statements and they all seem to be correct. I have also tried checking everything related to Tailwind that I added, and they all make sense. I have a suspicion the problem may be with the tailwind config file because maybe it is ignoring my component on the build?
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
},
}
Here is a page that imports Navbar (maybe the issue?)
import Navbar from "../components/Navbar.js";
function Home() {
return (
<div className="App">
<Navbar/>
</div>
);
}
I have tried all the other stack overflow similar questions but none of them worked, I have tried changing my imports to .js, checking my imports for invisible spaces, upper and lower case, I have also tried changing my tailwind css file.
this is my package.json file
{
"name": "ratemyjudge.com",
"version": "0.1.0",
"private": false,
"dependencies": {
"@emotion/react": "^11.10.5",
"@emotion/styled": "^11.10.5",
"@material-ui/core": "^4.12.4",
"@material-ui/icons": "^4.11.3",
"@mui/joy": "^5.0.0-alpha.63",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"firebase": "^9.15.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.2.0",
"react-rangeslider": "^2.2.0",
"react-router-dom": "^6.7.0",
"react-scripts": "5.0.1",
"react-toastify": "^9.1.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"gh-pages": "^5.0.0",
"tailwindcss": "^3.2.6"
}
}
This is my entire repo: https://github.com/shreybirmiwal/ratemyjudge
Thank you so much for your help
答案1
得分: 0
这是一个相当奇怪的问题,我之前在一些项目中遇到过!
我认为你已将“components”文件夹重命名为“Components”或反之亦然。Git在识别这种重命名方面存在问题,并且无法跟踪它!
我建议你手动重命名导入并尝试一下!
英文:
This is a pretty weird issue that I have encountered previously in some of my projects!
I believe you renamed your "components" folder to "Components" or vice versa. Git has trouble recognising this rename and does not track it well!
I'd suggest you manually rename the imports and try!
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论