Answer the question
In order to leave comments, you need to log in
Bundle.js doesn't see components, what's wrong?
I create bundle.js using webpack and when I run it I get this error:
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"
}
}
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"] // используемые плагины
}
}
]
}
}
var ReactDOM = require('react-dom');
var React = require('react');
var Container = require('./components/container.jsx');
ReactDOM.render(<Container />, document.getElementById('app'));
var React = require('react');
var ReadyTemplate = require('./ready_template.jsx');
var ConstructorTemplate = require('./constructor_template.jsx');
// бла бла//
module.exports = Container;
var React = require('react');
// бла бла//
module.exports = ReadyTemplate;
var React = require('react');
// бла бла//
module.exports = ConstructorTemplate;
Answer the question
In order to leave comments, you need to log in
What does your index.html look like? You need to connect a bundle to it, better in the webpack-config:
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './index.html',
chunks: ['bundle']
}),
]
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question