CODEWITHSUNDEEP
javascriptreactjswebpackbabeljs
Niccolò Segato
Niccolò Segato

Reputation: 96

SyntaxError in ./index.html

I'm trying to convert my create-react-app to a Webpack compatible app.

I can't understand clearly what I'm done and I often get into an error:

ERROR in ./index.html
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /mnt/c/Users/.../index.html: Unexpected token (1:0)

> 1 | <!doctype html>
    | ^
  2 | <html>
  3 |   <head>
  4 |     <title>Getting Started</title>
    at Object._raise [...]

This happens after launching npm start

This is my configuration:

Structure

./index.html

<!doctype html>
<html>
  <head>
    <title>Getting Started</title>
    <script src="https://unpkg.com/[email protected]"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

./src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
serviceWorker.unregister();

./webpack.config.js

const webpack = require('webpack');
const path = require('path');

const config = {
  entry: [
    'react-hot-loader/patch',
    './index.html'
  ],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
        {
            test: /\.js$|jsx$|html/,
            exclude: /(node_modules|bower_components)/,
            loader: 'babel-loader',
            query: {
                presets: ['@babel/preset-env', '@babel/react']
            }
        }
    ]
  },
  resolve: {
    extensions: [
      '.js',
      '.jsx',
      '.html'
    ],
    alias: {
      'react-dom': '@hot-loader/react-dom'
    }
  },
  devServer: {
    contentBase: './dist'
  }
};

module.exports = config;

Finally, my ./.babelrc

  {
    "plugins": ["@babel/transform-react-jsx"],
    "ignore": [
      "foo.js",
      "bar/**/*.js"
    ]
  }

I've this dependencies in my package.json:

"devDependencies": {
    "@babel/core": "^7.11.6",
    "@babel/preset-env": "^7.11.5",
    "@babel/preset-es2015": "^7.0.0-beta.53",
    "@babel/preset-react": "^7.10.4",
    "@babel/preset-typescript": "^7.10.4",
    "@hot-loader/react-dom": "^17.0.0-rc.2",
    "babel-loader": "^8.1.0",
    "babel-plugin-import": "^1.13.0",
    "css-loader": "^4.3.0",
    "react-hot-loader": "^4.5.3",
    "style-loader": "^1.2.1",
    "webpack": "^4.44.2",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }

Upvotes: 0

Views: 66

Answers (1)

Axnyff
Axnyff

Reputation: 9964

You're using a javascript loader for your html, this is not going to work.

You should use the html-loader instead

Upvotes: 1

Related Questions