React 和 Browserify:找不到模块 ./focusNode
React and Browserify: Cannot find module ./focusNode
我在 Grunt 中使用 Browserify 来编译 jsx 文件,并且遇到一个一致的错误,即 browserify 任务因以下错误而失败;
Error: Cannot find module './focusNode' from 'C:\project\src...'
我有一个 jsx 组件:
var React = require('react');
var createBooking = React.createClass({
render: function () {
return (
<div className="Booking">
<div className="col-xs-12 noPadding">
<div class="modal-header">
<h3 class="modal-title">{this.props.data.title}</h3>
</div>
<div class="modal-body">
This is a modal
</div>
</div>
</div>
)
}
});
module.exports = createBooking;
然后是一个主要的JS文件;
var React = require('react');
(function (React) {
var Booking = require('../dist/components/CreateBooking.js');
var render = function () {
React.render(React.createElement(Booking, { data: { title: 'Test' } }, document.getElementById('bookingForm')));
};
render();
})(React);
最后是我的 gruntfile(为简洁起见缩短);
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
browserify: {
react: {
options: {
transform: [
[require('grunt-react').browserify, {global: true}]
],
debug: true
},
files: [{
expand: true,
cwd: 'Scripts/components',
src: ['**/*.jsx'],
dest: 'Scripts/dist/components',
ext: '.js'
}]
},
dist: {
files: {
'./Scripts/dist/main_built.js': ['Scripts/custom/main.js']
},
options: {
debug: true,
paths: ['./node_modules','Scripts/custom/**', 'Scripts/dist/**']
}
}
},
});
我假设错误与某处的路径有关,但我无法弄清楚。有什么线索吗?
您的评论有点难以理解,但我相信您是在说 CreateBooking.js
是一个浏览器化的包。如果是这种情况,可能会解释您的错误:新的捆绑操作正在解析该捆绑包以获取不需要也无法解析的 require()
调用。在这里查看我的回答:.
我在 Grunt 中使用 Browserify 来编译 jsx 文件,并且遇到一个一致的错误,即 browserify 任务因以下错误而失败;
Error: Cannot find module './focusNode' from 'C:\project\src...'
我有一个 jsx 组件:
var React = require('react');
var createBooking = React.createClass({
render: function () {
return (
<div className="Booking">
<div className="col-xs-12 noPadding">
<div class="modal-header">
<h3 class="modal-title">{this.props.data.title}</h3>
</div>
<div class="modal-body">
This is a modal
</div>
</div>
</div>
)
}
});
module.exports = createBooking;
然后是一个主要的JS文件;
var React = require('react');
(function (React) {
var Booking = require('../dist/components/CreateBooking.js');
var render = function () {
React.render(React.createElement(Booking, { data: { title: 'Test' } }, document.getElementById('bookingForm')));
};
render();
})(React);
最后是我的 gruntfile(为简洁起见缩短);
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
browserify: {
react: {
options: {
transform: [
[require('grunt-react').browserify, {global: true}]
],
debug: true
},
files: [{
expand: true,
cwd: 'Scripts/components',
src: ['**/*.jsx'],
dest: 'Scripts/dist/components',
ext: '.js'
}]
},
dist: {
files: {
'./Scripts/dist/main_built.js': ['Scripts/custom/main.js']
},
options: {
debug: true,
paths: ['./node_modules','Scripts/custom/**', 'Scripts/dist/**']
}
}
},
});
我假设错误与某处的路径有关,但我无法弄清楚。有什么线索吗?
您的评论有点难以理解,但我相信您是在说 CreateBooking.js
是一个浏览器化的包。如果是这种情况,可能会解释您的错误:新的捆绑操作正在解析该捆绑包以获取不需要也无法解析的 require()
调用。在这里查看我的回答: