structor
structor copied to clipboard
react-ui-builder
structor page not loading after starting
the page keeps loading. I see the buttons on the top and on the left. in the middle there is a loading page...
with Chrome: in the console there is an error: Failed to load resource: the server responded with a status of 404 (Not Found) bundle.js
with Firefox: Resource blocked due to MIME type mismatch (X-Content-Type-Options: nosniff)
@eborst,
Please provide the following files here:
.structor/webpack.app.js, .structor/webpack.base.js, package.json
Thanks.
@eborst,
Also, try to change line in the package.json file:
"structor": "structor" -> "structor": "-v structor" and see the console output when you started Structor from the command line.
Hi,
Here are the files..
------ Origineel bericht ------ Van: "Alex Pustovalov" [email protected] Aan: "ipselon/structor" [email protected] Cc: "eborst" [email protected]; "Mention" [email protected] Verzonden: 15-5-2017 10:28:37 Onderwerp: Re: [ipselon/structor] structor page not loading after starting (#97)
@eborst https://github.com/eborst,
Please provide the following files here:
.structor/webpack.app.js, .structor/webpack.base.js, package.json
Thanks.
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ipselon/structor/issues/97#issuecomment-301409969, or mute the thread https://github.com/notifications/unsubscribe-auth/ALYpbc_cQb8gxjtDVQRQZHU1fUwMMgcIks5r6Ay1gaJpZM4Naz6S.
This is the actual error:
(node:9396) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/l oader-utils/issues/56 parseQuery() will be replaced with getOptions() in the next major version of loader-utils. webpack built 81c570e11b58653ff892 in 582ms Hash: 81c570e11b58653ff892 Version: webpack 2.5.1 Time: 582ms Asset Size Chunks Chunk Names bundle.js 290 kB 0 main chunk {0} bundle.js (main) 101 kB [entry] [rendered] [1] ./.structor/src/default.js 383 bytes {0} [built] [failed] [1 error] [2] ./~/eventsource-polyfill/dist/browserify-eventsource.js 852 bytes {0} [built] [3] ./~/react-hot-loader/patch.js 41 bytes {0} [built] [4] (webpack)-hot-middleware/client.js?path=/structor-dev/a&timeout=2000&overlay=false&noInfo=true 6.68 kB {0} [built] [7] ./~/eventsource-polyfill/dist/eventsource.js 17.7 kB {0} [built]
[8] ./~/html-entities/index.js 231 bytes {0} [built]
[12] ./~/querystring-es3/encode.js 2.54 kB {0} [built] [13] ./~/querystring-es3/index.js 127 bytes {0} [built] [14] ./~/react-hot-loader/lib/patch.js 209 bytes {0} [built] [15] ./~/react-hot-loader/lib/patch.prod.js 24 bytes {0} [built] [16] ./~/strip-ansi/index.js 161 bytes {0} [built] [17] (webpack)-hot-middleware/client-overlay.js 1.82 kB {0} [built] [18] (webpack)-hot-middleware/process-update.js 3.88 kB {0} [built] [19] (webpack)/buildin/module.js 517 bytes {0} [built] [20] multi react-hot-loader/patch eventsource-polyfill webpack-hot-middleware/client?path=/structor-dev/a&timeout=2000&overlay=false&noInfo= true ./.structor/src/default.js 64 bytes {0} [built] + 6 hidden modules
ERROR in ./.structor/src/default.js Module parse failed: D:\Projects\frontend\structor-starter\node_modules\babel-loader\lib\index.js??ref--0!D:\Projects\frontend\structor-starter .structor\src\default.js Unexpected token (13:3) You may need an appropriate loader to handle this file type. | render() { | return ( |
------ Origineel bericht ------ Van: "Alex Pustovalov" [email protected] Aan: "ipselon/structor" [email protected] Cc: "eborst" [email protected]; "Mention" [email protected] Verzonden: 15-5-2017 10:30:14 Onderwerp: Re: [ipselon/structor] structor page not loading after starting (#97)
@eborst https://github.com/eborst,
Also, try to change line in the package.json file:
"structor": "structor" -> "structor": "-v structor" and see the console output when you started Structor from the command line.
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ipselon/structor/issues/97#issuecomment-301410358, or mute the thread https://github.com/notifications/unsubscribe-auth/ALYpbTOiXs1TWW4tEjxb8rhUR18KEBO4ks5r6A0WgaJpZM4Naz6S.
Hm... that's weird. It seems that you have wrong Webpack with wrong babel loader. Also, try to use NodeJS version > 5.
@eborst,
Could you just copy&paste the content of these files here with code formatting? I don't want to open zip files, sorry.
No issue. Here is package.json:
{
"name": "starter-app",
"version": "0.0.1",
"description": "Starter App",
"engines": {
"npm": ">=3"
},
"author": "",
"license": "MIT",
"scripts": {
"prebuild": "npm run build:clean",
"build": "cross-env NODE_ENV=production webpack --config internals/webpack/webpack.prod.babel.js --color -p --progress",
"build:clean": "rimraf ./build",
"start": "cross-env NODE_ENV=development node server",
"start:production": "npm run build && npm run start:prod",
"start:prod": "cross-env NODE_ENV=production node server",
"lint": "npm run lint:js",
"lint:eslint": "eslint --ignore-path .stylelintignore",
"lint:js": "npm run lint:eslint -- . ",
"lint:staged": "lint-staged",
"structor": "structor -v"
},
"lint-staged": {
"*.js": "lint:eslint"
},
"pre-commit": "lint:staged",
"babel": {
"presets": [
[
"es2015",
{
"modules": false
}
],
"react",
"stage-0"
],
"env": {
"production": {
"only": [
"app"
],
"plugins": [
"transform-react-remove-prop-types",
"transform-react-constant-elements",
"transform-react-inline-elements"
]
}
}
},
"eslintConfig": {
"parser": "babel-eslint",
"extends": "airbnb",
"env": {
"browser": true,
"node": true,
"mocha": true,
"es6": true
},
"plugins": [
"redux-saga",
"react",
"jsx-a11y"
],
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"rules": {
"arrow-parens": [
"error",
"always"
],
"arrow-body-style": [
2,
"as-needed"
],
"comma-dangle": [
2,
"always-multiline"
],
"import/imports-first": 0,
"import/newline-after-import": 0,
"import/no-dynamic-require": 0,
"import/no-extraneous-dependencies": 0,
"import/no-named-as-default": 0,
"import/no-unresolved": 2,
"import/prefer-default-export": 0,
"indent": [
1,
4,
{
"SwitchCase": 1
}
],
"jsx-a11y/aria-props": 2,
"jsx-a11y/heading-has-content": 0,
"jsx-a11y/href-no-hash": 2,
"jsx-a11y/label-has-for": 2,
"jsx-a11y/mouse-events-have-key-events": 2,
"jsx-a11y/role-has-required-aria-props": 2,
"jsx-a11y/role-supports-aria-props": 2,
"max-len": 0,
"newline-per-chained-call": 0,
"no-console": 1,
"no-tabs": 0,
"no-use-before-define": 0,
"prefer-template": 2,
"class-methods-use-this": 0,
"react/forbid-prop-types": 0,
"react/jsx-first-prop-new-line": [
2,
"multiline"
],
"react/jsx-filename-extension": 0,
"react/jsx-no-target-blank": 0,
"react/require-extension": 0,
"react/self-closing-comp": 0,
"react/jsx-indent": [
1,
4
],
"react/jsx-indent-props": [
0
],
"redux-saga/no-yield-in-race": 2,
"redux-saga/yield-effects": 2,
"require-yield": 0
},
"settings": {
"import/resolver": {
"webpack": {
"config": "./internals/webpack/webpack.test.babel.js"
}
}
}
},
"dependencies": {
"babel-polyfill": "^6.22.0",
"chalk": "1.1.3",
"compression": "1.6.2",
"cross-env": "3.1.3",
"expect": "1.20.2",
"express": "4.14.0",
"ip": "1.1.3",
"lodash": "4.16.4",
"minimist": "1.2.0",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-redux": "^5.0.1",
"react-router": "^3.0.0",
"react-router-scroll": "^0.3.3",
"redux": "^3.6.0",
"redux-saga": "^0.12.0",
"reselect": "2.5.4",
"prop-types": "15.5.8",
"whatwg-fetch": "1.0.0"
},
"devDependencies": {
"babel-core": "^6.21.0",
"babel-eslint": "^7.2.1",
"babel-loader": "^6.2.10",
"babel-plugin-transform-react-constant-elements": "^6.23.0",
"babel-plugin-transform-react-inline-elements": "^6.8.0",
"babel-plugin-transform-react-remove-prop-types": "^0.2.10",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-0": "^6.16.0",
"cheerio": "^0.22.0",
"css-loader": "0.25.0",
"eslint": "3.9.0",
"eslint-config-airbnb": "12.0.0",
"eslint-config-airbnb-base": "9.0.0",
"eslint-import-resolver-webpack": "0.6.0",
"eslint-plugin-import": "2.0.1",
"eslint-plugin-jsx-a11y": "2.2.3",
"eslint-plugin-react": "6.4.1",
"eslint-plugin-redux-saga": "0.1.5",
"eventsource-polyfill": "0.9.6",
"exports-loader": "0.6.3",
"file-loader": "0.9.0",
"history": "^1.12.1",
"html-loader": "0.4.4",
"html-webpack-plugin": "2.24.0",
"image-webpack-loader": "2.0.0",
"imports-loader": "0.6.5",
"json-loader": "0.5.4",
"lint-staged": "3.2.0",
"pre-commit": "1.1.3",
"react-hot-loader": "3.0.0-beta.6",
"rimraf": "^2.5.4",
"style-loader": "0.13.1",
"url-loader": "0.5.7",
"webpack": "^2.2.1",
"webpack-dev-middleware": "^1.10.0",
"webpack-hot-middleware": "^2.16.0"
}
}
webpack.app.js:
/**
* Application specific configuration options for Webpack.
* This file will not be updated after the Structor's next installation
*/
var config = require('./config.js');
module.exports = require('./webpack.base.js')(config);
webpack.base.js:
/**
* COMMON STRUCTOR WEBPACK CONFIGURATION
*/
var path = require('path');
var webpack = require('webpack');
module.exports = (options) => ({
// Add hot reloading in development
entry: [
'react-hot-loader/patch',
'eventsource-polyfill', // Necessary for hot reloading with IE
'webpack-hot-middleware/client?path=/structor-dev/a&timeout=2000&overlay=false&noInfo=true',
path.join(process.cwd(), '.structor/src/default.js'), // Start
],
output: {
path: path.join(process.cwd(), '.structor/desk/__build__'),
filename: 'bundle.js',
publicPath: '/structor-dev/__build__',
},
module: {
loaders: [{
test: /\.js$/, // Transform all .js files required somewhere with Babel
loader: 'babel-loader',
exclude: /node_modules/,
query: {
plugins: ['react-hot-loader/babel'],
presets: [
[
'es2015',
{
modules: false
}
],
'react',
'stage-0',
]
},
}, {
test: /\.css$/,
loaders: ['style-loader', 'css-loader'],
}, {
test: /\.(eot|svg|ttf|woff|woff2)$/,
loader: 'file-loader',
}, {
test: /\.(jpg|png|gif)$/,
loader: 'file-loader',
}, {
test: /\.html$/,
loader: 'html-loader',
}, {
test: /\.json$/,
loader: 'json-loader',
}, {
test: /\.mp4$/,
loader: 'url?limit=10000&mimetype=video/mp4',
}, {
test: /\.webm$/,
loader: 'url?limit=10000&mimetype=video/webm',
}],
},
plugins: [
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(), // Tell webpack we want hot reloading
new webpack.NoEmitOnErrorsPlugin(),
new webpack.ProvidePlugin({
// make fetch available
fetch: 'exports?self.fetch!whatwg-fetch',
}),
// Always expose NODE_ENV to webpack, in order to use `process.env.NODE_ENV`
// inside your code for any environment checks; UglifyJS will automatically
// drop any unreachable code.
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV),
},
}),
],
resolve: {
modules: [path.resolve(__dirname, '../' + options.srcPath), 'node_modules'],
extensions: [
'.js',
'.jsx',
'.react.js',
],
mainFields: [
'browser',
'jsnext:main',
'main',
],
},
// Emit a source map for easier debugging
devtool: 'cheap-module-eval-source-map',
target: 'web', // Make web variables accessible to webpack, e.g. window
stats: false, // Don't show stats in the console
performance: {
hints: false
},
});
@eborst,
Thanks, there is no issues in the config. So, just try to do the following:
- Create an empty dir and cd into it
- Run command
npm init -y - Run command
npm install structor- after installation just hit enter for prompt. - Run command
npm run structor
Let me know if you are able to see Structor's workspace.
I'm following the userguide, but I get an error when installing the component (Counter Tutorial)
error is:
./app/modules/Tutorial/index.js Module not found: Error: Can't resolve './componentsCounter' in 'D:\Projects\frontend\struct-test\app\modules\Tutorial' @ ./app/modules/Tutorial/index.js 1:0-43 @ ./.structor/app/components.js @ ./.structor/src/commons/pageUtils.js @ ./.structor/src/PageForDesk.js @ ./.structor/src/default.js @ multi react-hot-loader/patch eventsource-polyfill webpack-hot-middleware/client?path=/structor-dev/a&timeout=2000&overlay=false&noInfo=true ./.structor/src/default.js
@eborst,
Hmmm... sorry, but it's too weird. If you have Webpack version >= 2.2.x installed, you should not encounter such problems.
@eborst,
BTW, why there is componentsCounter name in ./app/modules/Tutorial/index.js ? It seems to be ./components/Counter.
Take a look at the screenshot below:
@eborst,
I got the issue. Will fix it, and give you a note today... Thanks!
@eborst,
Try to update Structor installation:
npm uninstall structornpm install structor
Thanks.
I tried uninstall and install. Now I got some other errors regarding the marieual UI. So I cleaned up. restarted from scratch. Now this seems to work a lot better! Also many thanks for you quick replies! I do appreciate that!
Now I will move on with the tutorial. let see how far I can get ;)
This was time 2 trying to learn this. Got the perpetual loading as well. Not sure what's up. Gonna try a clean install
