@9karamba

Bundle.js не видит компоненты, что не так?

Я с помощью вебпака создаю bundle.js и когда запускаю выходит такая ошибка:
Uncaught ReferenceError: ReadyTemplate is not defined
at Module. (bundle.js:30)
at Module. (bundle.js:30)
at C (bundle.js:1)
at r (bundle.js:1)
at Object. (bundle.js:30)
at C (bundle.js:1)
at r (bundle.js:1)
at Object. (bundle.js:6)
at C (bundle.js:1)
at r (bundle.js:1)

package.json
{
  "name": "template",
  "description": "A React.js project using Webpack",
  "version": "1.0.0",
  "author": "metanit.com",
  "scripts": {
    "dev": "webpack-dev-server --hot --open",
    "build": "webpack"
  },
  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ],
    "plugins": [
      "@babel/plugin-proposal-class-properties"
    ]
  },
  "dependencies": {
    "react": "^16.5.0",
    "react-dom": "^16.5.0"
  },
  "devDependencies": {
    "@babel/core": "^7.1.2",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "babel-loader": "^8.0.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "webpack": "^4.20.0",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.9"
  }
}


webpack.config.js
var path = require('path');
 
module.exports = {
    entry: "./app/app.jsx", // входная точка - исходный файл
    output:{
        path: path.resolve(__dirname, './public'),     // путь к каталогу выходных файлов - папка public
        publicPath: '/public/',
        filename: "bundle.js"       // название создаваемого файла
    },
    module:{
        rules:[   //загрузчик для jsx
            {
                test: /\.jsx?$/, // определяем тип файлов
                exclude: /(node_modules)/,  // исключаем из обработки папку node_modules
                loader: "babel-loader",   // определяем загрузчик
                options:{
                    presets:["@babel/preset-env", "@babel/preset-react"]    // используемые плагины
                }
            }
        ]
    }
}


app.jsx
var ReactDOM = require('react-dom');
var React = require('react');
var Container = require('./components/container.jsx');

ReactDOM.render(<Container />, document.getElementById('app'));


container.jsx
var React = require('react');
var ReadyTemplate = require('./ready_template.jsx');
var ConstructorTemplate = require('./constructor_template.jsx');

// бла бла//
module.exports = Container;


ready_template.jsx
var React = require('react');

// бла бла//
module.exports = ReadyTemplate;


constructor_template.jsx
var React = require('react');

// бла бла//
module.exports = ConstructorTemplate;
  • Вопрос задан
  • 516 просмотров
Пригласить эксперта
Ответы на вопрос 1
@deserthurricane
А как выглядит ваш index.html? Нужно подключить к нему бандл, лучше в webpack-кофиге:

plugins: [
            new HtmlWebpackPlugin({
                filename: 'index.html',
                template: './index.html',
                chunks: ['bundle']
            }),
    ]
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы