Closed veeramarni closed 5 years ago
@veeramarni I have added the fix into @larix/zen@0.1.12
https://github.com/sysgears/larix/commit/0f7ab5a69e094162d990c430873bb339bb8f6b7c
Please note that spinjs
has been renamed to @larix/zen
. @larix/zen
should be backward compatible with spinjs@0.4.x
hi @vlasenko
I have moved to @larix/zen and using 0.1.13, but I still have this warning.
debug details
zen debug Zen Config:
{ '[test]':
{ stack:
Stack {
technologies:
[ 'apollo',
'ts',
'react',
'webpack',
'css',
'server',
'es6',
'js',
'sass' ],
platform: 'server' },
roles: [ 'test', 'test' ],
defines:
{ __DEV__: true,
__GRAPHQL_URL__: '"http://localhost:8080/graphql"',
__BACKEND_URL__: '"http://localhost:3010"',
__SSR__: true,
__PERSIST_GQL__: '\'false\'',
__FRONTEND_BUILD_DIR__: '\'dist\'',
__DLL_BUILD_DIR__: '\'dist/.build/dll\'',
__DEBUGGING__: '\'false\'',
__TEST__: true },
name: 'test',
require:
{ [Function: require]
resolve: [Function],
probe: [Function],
cwd:
'/Users/projects/fullstack-pro/servers/frontend-server' },
plugins:
[ WebpackPlugin {},
WebAssetsPlugin {},
CssProcessorPlugin {},
ApolloPlugin {},
TypeScriptPlugin {},
BabelPlugin {},
ReactPlugin {},
TCombPlugin {},
FlowRuntimePLugin {},
ReactNativePlugin {},
ReactNativeWebPlugin {},
StyledComponentsPlugin {},
AngularPlugin {},
VuePlugin {},
I18NextPlugin {},
VuePlugin {},
ReactHotLoaderPlugin {} ],
cache: '../../.cache',
backendBuildDir: 'dist',
frontendBuildDir: 'dist',
dllBuildDir: 'dist/.build/dll',
ssr: true,
backendUrl: 'http://localhost:3010',
webpackDll: true,
reactHotLoader: true,
persistGraphQL: false,
frontendRefreshOnBackendChange: true,
nodeDebugger: false,
overridesConfig: './tools/webpackAppConfig.js',
devProxy: true,
id: '[test]',
configPath:
'/Users/projects/fullstack-pro/servers/frontend-server/.zenrc.js',
buildDir: undefined,
sourceMap: true,
minify: true },
'[server]':
{ stack:
Stack {
technologies:
[ 'apollo',
'ts',
'react',
'webpack',
'css',
'server',
'es6',
'js',
'sass' ],
platform: 'server' },
nodeDebugger: false,
infered: true,
entry: './src/backend/app.ts',
tsLoaderOptions: { configFileName: './tsconfig.json' },
defines:
{ __DEV__: true,
__GRAPHQL_URL__: '"http://localhost:8080/graphql"',
__BACKEND_URL__: '"http://localhost:3010"',
__SSR__: true,
__PERSIST_GQL__: '\'false\'',
__FRONTEND_BUILD_DIR__: '\'dist\'',
__DLL_BUILD_DIR__: '\'dist/.build/dll\'',
__DEBUGGING__: '\'false\'',
__SERVER__: true },
enabled: true,
webpackConfig: { externals: [ [Function], [Function] ] },
name: 'server',
require:
{ [Function: require]
resolve: [Function],
probe: [Function],
cwd:
'/Users/projects/fullstack-pro/servers/frontend-server' },
plugins:
[ WebpackPlugin {},
WebAssetsPlugin {},
CssProcessorPlugin {},
ApolloPlugin {},
TypeScriptPlugin {},
BabelPlugin {},
ReactPlugin {},
TCombPlugin {},
FlowRuntimePLugin {},
ReactNativePlugin {},
ReactNativeWebPlugin {},
StyledComponentsPlugin {},
AngularPlugin {},
VuePlugin {},
I18NextPlugin {},
VuePlugin {},
ReactHotLoaderPlugin {} ],
roles: [ 'build', 'watch' ],
cache: '../../.cache',
backendBuildDir: 'dist',
frontendBuildDir: 'dist',
dllBuildDir: 'dist/.build/dll',
ssr: true,
backendUrl: 'http://localhost:3010',
webpackDll: true,
reactHotLoader: true,
persistGraphQL: false,
frontendRefreshOnBackendChange: true,
overridesConfig: './tools/webpackAppConfig.js',
devProxy: true,
id: '[server]',
configPath:
'/Users/projects/fullstack-pro/servers/frontend-server/.zenrc.js',
buildDir: undefined,
sourceMap: true,
minify: true },
'[web]':
{ entry: './src/index.tsx',
stack:
Stack {
technologies: [ 'apollo', 'ts', 'react', 'webpack', 'css', 'web' ],
platform: 'web' },
tsLoaderOptions: { configFileName: './tsconfig.json' },
webpackDevPort: 3000,
openBrowser: true,
defines:
{ __DEV__: true,
__GRAPHQL_URL__: '"http://localhost:8080/graphql"',
__BACKEND_URL__: '"http://localhost:3010"',
__SSR__: true,
__PERSIST_GQL__: '\'false\'',
__FRONTEND_BUILD_DIR__: '\'dist\'',
__DLL_BUILD_DIR__: '\'dist/.build/dll\'',
__DEBUGGING__: '\'false\'',
__CLIENT__: true },
htmlTemplate: '../../tools/html-plugin-template.ejs',
waitOn: [ 'tcp:localhost:8080' ],
enabled: true,
webpackConfig: {},
name: 'web',
require:
{ [Function: require]
resolve: [Function],
probe: [Function],
cwd:
'/Users/projects/fullstack-pro/servers/frontend-server' },
plugins:
[ WebpackPlugin {},
WebAssetsPlugin {},
CssProcessorPlugin {},
ApolloPlugin {},
TypeScriptPlugin {},
BabelPlugin {},
ReactPlugin {},
TCombPlugin {},
FlowRuntimePLugin {},
ReactNativePlugin {},
ReactNativeWebPlugin {},
StyledComponentsPlugin {},
AngularPlugin {},
VuePlugin {},
I18NextPlugin {},
VuePlugin {},
ReactHotLoaderPlugin {} ],
roles: [ 'build', 'watch' ],
cache: '../../.cache',
backendBuildDir: 'dist',
frontendBuildDir: 'dist',
dllBuildDir: 'dist/.build/dll',
ssr: true,
backendUrl: 'http://localhost:3010',
webpackDll: true,
reactHotLoader: true,
persistGraphQL: false,
frontendRefreshOnBackendChange: true,
nodeDebugger: false,
overridesConfig: './tools/webpackAppConfig.js',
devProxy: true,
id: '[web]',
configPath:
'/Users/projects/fullstack-pro/servers/frontend-server/.zenrc.js',
buildDir: undefined,
sourceMap: true,
minify: true } }
zen info Version 0.1.13
zen debug [server] = { entry:
{ index:
[ 'raf/polyfill',
'@babel/polyfill',
'webpack/hot/signal.js',
'./src/backend/app.ts' ] },
name: 'server',
module:
{ rules:
[ { test: /\.mjs$/,
include: /node_modules/,
type: 'javascript/auto' },
{ test: /\.(png|ico|jpg|gif|xml)$/,
use:
{ loader: 'url-loader',
options: { name: '[hash].[ext]', limit: 100000 } } },
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use:
{ loader: 'url-loader',
options: { name: '[hash].[ext]', limit: 100000 } } },
{ test: /\.(otf|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: { loader: 'file-loader', options: { name: '[hash].[ext]' } } },
{ test: /\.css$/,
exclude: [Function: exclude],
use:
[ { loader: 'isomorphic-style-loader', options: {} },
{ loader: 'css-loader', options: { sourceMap: true } },
{ loader: 'postcss-loader', options: { sourceMap: true } } ] },
{ test: /\.css$/,
exclude: [Function: exclude],
use:
[ { loader: 'isomorphic-style-loader', options: {} },
{ loader: 'css-loader', options: { sourceMap: true } } ] },
{ test: /\.scss$/,
exclude: [Function: exclude],
use:
[ { loader: 'isomorphic-style-loader', options: {} },
{ loader: 'css-loader', options: { sourceMap: true } },
{ loader: 'postcss-loader', options: { sourceMap: true } },
{ loader: 'sass-loader', options: { sourceMap: true } } ] },
{ test: /\.scss$/,
exclude: [Function: exclude],
use:
[ { loader: 'isomorphic-style-loader', options: {} },
{ loader: 'css-loader', options: { sourceMap: true } },
{ loader: 'sass-loader', options: { sourceMap: true } } ] },
{ test: /\.graphqls/,
use: { loader: 'raw-loader', options: {} } },
{ test: /\.(graphql|gql)$/,
use: [ { loader: 'graphql-tag/loader', options: {} } ] },
{ test: /\.tsx?$/,
exclude: [Function: exclude],
use:
[ { loader: 'awesome-typescript-loader',
options: { configFileName: './tsconfig.json', useCache: true } } ] },
{ test: /\.jsx?$/,
exclude: [Function: exclude],
use:
{ loader: 'babel-loader',
options:
{ babelrc: true,
cacheDirectory: '../../.cache/babel-loader',
rootMode: 'upward-optional' } } } ],
unsafeCache: false },
resolve:
{ symlinks: false,
cacheWithContext: false,
unsafeCache: false,
extensions:
[ '.web.tsx',
'.web.jsx',
'.web.ts',
'.web.mjs',
'.web.js',
'.tsx',
'.jsx',
'.ts',
'.mjs',
'.js',
'.json' ] },
watchOptions: { ignored: /(?:)/ },
bail: false,
stats:
{ hash: false,
version: false,
timings: true,
assets: false,
chunks: false,
modules: false,
reasons: false,
children: false,
source: true,
errors: true,
errorDetails: true,
warnings: true,
publicPath: false,
colors: true },
output:
{ devtoolModuleFilenameTemplate: [Function],
pathinfo: false,
filename: '[name].js',
path:
'/Users/projects/fullstack-pro/servers/frontend-server/dist',
publicPath: '/',
sourceMapFilename: '[name].[chunkhash].js.map' },
devtool: '#cheap-module-source-map',
mode: 'development',
performance: { hints: false },
plugins:
[ HotModuleReplacementPlugin {
options: {},
multiStep: undefined,
fullBuildTimeout: 200,
requestTimeout: 10000 },
BannerPlugin {
options:
{ banner: 'require("source-map-support").install();',
raw: true,
entryOnly: false },
banner: [Function] },
DefinePlugin {
definitions:
{ __CLIENT__: false,
__SERVER__: true,
__SSR__: true,
__DEV__: true,
__TEST__: false,
'process.env.NODE_ENV': '"development"',
__BACKEND_URL__: '"http://localhost:3010"',
__GRAPHQL_URL__: '"http://localhost:8080/graphql"',
__PERSIST_GQL__: '\'false\'',
__FRONTEND_BUILD_DIR__: '\'dist\'',
__DLL_BUILD_DIR__: '\'dist/.build/dll\'',
__DEBUGGING__: '\'false\'' } },
DefinePlugin { definitions: { __PERSIST_GQL__: false } },
VirtualModulesPlugin {
_staticModules:
{ '/Users/projects/fullstack-pro/servers/frontend-server/node_modules/persisted_queries.json': '{}' } },
CheckerPlugin {} ],
target: 'node',
externals: [ [Function], [Function] ],
optimization:
{ removeAvailableModules: false,
removeEmptyChunks: false,
splitChunks: false },
node: { __dirname: true, __filename: true } }
zen debug [webDll] = { name: 'webDll',
module:
{ rules:
[ { test: /\.mjs$/,
include: /node_modules/,
type: 'javascript/auto' },
{ test: /\.ts$/,
exclude: [Function: exclude],
use:
[ { loader: 'awesome-typescript-loader',
options: { configFileName: './tsconfig.json', useCache: true } } ] } ] },
resolve:
{ symlinks: false,
cacheWithContext: false,
extensions: [ '.ts', '.mjs', '.js', '.json' ] },
watchOptions: { ignored: /(?:)/ },
bail: true,
stats:
{ hash: false,
version: false,
timings: true,
assets: false,
chunks: false,
modules: false,
reasons: false,
children: false,
source: true,
errors: true,
errorDetails: true,
warnings: true,
publicPath: false,
colors: true },
output:
{ devtoolModuleFilenameTemplate: [Function],
pathinfo: false,
libraryTarget: 'umd',
globalObject:
'(typeof window !== \'undefined\' ? window : typeof global !== \'undefined\' ? global : this)',
filename: 'vendor_sampleStackFrontendServerWeb_[hash]_dll.js',
path:
'/Users/projects/fullstack-pro/servers/frontend-server/dist/.build/dll',
library: 'vendor_sampleStackFrontendServerWeb' },
devtool: '#cheap-module-source-map',
mode: 'development',
performance: { hints: false },
plugins:
[ DefinePlugin {
definitions:
{ 'process.env.NODE_ENV': '"development"',
__BACKEND_URL__: '"http://localhost:3010"',
__DEV__: true,
__GRAPHQL_URL__: '"http://localhost:8080/graphql"',
__SSR__: true,
__PERSIST_GQL__: '\'false\'',
__FRONTEND_BUILD_DIR__: '\'dist\'',
__DLL_BUILD_DIR__: '\'dist/.build/dll\'',
__DEBUGGING__: '\'false\'',
__CLIENT__: true } },
DllPlugin {
options:
{ name: 'vendor_sampleStackFrontendServerWeb',
path:
'dist/.build/dll/vendor_sampleStackFrontendServerWeb_dll.json' } },
CheckerPlugin {} ],
node:
{ __dirname: true,
__filename: true,
fs: 'empty',
net: 'empty',
tls: 'empty' },
optimization:
{ removeAvailableModules: false,
removeEmptyChunks: false,
splitChunks: false },
entry:
{ vendor:
[ '@cdm-logger/client',
'@common-stack/client-core',
'@common-stack/client-react',
'@common-stack/client-redux',
'@common-stack/core',
'@common-stack/server-core',
'apollo-cache-inmemory',
'apollo-client',
'apollo-fetch',
'apollo-link',
'apollo-link-batch-http',
'apollo-link-context',
'apollo-link-debounce',
'apollo-link-error',
'apollo-link-http',
'apollo-link-logger',
'apollo-link-schema',
'apollo-link-retry',
'apollo-link-ws',
'apollo-logger',
'browser-bunyan',
'classnames',
'connected-react-router',
'cors',
'dotenv',
'envalid',
'error-stack-parser',
'fela',
'fela-beautifier',
'fela-dom',
'fela-font-renderer',
'fela-perf',
'fela-plugin-fallback-value',
'fela-plugin-logger',
'fela-plugin-lvha',
'fela-plugin-prefixer',
'fela-plugin-unit',
'fela-plugin-validator',
'fela-preset-web',
'graphql',
'graphql-tag',
'history',
'immutability-helper',
'js-cookie',
'lodash',
'ramda',
'react',
'react-apollo',
'react-dom',
'react-fela',
'react-helmet',
'react-loadable',
'react-redux',
'react-redux-typescript',
'react-resizable',
'react-router',
'react-router-config',
'react-router-dom',
'react-router-redux',
'react-transition-group',
'redux',
'redux-observable',
'redux-persist',
'redux-logger',
'redux-thunk',
'reselect',
'sourcemapped-stacktrace',
'subscriptions-transport-ws',
'universal-cookie-express',
'webpack-dev-server/client' ] } }
zen debug [web] = { entry:
{ index:
[ 'raf/polyfill',
'webpack/hot/dev-server',
'webpack-dev-server/client?http://localhost:3000/',
'./src/index.tsx' ] },
name: 'web',
module:
{ rules:
[ { test: /\.mjs$/,
include: /node_modules/,
type: 'javascript/auto' },
{ test: /\.(png|ico|jpg|gif|xml)$/,
use:
{ loader: 'url-loader',
options: { name: '[hash].[ext]', limit: 100000 } } },
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use:
{ loader: 'url-loader',
options: { name: '[hash].[ext]', limit: 100000 } } },
{ test: /\.(otf|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: { loader: 'file-loader', options: { name: '[hash].[ext]' } } },
{ test: /\.css$/,
exclude: [Function: exclude],
use:
[ { loader: 'style-loader', options: {} },
{ loader: 'css-loader',
options: { sourceMap: true, importLoaders: 1 } },
{ loader: 'postcss-loader', options: { sourceMap: true } } ] },
{ test: /\.css$/,
exclude: [Function: exclude],
use:
[ { loader: 'style-loader', options: {} },
{ loader: 'css-loader',
options: { sourceMap: true, importLoaders: 1 } } ] },
{ test: /\.graphqls/,
use: { loader: 'raw-loader', options: {} } },
{ test: /\.(graphql|gql)$/,
use: [ { loader: 'graphql-tag/loader', options: {} } ] },
{ test: /\.tsx?$/,
exclude: [Function: exclude],
use:
[ { loader: 'awesome-typescript-loader',
options: { configFileName: './tsconfig.json', useCache: true } } ] } ],
unsafeCache: false },
resolve:
{ symlinks: false,
cacheWithContext: false,
unsafeCache: false,
extensions:
[ '.web.tsx',
'.web.ts',
'.web.mjs',
'.web.js',
'.tsx',
'.ts',
'.mjs',
'.js',
'.json' ] },
watchOptions: { ignored: /(?:)/ },
bail: false,
stats:
{ hash: false,
version: false,
timings: true,
assets: false,
chunks: false,
modules: false,
reasons: false,
children: false,
source: true,
errors: true,
errorDetails: true,
warnings: true,
publicPath: false,
colors: true },
output:
{ devtoolModuleFilenameTemplate: [Function],
pathinfo: false,
libraryTarget: 'umd',
globalObject:
'(typeof window !== \'undefined\' ? window : typeof global !== \'undefined\' ? global : this)',
filename: '[name].[hash].js',
path:
'/Users/projects/fullstack-pro/servers/frontend-server/dist/web',
publicPath: '/' },
devtool: '#cheap-module-source-map',
mode: 'development',
performance: { hints: false },
plugins:
[ HotModuleReplacementPlugin {
options: {},
multiStep: undefined,
fullBuildTimeout: 200,
requestTimeout: 10000 },
DefinePlugin {
definitions:
{ __CLIENT__: true,
__SERVER__: false,
__SSR__: true,
__DEV__: true,
__TEST__: false,
'process.env.NODE_ENV': '"development"',
__BACKEND_URL__: '"http://localhost:3010"',
__GRAPHQL_URL__: '"http://localhost:8080/graphql"',
__PERSIST_GQL__: '\'false\'',
__FRONTEND_BUILD_DIR__: '\'dist\'',
__DLL_BUILD_DIR__: '\'dist/.build/dll\'',
__DEBUGGING__: '\'false\'' } },
ManifestPlugin {
opts:
{ publicPath: null,
basePath: '',
fileName: 'assets.json',
transformExtensions: /^(gz|map)$/i,
writeToFileEmit: false,
seed: null,
filter: null,
map: null,
generate: null,
sort: null,
serialize: [Function: serialize] } },
DefinePlugin { definitions: { __PERSIST_GQL__: false } },
VirtualModulesPlugin {
_staticModules:
{ '/Users/projects/fullstack-pro/servers/frontend-server/node_modules/persisted_queries.json': '{}' } },
CheckerPlugin {} ],
node:
{ __dirname: true,
__filename: true,
fs: 'empty',
net: 'empty',
tls: 'empty' },
optimization:
{ removeAvailableModules: false,
removeEmptyChunks: false,
splitChunks: false },
devServer:
{ hot: true,
publicPath: '/',
headers: { 'Access-Control-Allow-Origin': '*' },
open: true,
quiet: false,
noInfo: true,
historyApiFallback: true,
port: 3000,
proxy:
{ '!(/sockjs-node/**/*|/*.hot-update.{json,js})':
{ target: 'http://localhost:3010', logLevel: 'info', ws: true } } } }
@veeramarni There is no react-hot-loader
in the stack list. Make sure you have react-hot-loader
as a dependency or devDependency either in your packages/foo
project or in the root package.json
of your monorepo.
Ok, thanks, I have added it to the stack and it errors out at line 23. Do I need to add anything additional to the stack?
stack: ['web', 'react-hot-loader'],
@veeramarni Generally with @larix/zen
you should not fill in stack
manually. It should do this for you. You just need to have dependencies in your package.json
We seeing warning
The following change will fix the warning. https://github.com/gaearon/react-hot-loader#webpack-plugin