I am developing a game based on pixijs, in which animation is generated using Adobe Animate and Pixi-Animate and all this setup is configured with nodejs 8.11.1 and webpack 4. But when I load my texture on Pixi Animate getting the following errors:
Here is my error what i am getting:
addChild
webpack:///./node_modules/pixi.js/lib/core/display/Container.js?:94:13
<anonymous>
webpack:///./src/index.js?:10:1
./src/index.js
http://localhost:9000/salmon.min.js:2786:1
__webpack_require__
http://localhost:9000/salmon.min.js:20:12
<anonymous>
webpack:///multi_(webpack)-dev-server/client?:2:18
[0]
http://localhost:9000/salmon.min.js:2797:1
__webpack_require__
http://localhost:9000/salmon.min.js:20:12
<anonymous>
http://localhost:9000/salmon.min.js:84:18
<anonymous>
http://localhost:9000/salmon.min.js:1:11
My Webpack Configuration is:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require('webpack');
module.exports = {
entry: './src/index.js',
mode:"development",
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'salmon.min.js'
},
plugins: [
new HtmlWebpackPlugin({template: './index.html'}),
new webpack.NamedModulesPlugin(),
],
devServer:{
port: 9000,
compress: true
},
module: {
rules: [
{
test: /\.js$/,
use: ["source-map-loader"],
enforce: "pre"
}
]
}
};
Is there anything I am missing?
Related
The project I'm working on has Redis on port 6379 and the node server on port 5000. I'm running the server by running npm run server
My package.json script is the following:
webpack --watch --progress --config ./build/server/webpack.dev.js
I'm unable to attach a debugger when I add a configuration for Attach to Node.js/Chrome on port 5000 and click the bug icon in WebStorm.
I get invalid response from the remote host
Am I supposed to patch an --inspect option to my package JSON script?
EDIT: I passed inspect down to nodemon. I'm able to attach to the debugger now, but my breakpoints arent suspending. The webpack configs are below:
const commonWebpackConfig = require('./webpack.common')
const merge = require('webpack-merge')
const NodemonPlugin = require('nodemon-webpack-plugin')
module.exports = merge(commonWebpackConfig, {
mode: 'development',
plugins: [
new NodemonPlugin({
nodeArgs: [ '--inspect'],
script: './dist/server.js'
})
]
})
const path = require('path')
const webpack = require('webpack')
const nodeExternals = require('webpack-node-externals')
module.exports = {
entry: {
server: path.join(__dirname, '..', '..', 'server', 'app.js'),
},
output: {
path: path.join(__dirname, '..', '..', 'dist'),
publicPath: '/',
filename: '[name].js'
},
target: 'node',
node: {
__dirname: false,
__filename: false,
},
externals: [nodeExternals()],
resolve: {
extensions: ['.js']
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env'],
plugins: [
['#babel/plugin-proposal-class-properties', {'loose': false}]
]
}
}
}
]
}
}
I found the breakpoint mapping issue. I needed to add the following:
devtool: "eval-source-map",
EDIT:
I don't think the breakpoints are fully working for blocsk of code that has async/await though
I was able to get it to work. We were using nodemon-webpack-plugin, so I needed to pass in nodeArgs like Lena said. I passed it --inspect which by default is port 9229.
I then had to add devtools: "eval-source-map So that my breakpoints had the right mapping.
EDIT:
I don't think the breakpoints are fully working for blocsk of code that has async/await though
I am new to Node JS. I am working on creating a Backend API server with hot reloading by using webpack-hot-middleware. I try to use webpack-dev-middleware to load the server script (index.js) to the memory and execute that javascrip t file.
Here is my code: link
I find that my code can do the hot reloading successfully, but I fail to load the server script (index.js) and boot my API server. For some reasons, I want to use webpack-dev-middleware rather than webpack dev server.
It is my file strucuture:
├── package.json.
├── build
| ├── devserver.js
| └── webpack.devserver.config.js
├── server
| └── index.js (code of the API server)
└── dist
I found tons of tutorials about how to do that on the front end or the backend server that render the HTML, but I need to start my index.js.
So, my question is how to load the js file generated from webpack-dev-middleware and start that js file.
The below is what I try:
const path = require('path');
const express = require('express');
const webpack = require('webpack');
const webpackMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const webpackConfig = require('./webpack.devserver.config');
var StreamCache = require('stream-cache');
var fs = require('fs');
const compiler = webpack(webpackConfig);
const app = express();
const hotMiddleware = webpackHotMiddleware(compiler);
const middleware = webpackMiddleware(compiler, {
publicPath: "",
contentBase: 'server',
stats: {
colors: true,
hash: false,
timings: true,
chunks: false,
chunkModules: false,
modules: false
}
});
app.use(middleware);
app.use(hotMiddleware);
middleware.waitUntilValid(() => {
//Then, what should I do??????
console.log(middleware.fileSystem.readFileSync(path.join(__dirname, '../dist/backend.js')));
})
In webpack.devserver.config.js:
var fs = require('fs');
var path = require('path');
var webpack = require('webpack');
var nodeModules = {};
fs.readdirSync('node_modules')
.filter(function (x) {
return ['.bin'].indexOf(x) === -1;
})
.forEach(function (mod) {
nodeModules[mod] = 'commonjs ' + mod;
});
module.exports = {
devtool: 'eval-source-map',
entry: [
'webpack/hot/signal.js',
'./server/index.js'
],
target: 'node',
output: {
path: path.resolve(__dirname, '../dist'),
filename: 'backend.js',
publicPath: ''
},
plugins: [
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new webpack.DefinePlugin({
})
],
recordsPath: path.resolve(__dirname, '../dist/a.json'),
resolveLoader: {
moduleExtensions: ['-loader']
},
externals: nodeModules,
watch: true,
module: {
rules: [{
test: /\.js$/,
loader: 'babel-loader'
},
{
test: /\.es6$/,
loaders: ['babel-loader']
},
{
test: /\.json?$/,
loader: 'json'
}
]
}
};
Result: code seems to be reloaded successfully after I change something on index.js, but I fail to see the change when I access /api/hi API.
webpack building...
webpack built 4f5191c370239429fae8 in 378ms
Version: webpack 3.10.0
Time: 378ms
Asset Size Chunks Chunk Names
backend.js 47 kB 0 [emitted] main
webpack: Compiled successfully.
webpack: Compiling...
webpack building...
webpack built 59489ea86a2ccf081fa6 in 30ms
Version: webpack 3.10.0
Time: 30ms
Asset Size Chunks Chunk Names
backend.js 47.1 kB 0 [emitted] main
0.4f5191c370239429fae8.hot-update.js 1.84 kB 0 [emitted] main
4f5191c370239429fae8.hot-update.json 43 bytes [emitted]
webpack: Compiled successfully.
I am teaching myself to use Nodejs with Redux and Express. I have a tag in my view, and that's it. Very, very basic. I am getting an error in my console that I don't understand:
Uncaught ReferenceError: process is not defined
at Object.<anonymous> (bundle.js:548)
at __webpack_require__ (bundle.js:20)
at Object.defineProperty.value (bundle.js:492)
at __webpack_require__ (bundle.js:20)
at Object.<anonymous> (bundle.js:482)
at __webpack_require__ (bundle.js:20)
at __webpack_exports__.b (bundle.js:63)
at bundle.js:66
Can someone help me figure out what this means?
Here is my server.js file:
"use strict"
var express = require('express');
var app = express();
var path = require('path');
// MIDDLEWARE TO DEFINE FOLDER FOR STATIC FILES
app.use(express.static('public'))
app.get('/', function(req, res){
res.sendFile(path.resolve(__dirname, 'public', 'index.html'))
})
app.listen(3000, function(){
console.log('app is listening');
})
Here is my app.js file:
"use strict"
import {createStore} from 'redux'
// STEP 3 define reducers
const reducer = function(state=0, action){
switch(action.type){
case "INCREMENT":
return state + action.payload;
break;
}
return state
}
// STEP 1 create the store
const store = createStore(reducer);
store.subscribe(function(){
console.log('current state is: ' + store.getState());
})
// STEP 2 create and dispatch actions
store.dispatch({type: "INCREMENT", payload: 1 })
Here is my webpack.config.js file:
var path = require('path');
const webpack = require('webpack');
module.exports = {
entry: ['./src/app.js'],
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'public')
},
target: 'node',
watch: true,
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-1']
}
}
]
}
}
Try adding this code to the plugin portion of your webpack.config
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify("production") //or "development"
}
});
You can read about why this might be your issue below. Basically you need to give webpack a NODE_ENV variable.
https://github.com/facebook/react/blob/f7850dd3d78d313a9e7774870e85c32719fbe233/docs/docs/getting-started.md
I am following a few tutorials, but mainly the one by Dan Abramov on setting up react hot loader but I am having some issues. I think I have a basic configuration working, however hot reloading of component does not seem to work, so obviously the hot loader set up is wrong :(
When I change a component, my browser console logs this:
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.
- ./app/components/Home/index.jsx
To start off, here is my file structure:
.
|++[app]
|----[actions]
|----[modules]
|----[reducers]
|----[store]
|----index.html
|----index.js
|--[config]
|----server.js
|----webpack.config.js
|--[node_modules]
|--package.json
Here's my webpack config:
var webpack = require('webpack');
var path = require('path');
var autoprefixer = require('autoprefixer');
var isProd = process.env.NODE_ENV === 'production';
module.exports = {
devtool: isProd ? null : 'source-map',
entry: [
'webpack-hot-middleware/client',
path.resolve('app/index.js')
],
output: {
path: path.resolve('dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
resolve: {
root: path.resolve( 'app/'),
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [
{
test: /\.jsx?$/,
loaders: [
'babel'
],
include: path.resolve('.'),
exclude: /node_modules/
},
{
test: /\.(png|jpg)$/,
loader: 'file-loader?name=img/[name].[ext]'
},
{
test: /\.scss$/,
loader: 'style!css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]!postcss!sass'
}
]
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin()
],
postcss: [
autoprefixer({ browsers: ['last 3 versions'] })
]
};
And my server.js
var webpack = require('webpack');
var webpackDevMiddleware = require('webpack-dev-middleware');
var webpackHotMiddleware = require('webpack-hot-middleware');
var config = require('./webpack.config');
var path = require('path');
var app = new (require('express'))();
var port = 3000;
var compiler = webpack(config);
app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath }));
app.use(webpackHotMiddleware(compiler));
app.get('/*', function(req, res) {
res.sendFile(path.resolve('app/index.html'));
});
app.listen(port, function(error) {
if (error) {
console.error(error);
} else {
console.info('started on localhost://%s.', port);
}
});
The react-hot loader is missing within your module.loaders array. More into this.
Next we need to tell Webpack to use React Hot Loader for the components. If you configured Webpack for React, you may already use babel-loader (ex 6to5-loader) or jsx-loader for JS(X) files. Find that line in webpack.config.js and put react-hot before other loader(s).
So you need to add the react-hot loader before your babel loader, like so:
{
test: /\.jsx?$/,
loader: 'react-hot',
exclude: /node_modules/
}
And also you need to install the react-hot-loader module if you haven't already.
npm i -D react-hot-loader
I have a simple webpack with react hotloader & express setup and working. I'm trying to add an external node module that will register a sub router for some services. For some reason, doing so causes a strange exception (see below).
var path = require('path');
var express = require('express');
var webpack = require('webpack');
var config = require('./webpack.config');
var app = express();
var router = express.Router();
var mod = require("my-module");
mod.registerServices(router); // <-- adds routes to the router
app.use("/api/v1*", router); // <-- This line causes the error
var compiler = webpack(config);
app.use(require('webpack-dev-middleware')(compiler, {
noInfo: true,
publicPath: config.output.publicPath,
stats: {
colors: true
}
}));
app.use(require('webpack-hot-middleware')(compiler));
app.get('/*', function(req, res) {
res.sendFile(path.join(__dirname, 'index.html'));
});
app.listen(3000, 'localhost', function(err) {
if (err) {
console.log(err);
return;
}
console.log('Listening at http://localhost:3000');
});
The Exception:
$ node server.js
/Users/bmonro/Documents/Code/nui-redux/node_modules/react-transform-hmr/lib/index.js:51
throw new Error('locals[0] does not appear to be a `module` object with Hot Module ' + 'replacement API enabled. You should disable react-transform-hmr in ' + 'production by using `env` section in Babel configuration. See the ' + 'example in README: https://github.com/gaearon/react-transform-hmr');
^
Error: locals[0] does not appear to be a `module` object with Hot Module replacement API enabled. You should disable react-transform-hmr in production by using `env` section in Babel configuration. See the example in README: https://github.com/gaearon/react-transform-hmr
at Object.proxyReactComponents [as default] (/Users/bmonro/Documents/Code/nui-redux/node_modules/react-transform-hmr/lib/index.js:51:11)
at Object.<anonymous> (/Users/bmonro/Documents/Code/nui-redux/src/ext/nui-company-admin/lib/CompanyLocation/components/simple.js:25:60)
at Module._compile (module.js:434:26)
at Object.Module._extensions..js (module.js:452:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at Object.<anonymous> (/Users/bmonro/Documents/Code/nui-redux/src/ext/nui-company-admin/lib/CompanyLocation/containers/CompanyLocationPage.js:13:25)
at Module._compile (module.js:434:26)
UPDATE
Turns out that removing this from .babelrc where I have some react transforms enabled and subsequently removing all of the web pack hotloader plugins & middleware gets the router working again.
{
"transform": "react-transform-hmr",
"imports": ["react"],
"locals": ["module"]
}
Try this solution: don't use babel-plugin-react-transform in .babelrc, use config in webpack.config.js
module: {
loaders: [
{
test: /\.(js|jsx)$/,
loader: 'babel',
include: path.join(__dirname, 'src'),
query: {
plugins: [
["react-transform", {
transforms: [{
transform: "react-transform-hmr",
imports: ["react"],
locals: ["module"]
}]
}]
]
}
}
]
}
Details:
https://github.com/gaearon/babel-plugin-react-transform/issues/62
https://github.com/gaearon/react-transform-hmr/issues/5