반응형
react.js 오류:불변 위반:축소 반응 오류 #37
인터넷에서 찾아봤는데, 이 오류에 대한 해결책을 찾을 수가 없어.
기본적으로 로컬 호스트에서 앱을 실행할 때npm start
아무 문제 없이 달린다.
그러나 로 전환하면git branch gh-pages
gh 페이지에서 호스트하려면 콘솔에 다음 오류가 표시됨.log
검색되지 않은 불변성 위반:축소 반응 오류 #37
_registerComponent(...): 대상 컨테이너가 DOM 요소가 아니라는 것은 오류 #37이 의미하는 것이다.
Git App Repository gh 페이지 분기에 연결
현재 설정:
webpack.config.js
var path = require('path');
var webpack = require('webpack');
var ghpages = require('gh-pages');
var WriteFilePlugin = require('write-file-webpack-plugin');
module.exports = {
devtool: 'source-map',
entry: [
'./src/index.js'
],
output: {
publicPath: '/',
filename: 'bundle.js',
sourceMapFilename: "./bundle.js.map",
path: path.join(__dirname, './static')
},
module: {
loaders: [{
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['react', 'es2015', 'stage-1']
}
},{
test: /\.s?css$/,
loaders: ['style','css','sass'],
include: path.join(__dirname, 'src')
}]
},
resolve: {
extensions: ['', '.js', '.jsx'],
alias: {
'jquery': path.join(__dirname, 'node_modules/jquery/dist/jquery'),
}
},
devServer: {
historyApiFallback: true,
contentBase: './',
outputPath: path.join(__dirname, './dist')
}
};
꾸러미json
{
"name": "recipe-box",
"version": "1.0.0",
"description": "Portfolio",
"main": "index.js",
"repository": "",
"scripts": {
"start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
"test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test",
"test:watch": "npm run test -- --watch",
"postinstall": "webpack -p"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.2.1",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.1.18",
"babel-preset-react": "^6.1.18",
"chai": "^3.5.0",
"chai-jquery": "^2.0.0",
"file-loader": "^0.9.0",
"gh-pages": "^0.11.0",
"image-webpack-loader": "^2.0.0",
"jquery": "^3.1.0",
"jsdom": "^9.5.0",
"mocha": "^3.0.2",
"node-sass": "^3.8.0",
"react-addons-test-utils": "^15.3.1",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.14.0",
"write-file-webpack-plugin": "^3.3.0"
},
"dependencies": {
"babel-preset-stage-1": "^6.1.18",
"css-loader": "^0.25.0",
"express": "^4.14.0",
"jquery": "^2.2.4",
"lodash": "^4.16.1",
"materialize-css": "^0.97.7",
"node-sass": "^3.8.0",
"react": "^15.3.1",
"react-bootstrap": "^0.30.3",
"react-dom": "^15.3.1 ",
"react-materialize": "^0.16.4",
"react-redux": "^4.0.0",
"react-router": "^2.0.1",
"react-tap-event-plugin": "^1.0.0",
"redux": "^3.0.4",
"redux-logger": "^2.6.1",
"sass-loader": "^4.0.0",
"shortid": "^2.2.6",
"style-loader": "^0.13.1"
}
}
내 질문에 대답했다.
움직여야 할 것 같았다.bundle.js
에서 떨어져서dist
폴더는 내 index.properties가 있는 디렉터리로 이동한다.
반응형
'IT이야기' 카테고리의 다른 글
[False, True]에서 "not(참)"이 False를 반환하는 이유는? (0) | 2022.03.23 |
---|---|
(vue 구성 요소 대신) Javascript 파일에서 작업을 디스패치하는 방법? (0) | 2022.03.22 |
reactive native app를 만들 수 없음입력이 필요하지만 엑스포가 비인터랙티브 모드에 있음 (0) | 2022.03.22 |
Vue.js의 URL에서 쿼리 매개 변수를 가져오는 방법 (0) | 2022.03.22 |
Vue2에서 디바운스를 구현하는 방법? (0) | 2022.03.22 |