Route problem when loading Bundle.js

Asked

Viewed 176 times

-1

I have a route that has the bar character "/" in the middle, as shown below:

<Route path="/answers/:question_id" component={QuestionAnswers}  />

The link works normal.

<Link to={`/questions/${question.id}`}>Answer</Link>

However, when I change the component or refresh the page gives the following error:

error: The "http://localhost:4000/questions/Bundle.js" feature was blocked due to MIME type ("text/html") not matching (X-Content-Type-Options: nosniff).

How do I make for the js of the application always stay in /bundle.js instead of questions/bundle.js?

Man index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="theme-color" content="E0E0E0"/>

  <title>QAR</title>
  <link href="https://fonts.googleapis.com/css2?
     family=Roboto:wght@100;400;700&display=swap" rel="stylesheet"> 
</head>
<body>
  <div id="app"></div>
</body>
</html>

index.tsx of the application:

import React from 'react'
import { render } from 'react-dom'
import App from './App'

render(<App />, document.getElementById('app'))
react react-router
  • 1

    Show your index.html, probably the problem is there

  • Show your index.html compiled, run the build command and grab from the folder where it is created

  • There’s no way to answer! It’s a local mistake, it’s not supposed to happen this way.

1 answer

0


The problem was in configuring the webpack that was missing the property output.publicPath:

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')

const isDevelopment = process.env.NODE_ENV !== 'production'

module.exports = {
    mode: isDevelopment ? 'development' : 'production',
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },
    entry: path.resolve(__dirname, 'src', 'index.tsx'),
    module: {
        rules: [{
                test: /\.(js|ts|tsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            },

            {
                test: /\.css$/,
                exclude: /node_modules/,
                use: [
                    { loader: 'style-loader' },
                    { loader: 'css-loader' },
                ]
            },
            {
                test: /\.(gif|png|jpe?g)$/,
                use: {
                    loader: 'file-loader',
                }
            },
        ]
    },
    devServer: {
        contentBase: path.join(__dirname, 'public'),
        historyApiFallback: true,
        hot: true,
        port: 4000
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: '/'
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
            }
        }),
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, 'public', 'index.html')
        }),
        isDevelopment && new ReactRefreshWebpackPlugin()
    ].filter(Boolean)
}

Browser other questions tagged react react-router

You are not signed in. Login or sign up in order to post.