search

sysgears / spinjs

SpinJS is now Zen! The project has been renamed and moved to Larix Framework.
https://github.com/sysgears/larix/tree/master/packages/zen
MIT License
43 stars 8 forks source link

fix react-hot-dom warning #29

Closed veeramarni closed 5 years ago

veeramarni commented 5 years ago

We seeing warning image

The following change will fix the warning. https://github.com/gaearon/react-hot-loader#webpack-plugin

larixer commented 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

veeramarni commented 5 years ago

hi @vlasenko

I have moved to @larix/zen and using 0.1.13, but I still have this warning.

veeramarni commented 5 years ago

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 } } } }
larixer commented 5 years ago

@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.

veeramarni commented 5 years ago

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'],

image

larixer commented 5 years ago

@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