我有新的反应.
我的错误是:
未捕获的错误:目标容器不是DOM元素
我用Google搜索了很多次,发现有这个错误的人:
未捕获错误:不变违规:_registerComponent(...):目标容器不是DOM元素.
我的不包含:
_registerComponent(...):
这是我的文件:
的index.html
<html>
<head>
<meta charset="utf-8">
<title>React</title>
</head>
<body>
<div id="root"></div>
<script src="./bundle.js"></script>
</body>
</html>
index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<div>
<h1>Hello World!</h1>
</div>,
document.getElementById('root')
);
webpack.config.js
const path = require('path');
module.exports = {
context: path.join(__dirname, 'src'),
entry: './index.jsx',
output: {
path: path.join(__dirname, 'public'),
filename: './bundle.js'
},
module: {
loaders: [
{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
{ test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ },
], …我最近从Webpack 3升级到4.它现在抛出一个错误:
模块解析失败:意外字符'@'您可能需要适当的加载程序来处理此文件类型.| @import'./scss/variables.scss'; | |*{@ ./src/index.js 1:0-22
在我的styles.scss文件中,我正在执行以下操作:
@import 'scss/variables.scss';
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
在我的index.js文件中,我只执行以下操作:
import './style.scss';
在我的webpack.dev.js中,我改变的是添加模式:'development':
const StyleLintPlugin = require('stylelint-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const Dotenv = require('dotenv-webpack');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'public/bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: ['babel-loader', 'eslint-loader']
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract(['css-loader', 'sass-loader'])
}
]
},
plugins: [
new …我有一个文件，我们将调用file1.ts：
export { default as function1 } from 'function1.ts';
export { default as function2 } from 'function2.ts';
我使用 Webpack 和 Babel 编译它：
webpack.config.js
const path = require("path");
module.exports = {
target: "web",
mode: "production",
entry: "./src/index.ts",
output: {
path: path.resolve(__dirname, "./lib/cjs"),
filename: "index.js",
libraryTarget: "commonjs2",
},
resolve: {
extensions: [".ts", ".tsx", ".js"],
},
module: {
rules: [
{
test: /\.(ts|tsx)$/,
exclude: /(node_modules)/,
loader: "babel-loader",
options: {
presets: [
"@babel/preset-react",
"@babel/preset-typescript",
[
"@babel/preset-env",
{
targets: ["last 2 versions"],
}, …我收到错误:
未捕获的TypeError:无法读取未定义的属性'func'
然而我不知道为什么,我已经用Google搜索了错误,并以相同的错误发送给所有人发帖但没有运气.谁能帮我吗？
我正在使用react-router@3.0.2
index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, browserHistory } from 'react-router';
import { Helmet } from 'react-helmet';
import Routes from './config/routes';
ReactDOM.render(
<div>
<Helmet>
<meta charSet='utf-8'/>
<title>Skelton</title>
<link rel='icon' href='images/favicon.png'/>
<link rel='stylesheet' href='style.css'/>
</Helmet>
<Router routes={Routes()} history={browserHistory}/>
</div>
, document.getElementById('root'));
route.js
import React from 'react';
import { Route, IndexRoute } from 'react-router';
import Example1 from '../pages/Example1';
export function routes() {
return (
<Route>
<Route path='/' component={Example1}/>
<IndexRoute component={Example1}/>
</Route>
);
} …我目前正在按照本指南将我的场景渲染为纹理以生成深度/阴影贴图：http : //www.opengl-tutorial.org/intermediate-tutorials/tutorial-14-render-to-texture/
该指南是用 C++ 编写的。我正在将它转换为 WebGL - JavaScript，到目前为止已经成功，但不幸的是在 Chrome 中遇到了这个错误：
WebGL：INVALID_OPERATION：texImage2D：ArrayBufferView 对于请求来说不够大
这是一个与以下相关的错误：
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, 1024, 768, 0, gl.RGB, gl.UNSIGNED_BYTE, new Uint8Array([0, 0, 0, 0]));
1024～768的宽高设置为1时，不会产生错误。
在指南中，它使用以下内容：
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, 1024, 768, 0, GL_RGB, GL_UNSIGNED_BYTE, 0);
这里有一个类似问题的很好答案：Error when created textures in WebGL with the RGB format这让我相信，由于在调用方法时纹理不存在，它不能大于 1 像素，但我不确定这是否正确？编辑：不是这个问题的重复有两个原因。1，如果它是重复的，我就不会问这个问题 2，答案解释了为什么它不是重复的。
指南中的其余转换代码我将在下面转储：
// shadow test
this.frameBuffer = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffer);
this.texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, this.texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, 1024, 768, 0, gl.RGB, gl.UNSIGNED_BYTE, new Uint8Array([0, …我创建一个像这样的程序：
const program: WebGLProgram = gl.createProgram();
然后最终尝试将着色器附加到程序，如下所示：
gl.attachShader(program, vertexShader);
这将引发以下错误：
错误：类型错误：无法在'WebGL2RenderingContext'上执行'attachShader'：参数1不是'WebGLProgram'类型。
在观察程序时，typeof program等于object，因此该错误是有意义的。
如果我尝试做以下，这工作，如果我改变程序类型的任何自typeof program.program等于WebGLProgram：
gl.attachShader(program.program, vertexShader);
它将引发以下错误：
类型“ WebGLProgram”上不存在属性“程序”。
解决打字稿中此问题的正确方法是什么？我宁愿不要program.program用任何类型写东西。
javascript ×6
jsx ×2
reactjs ×2
webgl ×2
webpack ×2
c++ ×1
html ×1
react-router ×1
typescript ×1
webgl2 ×1