We Keep Coding

Issue with integrating cortex-js/compute machine in react application

I am trying to use compute machine provided by the cortexjs. https://cortexjs.io/compute-engine
I saved this dependency using
npm i #cortex-js/compute-engine
After I ran npm start, I am getting this error:
ERROR in ./node_modules/#cortex-js/compute-engine/dist/compute-engine.min.js 2:1360
Module parse failed: Unexpected token (2:1360)
You may need an appropriate loader to handle this file type.
Following is my webpack file:
var webpack = require('webpack');
const HtmlWebPackPlugin = require("html-webpack-plugin");
var path = require('path');
module.exports = {
// output: {
// path: path.resolve(__dirname, 'dist'),
// filename: 'main.js',
// publicPath: '/'
// },
mode : 'production',
devServer: {
historyApiFallback: true,
},
devtool: "source-map",
module: {
rules: [
{
test: /\.(png|jpg|woff|woff2|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader"
}
]
},
{
test: /\.css$/,
loader: 'style-loader'
},
{
test: /\.css$/,
loader: 'css-loader',
options: {
import: true,
},
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
})
]
};
Please can someone suggest which loader should I add to webpack.config file to make this work.

I have error '] Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema"

When I try to use command npm start, I get error
"] Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema."
Code: https://next.plnkr.co/edit/hEHTiPYQXQ7POWIH?open=lib%2Fscript.js&deferRun=1
Here is my full configuration code for webpack
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/app/app.js',
output: {
path: './dist',
filename: 'app.bundle.js',
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
{
test: /\.html$/,
use: 'raw-loader'
},
{
test: /\.scss$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'sass-loader',
}
]
},
{
test: /\.css$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
}
]
},
]
},
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html',
inject: 'body',
hash: true
}),
],
devtool: "#inline-source-map"
}
Error:
Did not detect a `bs-config.json` or `bs-config.js` override file. Using lite-server defaults...
[0] ** browser-sync config **
[0] { injectChanges: false,
[0] files: [ './**/*.{html,htm,css,js}' ],
[0] watchOptions: { ignored: 'node_modules' },
[0] server: { baseDir: './', middleware: [ [Function], [Function] ] } }
] Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
[1] - configuration.module has an unknown property 'loaders'. These properties are valid:
[1] object { defaultRules?, exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, strictExportPresence?, strictThisContextOnImports?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp? }
[1] -> Options affecting the normal modules (`NormalModuleFactory`).
[1] - configuration.output.path: The provided value "./dist" is not an absolute path!
[1] -> The output directory as **absolute path** (required).

I found your problem webpack use rules config not loader config so change your code into this
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require("path");
module.exports = {
entry: 'src/app/app.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index_bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
{
test: /\.html$/,
use: 'raw-loader'
},
{
test: /\.scss$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'sass-loader',
}
]
},
{
test: /\.css$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
}
]
},
]
},
plugins: [
new HtmlWebpackPlugin({
template: 'index.html',
inject: 'body',
hash: true
}),
],
devtool: "#inline-source-map"
}
Update: move your index.html file into same level of webpack.config.js
I dont see in the document they allow user to change into different path
Please let me know if you still have a problem

webpack with uglify combined with sass loaders give an error, otherwise works fine

I have a webpack config that compiles all my es2015 without a problem. it's uglified, etc.
Here is the config:
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const nodeEnv = process.env.NODE_ENV || 'production';
module.exports = {
devtool: 'source-map',
entry: {
filename: './src/index.js'
},
// entry: ['./src/index.js', './src/scss/main.scss'],
output: {
filename: './app/index.min.js'
},
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: [
['es2015', { 'modules': false }]
]
}
}]//,
// rules: [{
// test: /\.css$/,
// use: ExtractTextPlugin.extract({
// use: 'css-loader?importLoaders=1',
// }),
// }, {
// test: /\.scss$/,
// use: ExtractTextPlugin.extract({
// fallback: 'style-loader',
// use: ['css-loader', 'sass-loader'],
// publicPath: '/app'
// })
// }]
},
plugins: [
new webpack.DefinePlugin({
'proccess.env': { NODE_ENV: JSON.stringify(nodeEnv) }
}),
// new ExtractTextPlugin({
// filename: './app/main.css',
// disable: false,
// allChunks: true
// }),
new webpack.optimize.UglifyJsPlugin({
compress: { warnings: false },
output: { comments: false },
sourceMap: true
})
]
}
but when i uncomment the plugins and loaders and replace the entry files , I get an error from uglifyjs:
ERROR in ./app/index.min.js from UglifyJs
Invalid assignment [./src/js/modules/requests.js:19,0][./app/index.min.js:2083,38]
Which is correct, it doesn't know what to do with an => function. But why does the extra loaders mess up the order of the loaders (assuming now that this is the problem)?
Always open for better ways to fix this problem or perhaps a good examples (couldn't find myself)

You're using both module.rules and module.loaders. When webpack sees module.rules it ignores module.loaders completely, which means that your .js rule does not exist and therefore you don't transpile your JavaScript at all. module.loaders only exists for compatibility reasons and you should only use module.rules.
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [
['es2015', { 'modules': false }]
]
}
}, {
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: 'css-loader?importLoaders=1',
})
}, {
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader'],
publicPath: '/app'
})
}]
}

webpack + babel - react, unexpected token 'import'

I'm trying to make index.js work with es2015.
Before directing me to .babelrc, note that I have added BOTH es2015 and react (to be sure, but there's no react here).
It features
import { default as Logary, Targets, getLogger, build } from 'logary';
And here's .babelrc:
{
"presets": ['es2015', 'react']
}
And webpack.config.js
var webpack = require('webpack'),
HtmlWebpackPlugin = require('html-webpack-plugin'),
path = require('path');
module.exports = {
devtool: 'source-map',
entry: [
'webpack-hot-middleware/client?reload=true',
'./index.js'
],
output: {
path: path.resolve('./dist'),
filename: '[name].js',
publicPath: '/'
},
loaders: [
{ test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{ test: /\.css$/, loader: "style!css" },
{ test: /\.(png|jpg|jpeg|gif|woff)$/, loader: 'url?limit=8192' },
{ test: /\.(otf|eot|ttf)$/, loader: "file?prefix=font/" },
{ test: /\.svg$/, loader: "file" }
],
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.template.html'
}),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development')
})
],
resolve: {
extensions: ['', '.js']
}
}
Gives error:
ERROR in ./index.js
Module parse failed: /Users/h/logary-js/examples/webpack/index.js Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import { default as Logary, Targets, getLogger, build } from 'logary';
|
| // once per site/app
Why is it not handling the import-token?

Your webpack.config.js structure is not correct. Webpack doesn't recognize all your loaders. Specifically, you need to put the loaders property inside of a module section like this:
module: {
loaders: [
{ test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{ test: /\.css$/, loader: "style!css" },
{ test: /\.(png|jpg|jpeg|gif|woff)$/, loader: 'url?limit=8192' },
{ test: /\.(otf|eot|ttf)$/, loader: "file?prefix=font/" },
{ test: /\.svg$/, loader: "file" }
],
}

webpack dev middleware, how to autoreload when HMR fails

I am getting the following message in my browser's console when I change my javascript source:
[HMR] The following modules couldn't be hot updated: (Full reload
needed) This is usually because the modules which have changed (and
their parents) do not know how to hot reload themselves. See
http://webpack.github.io/docs/hot-module-replacement-with-webpack.html
for more details.
My question is how can I tell webpack to just auto reload the page when this happens?
Here is my server set up:
app.use(morgan('dev'));
// Disable views cache
app.set('view cache', false);
var webpack = require('webpack');
var webpackConfig = require('../client/webpack.config');
var compiler = webpack(webpackConfig);
app.use(require("webpack-dev-middleware")(compiler, {
noInfo: true, publicPath: webpackConfig.output.publicPath
}));
app.use(require("webpack-hot-middleware")(compiler));
and my webpack.config:
var path = require('path');
var AureliaWebpackPlugin = require('../node_modules/aurelia-webpack-plugin');
var webpack = require('../node_modules/webpack');
module.exports = {
entry: {
main: [
'webpack-hot-middleware/client',
'./client/src/main'
]
},
resolve: {
alias: {
breeze: 'breeze-client/build/breeze.debug',
resources: path.resolve( __dirname, 'src', 'resources'),
utils: path.resolve( __dirname, 'src', 'resources', 'utils', 'utils'),
tradestudyUtils: path.resolve( __dirname, 'src', 'resources', 'tradestudy-utils', 'tradestudy-utils')
}
},
output: {
path: path.join(__dirname, 'client'),
filename: 'bundle.js',
publicPath: '/'
},
devtool: 'eval',
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new AureliaWebpackPlugin()
],
module: {
//preLoaders: [
// {test: /\.js$/, exclude: /node_modules/, loader: 'eslint-loader'}
//],
loaders: [
{ test: /\.scss$/, loaders: ['style', 'css', 'sass'] },
{ test: /\.js$/, loader: 'babel', exclude: /node_modules/, query: { presets: ['es2015-loose', 'stage-1'], plugins: ['transform-decorators-legacy'] } },
{ test: /\.css?$/, loader: 'style!css' },
{ test: /\.html$/, loader: 'raw' },
{ test: /\.(png|gif|jpg)$/, loader: 'url-loader?limit=8192' },
{ test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&minetype=application/font-woff2' },
{ test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&minetype=application/font-woff' },
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader' }
]
}
};
Thanks in advance?

You can pass parameter reload to webpack-hot-middleware/client:
entry: {
main: [
'webpack-hot-middleware/client?reload=true',
'./client/src/main'
]
},