Netlify build passed but shows only html css - reactjs

I need help on netlify deployments. Actually it deploys and shows "Published" but I tried Gatsby build and nothing related to fail or any netlify failed deployment but once it is published in Live then it only shows html & css.
Navbar menu and dropdowns doesn't works. But in localhost, it shows everythings.
I don't understand why after Netlify deployment the website doesn't looks like my local.
Dev console shows these warnings:
-React-Hot-Loader: react-🔥-dom patch is not detected. React 16.6+ features may not work.
-You may be attempting to nest <Helmet> components within each other, which is not allowed. Refer to our API for more information.
-Warning: componentWillMount has been renamed, and is not recommended for use. See https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html for details.
What I tried:
-Check old commits.
-Check public folder in local apache server.
-Clear gatsby cache, netlify cache and redeploy.
Nothing worked if you got any idea I would like to test please
Here is the gatsby log:
gatsby build
success open and validate gatsby-configs - 0.111s
success load plugins - 1.952s
success onPreInit - 0.034s
success delete html and css files from previous builds - 0.049s
success initialize cache - 0.009s
success copy gatsby files - 0.113s
success onPreBootstrap - 0.015s
success createSchemaCustomization - 0.008s
-> wordpress__wp_v2 fetched : 1
-> wordpress__wp_example.wordpress.com fetched : 1
Path: /wp/v2/sites/example.wordpress.com/jetpack-global-styles?per_page=100&page=1
The server response was "403 Forbidden"
Inner exception message: "Sorry, you are not allowed to do that."
-> wordpress__POST fetched : 59
-> wordpress__PAGE fetched : 2
-> wordpress__wp_media fetched : 90
-> wordpress__wp_blocks fetched : 1
-> wordpress__wp_feedback fetched : 0
-> wordpress__wp_jp_pay_order fetched : 0
-> wordpress__wp_jp_pay_product fetched : 0
-> wordpress__wp_block_areas fetched : 0
-> wordpress__wp_types fetched : 1
-> wordpress__wp_statuses fetched : 1
-> wordpress__wp_taxonomies fetched : 1
-> wordpress__CATEGORY fetched : 13
-> wordpress__TAG fetched : 7
-> wordpress__wp_users fetched : 2
-> wordpress__wp_me fetched : 1
-> wordpress__wp_comments fetched : 0
-> wordpress__wp_search fetched : 61
-> wordpress__wp_settings fetched : 1
Path: /wp/v2/sites/example.wordpress.com/themes?per_page=100&page=1
The server response was "400 Bad Request"
Inner exception message: "Missing parameter(s): status"
success source and transform nodes - 15.832s
warn Multiple node fields resolve to the same GraphQL field `wordpress__wp_media.guid` - [`guid`, `guid___NODE`].
warn Multiple node fields resolve to the same GraphQL field `wordpress__POST.jetpack_featured_media_url` -
success building schema - 1.044s
success createPages - 0.149s
warn Non-deterministic routing danger: Attempting to create page: "/contact/", but page "/contact" already exists
This could lead to non-deterministic routing behavior
success createPagesStatefully - 0.244s
success onPreExtractQueries - 0.003s
success update schema - 0.055s
success extract queries from components - 0.755s
success write out requires - 0.010s
success write out redirect data - 0.005s
success Build manifest and related icons - 0.168s
success onPostBootstrap - 0.194s
â €
info bootstrap finished - 29.155 s
â €
success Building production JavaScript and CSS bundles - 59.710s
success Rewriting compilation hashes - 0.005s
success run queries - 61.016s - 97/97 1.59/s
[ ] 0.001 s 0/98 0% Building static HTML for pages
i18next: languageChanged en
i18next: languageChanged en
i18next: initialized {
debug: true,
initImmediate: true,
ns: [ 'translation' ],
defaultNS: 'translation',
fallbackLng: [ 'en' ],
fallbackNS: false,
whitelist: false,
nonExplicitWhitelist: false,
load: 'languageOnly',
preload: false,
simplifyPluralSuffix: true,
keySeparator: '.',
nsSeparator: ':',
pluralSeparator: '_',
contextSeparator: '_',
partialBundledLanguages: false,
saveMissing: false,
updateMissing: false,
saveMissingTo: 'fallback',
saveMissingPlurals: true,
missingKeyHandler: false,
missingInterpolationHandler: false,
postProcess: false,
returnNull: true,
returnEmptyString: true,
returnObjects: false,
joinArrays: false,
returnedObjectHandler: [Functi18next: initialized {
debug: true,
initImmediate: true,
ns: [ 'translation' ],
defaultNS: 'translation',
fallbackLng: [ 'en' ],
fallbackNS: false,
whitelist: false,
nonExplicitWhitelist: false,
load: 'languageOnly',
preload: false,
simplifyPluralSuffix: true,
keySeparator: '.',
nsSeparator: ':',
pluralSeparator: '_',
contextSeparator: '_',
partialBundledLanguages: false,
saveMissing: false,
updateMissing: false,
saveMissingTo: 'fallback',
saveMissingPlurals: true,
missingKeyHandler: false,
missingInterpolationHandler: false,
postProcess: false,
returnNull: true,
returnEmptyString: true,
returnObjects: false,
joinArrays: false,
returnedObjectHandler: [Function: returnedObjectHandler],
parseMissingKeyHandler: false,
appendNamespaceToMissingKey: false,
appendNamespaceToCIMode: false,
overloadTranslationOptionHandler: [Function: handle],
interpolation: { escapeValue: false },
resources: { en: { translation: [Object] }, fr: { translation: [Object] } },
react: { wait: true, nsMode: 'default' }
}
ion: returnedObjectHandler],
parseMissingKeyHandler: false,
appendNamespaceToMissingKey: false,
appendNamespaceToCIMode: false,
overloadTranslationOptionHandler: [Function: handle],
interpolation: { escapeValue: false },
resources: { en: { translation: [Object] }, fr: { translation: [Object] } },
react: { wait: true, nsMode: 'default' }
[============== ] 11.817 s 50/98 51% Building static HTML for pages
success Building static HTML for pages - 12.124s - 98/98 8.08/s
success onPostBuild - 0.381s
info Done building in 103.31746359 sec

Edit:
This installation solved my issue :)
npm install #hot-loader/react-dom

Related

Can't resolve module clarifai-nodejs-grpc in React JS

Error
Module not found
Can't resolve 'clarifai-nodejs-grpc' node module grps-js and proto-loader
I tried config-overrides.js with react-app-rewired:
module.exports = function override(config, env) {
console.log("override");
let loaders = config.resolve;
loaders.fallback = {
fs: false,
tls: false,
net: false,
http: require.resolve("stream-http"),
https: false,
zlib: require.resolve("browserify-zlib"),
path: require.resolve("path-browserify"),
stream: require.resolve("stream-browserify"),
url: false,
util: false,
http2: false,
os: false,
dns: false,
assert: false,
buffer: false,
};
config.ignoreWarnings = \\\[/Failed to parse source map/\\\];
return config;
};
What can be wrong with this? Why clarifai-nodejs-grpc is invisible?
If using ReactJS with the Clarifai API, it's recommended you consume it via the JavaScript HTTP channel. You can check the JavaScript samples on their docs platform. The Node gRPC client is recommended for Node.js projects.

next-i18next: update changes without restarting server on dev and production both

I'm using Next.js and with the following config.
module.exports = {
debug: true,
backend: {
backends: [HttpBackend],
backendOptions: [
// { expirationTime: 60 * 60 * 1000 },
{
loadPath: `${url}/locales/{{lng}}/{{ns}}.json`,
crossDomain: true,
requestOptions: {
mode: 'no-cors',
cache: 'no-store',
},
expirationTime: 60 * 1000,
},
],
},
serializeConfig: false,
use: [ChainedBackend],
i18n: {
defaultNS: 'common',
defaultLocale: 'en',
locales: ['en'],
ns: ['common'],
},
};
Whenever I push update to the api. It should reflect those changes in Nextjs. Right now I need to restart server everytime I update the namespace config
Try to set reloadOnPrerender to true: https://github.com/i18next/next-i18next/blob/a2308cf194218f572745322186ddfd6eb541f5ec/examples/simple/next-i18next.config.js#L7
You can also try to set the revalidate option in getStaticProps https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration
You could use i18next.init() and pass in the config inside your app.jsx or _app.jsx it should work as you expect it to.

i18next get 404 response when there is no translation file

I'm using i18next-http-backend to get translations.
Translation files:
en.json
pt.json
pt-BR.json
This is my config:
.init({
fallbackLng: 'en',
supportedLngs: ['en', 'pt', 'pt-BR'],
nonExplicitSupportedLngs: true,
backend: {
backends: [
LocalStorageBackend, // primary
HttpBackend, // fallback
],
backendOptions: [
{
prefix: 'i18next_res_',
defaultVersion: version,
},
{
loadPath: '${some-path}/{{ns}}/{{lng}}.json',
addPath: '${some-path}/{{ns}}/{{lng}}',
queryStringParams: { v: version },
},
],
},
})
If the browser language is English (United States) en-US I get the 404 Not Found error and then en is loaded.
When I add load: 'languageOnly' to the config, there is no 404, but in this case it is not possible to load pt-BR languege. Instead pt is loaded.
I looked through the documentation, but did not find an option to fix this behavior.
comment of the "i18next" library developer:
"so if there is no en-US, but there is en and you're using load: 'all' or no load option, the en resources will be loaded. But before this, i18next tries to fetch en-US and if there are no en-US resources you'll see a 404...
If you do not like to "see" those 404 requests, you need to list all languages in the supportedLngs option and not set nonExplicitSupportedLngs: true
Said in other words: if you use nonExplicitSupportedLngs: true you can't prevent all 404"

Webpack Dev Server with react & SSR

I'm trying to build a dev server with webpack-dev-server using our own SSR architecture. This means our bundle compiles the react, and the server uses React.RenderToStaticMarkup to generate the HTML string. This is my webpack-dev-server config:
{
port: 5001,
open: true,
static: `${config.distDir}`,
client: {
overlay: {
warnings: true,
errors: true,
},
progress: true,
},
devMiddleware: {
writeToDisk: true,
},
Both the overlay and the progress properties don't seem to work at all, I do get compilation errors in the terminal, but nothing in the browser.
Since I'm doing dynamic SSR, this means the bundle generates a JS file and the server uses React.renderToStaticMarkup for generating the html string.
Can this setup even work with the dev server? What do I need to do to have the overlay and progress show in the browser?

JMS\Serializer\Exception\RuntimeException: Resources are not supported in serialized data. Path: Monolog\Handler\StreamHandler -> etc

I'm working with Symfony 4 and i have installed JMS serializer with FOSRest bundle.
So every time i've got an error i've got this message :
JMS\Serializer\Exception\RuntimeException: Resources are not supported in serialized data. Path: Monolog\Handler\StreamHandler -> Symfony\Bridge\Monolog\Logger -> Symfony\Component\Cache\Adapter\PhpFilesAdapter -> Symfony\Component\Cache\Adapter\TraceableAdapter -> Symfony\Component\Cache\Adapter\PhpArrayAdapter -> Symfony\Component\Cache\DoctrineProvider -> Doctrine\Common\Annotations\CachedReader -> Sensio\Bundle\FrameworkExtraBundle\EventListener\ControllerListener -> Symfony\Component\EventDispatcher\EventDispatcher -> Symfony\Component\HttpKernel\Debug\TraceableEventDispatcher -> ContainerYCXy4ht\srcTestDebugProjectContainer -> FOS\RestBundle\Request\ParamFetcher -> Symfony\Component\HttpFoundation\ParameterBag -> Symfony\Component\HttpFoundation\Request -> Symfony\Component\HttpKernel\Exception\HttpException
And after the real error and i dont understand why ? I use JMS contrib recipe :
/packages/dev/jms_serializer.yaml
jms_serializer:
visitors:
json:
options:
- JSON_PRETTY_PRINT
- JSON_UNESCAPED_SLASHES
- JSON_PRESERVE_ZERO_FRACTION
/packages/prod/jms_serializer.yaml
jms_serializer:
visitors:
json:
options:
- JSON_UNESCAPED_SLASHES
- JSON_PRESERVE_ZERO_FRACTION
/packages/jms_serializer
jms_serializer:
visitors:
xml:
format_output: '%kernel.debug%'
So i don't understand why this behavior ?
If someone could help me ?
Thanks by advance
I found the solution it was an fos_rest configuration error
Before
fos_rest:
exception:
enabled: true
exception_controller: 'fos_rest.exception.controller:showAction'
param_fetcher_listener: force
body_listener: true
format_listener:
enabled: true
rules:
- { path: '^/api', priorities: ['json'], prefer_extension: true}
- { path: '^/', priorities: [ 'html', '*/*'], fallback_format: html, prefer_extension: true }
view:
view_response_listener: 'force'
After
fos_rest:
param_fetcher_listener: force
format_listener:
enabled: true
rules:
- { path: '^/api', priorities: ['json'], prefer_extension: true}
- { path: '^/', priorities: [ 'html', '*/*'], fallback_format: html, prefer_extension: true }
view:
view_response_listener: 'force'

Resources