0

I am trying to find the most elegant way to implement <head> into my react app. Idea is to structure the code like so:

function App() {
  return (
    <div>
      <Head />
      <div className="App">
        <Header />
        <Body />
        <Footer />
      </div>
    </div>
  );
}

My Head:

import React from 'react';
import { Helmet } from 'react-helmet';

export const Head = () => {
    return (
        <Helmet>
            <meta http-equiv="x-ua-compatible" content="ie=edge"/>
            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
            <meta name="format-detection" content="telephone=no"/>
            <meta charset="utf-8"/>
            <meta name="description" content=""/>
            <title>Timesheet APP</title>
            <meta name="robots" content="noindex,nofollow"/>
            <meta name="googlebot" content="noindex,nofollow"/>
            <link href="./favicon.ico" rel="icon" />
        </Helmet>
    )
}

But I keep on getting the error:

./src/Head.js
Module not found: Can't resolve '..react-timesheet-app\node_modules\react-scripts\node_modules\babel-loader\lib\index.js' in '..react-timesheet-app'

First of all is the idea behind my project structure even right? Second why do I keep on getting the error?

Edit: Added my

My Package.json:

{
  "name": "react-timesheet-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-helmet": "^6.1.0",
    "react-scripts": "4.0.2",
    "web-vitals": "^1.0.1"
  },
  "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"
    ]
  }
}
aratata
  • 1,147
  • 1
  • 6
  • 22
  • As error speaks, the `babel-loader` package seems to be missing. What happens if you comment the `import { Helmet } from 'react-helmet';` ? does the error go? Also check https://stackoverflow.com/questions/52541561/module-build-failed-from-node-modules-babel-loader-lib-index-js-error-cann – Nik Feb 15 '21 at 13:52
  • add content of your package.json file if possible. – Nik Feb 15 '21 at 13:52
  • 1
    What makes you think this error is connected to react-helmet? It seems to me that there could be some kind of misconfiguration in your webpack/react-scripts/create-react-app setup. If babel-loader is not installed, webpack would not be able to build the app at all. – Håken Lid Feb 15 '21 at 14:04
  • Can you include the full error traceback? – Håken Lid Feb 15 '21 at 14:05
  • @Nik The error doesn't go away if I delete the line. Also I added the package.json. Hope it helps. – aratata Feb 15 '21 at 14:36
  • @HåkenLid Well basically just because when I remove Helmet from the project it works well. Though that is the only part of the project that I implemented, so I might have the same issue adding something else (this kind of is my 3rd day of learning react, so I'm still quite lost). That was the full error traceback I got. – aratata Feb 15 '21 at 14:39
  • If a module is missing, you might have forgotten to install it. With npm, you run `npm i` from the directory containing the package.json file. – Håken Lid Feb 15 '21 at 14:48
  • Not sure what would be missing though. I have already tried reinstalling helmet with npm i , – aratata Feb 15 '21 at 14:50
  • 1
    Check answers to this question. https://stackoverflow.com/questions/56098779/how-to-fix-module-build-failed-from-node-modules-babel-loader-lib-index-js – Nik Feb 15 '21 at 15:05
  • @Nik The yarn build did the job in the end. Thank you a lot! – aratata Feb 15 '21 at 15:41
  • Glad that helped. I'll flag this question as duplicate. – Nik Feb 15 '21 at 18:15
  • 3
    Does this answer your question? [How to fix "Module build failed (from ./node\_modules/babel-loader/lib/index.js):"?](https://stackoverflow.com/questions/56098779/how-to-fix-module-build-failed-from-node-modules-babel-loader-lib-index-js) – Nik Feb 15 '21 at 18:16

0 Answers0