Блог

Главная - Вопросы по программированию - Ошибка анализа модуля: Неожиданный токен (8:15), WebPack 5, React, Django

Ошибка анализа модуля: Неожиданный токен (8:15), WebPack 5, React, Django

#reactjs #django #webpack #babeljs #babel-loader

Вопрос:

Так что я новичок во всем этом и следил за этим уроком https://www.youtube.com/watch?v=GieYIzvdt2U но ни за что на свете я не могу заставить это сработать. Есть много связанных с этим вопросов, но, несмотря на все мои усилия, я не смог преодолеть эту ошибку, попробовав какое-либо из существующих решений. Когда я бегу npm run dev , я получаю следующее

 Module parse failed: Unexpected token (8:15)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See http
s://webpack.js.org/concepts#loaders
| class App extends Component {
|     render() {
>         return <div>React APP</div>
|     }
| }
 @ ./GeoAnalyticsSite/frontend/src/index.js 1:0-35

webpack 5.47.0 compiled with 1 error in 69 ms

Вот все мои зависимости от разработчиков NPM и сценарии в моем пакете json

 {
...
"scripts": {
    "dev": "webpack --mode development ./GeoAnalyticsSite/frontend/src/index.js -o ./GeoAnalyticsSite/frontend/static/frontend/",
    "build": "webpack --mode production ./GeoAnalyticsSite/frontend/src/index.js -o ./GeoAnalyticsSite/frontend/static/frontend/,"
  },
...
"devDependencies": {
    "@babel/core": "^7.14.8",
    "@babel/preset-env": "^7.14.8",
    "@babel/preset-react": "^7.14.5",
    "babel-loader": "^8.2.2",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "webpack": "^5.47.0",
    "webpack-cli": "^4.7.2"
  },
...
}

Сообщение об ошибке звучит так, как будто это проблема с моим веб-пакетом. Вот мои вавилонские яйца

 {
  "presets": ["@babel/preset-env", "@babel/preset-react","env", "react"],
  "plugins": ["transform-class-properties"]
}

и мой webpack.config.js

 module.exports = {
    module: {
        rules: [
            {
                test: /.jsx?$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
          presets: [
            ['@babel/preset-env', "@babel/react"]
          ]
        }
                }
            }
        ]
    }
}

Both are in the same directory. Here is the offending javascript file App.js to my understanding I have told webpack to search for the js and the jsx file extension so I’m confused as to why I still get the error message.

 /** @jsx React.DOM */

import React, { Component } from 'react';
import ReactDom from 'react-dom';

class App extends Component {
    render() {
        return <div>React APP</div>
    }
}

ReactDom.render(<App/>, document.getElementById('app'));

As far as Django goes I have created a views.py for the front end

 from django.shortcuts import render

# Create your views here.
def index(request):
    return render(request, 'frontend/index.html')

urls.py for front end

 from django.urls import path
from . import views
urlpatterns = [
    path('',views.index)
]

увязал все на высшем уровне urls.py

 from django.urls import path, include

urlpatterns = [
    path('', include('frontend.urls')),
    path('', include('GeoAnalytics.urls'))
]

и если это полезно, вот мой settings.py приложения, а также

 # Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
    'GeoAnalytics.apps.GeoanalyticsConfig',
    'frontend'
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

Я был бы очень признателен за любую помощь, спасибо!

Ответ №1:

Как оказалось, в моем случае это было что-то глупое. Если вы увидите эту ошибку и почувствуете, что ваша конфигурация верна, webpack будет искать ее в любом каталоге, который вы назвали npm, я думаю. Я был осторожен, чтобы поместить конфигурацию bablerc и webpack в один и тот же каталог, но я не был осторожен, чтобы поместить их обоих в правильный каталог. В моем случае они должны были быть на том же уровне, что и мой package.json

Метки: , , ,