I am getting the error reported on this issue: https://github.com/gatsbyjs/gatsby/issues/25920
But the people from Gatsby seems to be too busy to answer so maybe someone else here knows about this problem.
Have in mind that I am not using the StaticQuery component at all on my code.
I am getting this exact same issue.
I noticed some other devs before having it: https://github.com/gatsbyjs/gatsby/issues/6350
I saw that some devs recommend removing the export from the query variable, so this:
const query = graphql`...`
Instead of this:
export const query = graphql`...`
But this is not my case. Everything was working good until some hours ago.
I have all of my pages with queries like this:
// this is my component
const CollectionProduct = ({ data }) => {...}
// and outside the component is the query
export const query = graphql`
query($handle: String!) {
shopifyCollection(handle: { eq: $handle }) {
products {
id
title
handle
createdAt
}
}
}
}
`
In that component I am using export on const query, all of my pages are defined the same way and before there were no problems. I already upgrade and downgrade the version of Gatsby and yet the same issue.
My issues comes exactly after I added a .eslintrc.js config file to the project; is this an option that my project build fails on the live site due to ESLint?
Locally it works, I can build the project and see it on my localhost with no problems. But when I see the live site, it throws that Loading(StaticQuery) white screen. And I am not even using StaticQuery component anywhere. Only the useStaticQuery hook on non page nor templates components.
This is my ESLint config:
module.exports = {
globals: {
__PATH_PREFIX__: true,
},
'parser': 'babel-eslint',
parserOptions: {
extraFileExtensions: ['.js'],
sourceType: 'module',
ecmaFeatures: {
jsx: true,
},
useJSXTextNode: true,
include: ['**/*js'],
},
env: {
es6: true,
node: true,
jest: true,
browser: true,
commonjs: true,
serviceworker: true,
},
extends: ['eslint:recommended', 'plugin:react/recommended', 'semistandard', 'plugin:import/react'],
plugins: ['react'],
rules: {
semi: 'off',
'strict': 0,
curly: [1, 'all'],
'no-console': 'error',
"react/prop-types": 0,
camelcase: ['off', {}],
'react/jsx-uses-vars': 1,
'react/jsx-uses-react': 1,
'react/jsx-boolean-value': 2,
"react/display-name": 'warn',
'react/react-in-jsx-scope': 1,
'brace-style': ['error', '1tbs'],
'comma-dangle': ['error', 'never'],
'linebreak-style': ['error', 'unix'],
'react-hooks/exhaustive-deps': 'off',
'standard/no-callback-literal': [0, []],
'padding-line-between-statements': [
'error',
{ blankLine: 'always', prev: '*', next: 'return' },
{ blankLine: 'always', prev: '*', next: 'multiline-const' },
{ blankLine: 'always', prev: 'multiline-const', next: '*' },
{ blankLine: 'always', prev: '*', next: 'block-like' },
{ blankLine: 'always', prev: 'block-like', next: '*' },
],
'react/jsx-curly-brace-presence': [
'error',
{ props: 'never', children: 'never' },
],
},
};
Any ideas?
Delete cache storage from the browser and reload the page. Or Hard Reload the page and see, This resolved the issue for me.
I had a similar issue which happened all of a sudden. Someone on https://github.com/gatsbyjs/gatsby/issues/24890 suggested to try to clean your project.
For me deleting both node_modules and yarn.lock to then regenerate them did the trick!
EDIT: This seems to have been fixed with gatsby 2.24.11
Updating the cli withnpm i -g gatsby-cli solved this problem for me
Related
In latest Node 16.8, file extensions are now mandatory in import (e.g. import { getFoo } from './api.js';). At the same time ESLint throws an error Unexpected use of file extension "js" for "./api.js".
This is my config file:
module.exports = {
env: {
node: true,
es2021: true,
},
extends: [
'airbnb-base',
],
parserOptions: {
ecmaVersion: 12,
},
rules: {
'no-console': 'off',
},
};
What's the best practice at the moment? Or at least the best walkaround?
If not, can I at least disable that rule?
I'm using "gatsby-plugin-sitemap": "^2.4.2" tho, it doesn't work after install "gatsby-plugin-intl": "^0.3.3" on Amplify even tho it works on Local env well.
This is the URL, but automatically it's moved to https://www.babylook.mom/.
https://www.babylook.mom/sitemap.xml
Below is the gatsby-config.js
{
resolve: `gatsby-plugin-sitemap`,
options: {
output: `/sitemap.xml`,
}
},
{
resolve: `gatsby-plugin-intl`,
options: {
path: `${__dirname}/src/intl`,
languages: [`en`, `es`, `zh`],
defaultLanguage: `en`,
redirect: false,
},
},
The plugin's order is important in Gatsby, try putting the gatsby-plugin-intl above since it's the one in charge of prefix all the URLs with the provided locales:
{
resolve: `gatsby-plugin-intl`,
options: {
path: `${__dirname}/src/intl`,
languages: [`en`, `es`, `zh`],
defaultLanguage: `en`,
redirect: false,
},
},
{
resolve: `gatsby-plugin-sitemap`,
options: {
output: `/sitemap.xml`,
}
},
In addition, you may want to explore all the query options that the gatsby-plugin-sitemap provides.
Recently I've moved a project from plain old JavaScript to TypeScript. Previously every test was running fine. Right after the change some test cases just broke and I can not understand why. I'm using Vue.js alongside vue-test-utils and jest.
jest.config.js
module.exports = {
collectCoverageFrom: [
'/src/**/*.{js,jsx,vue}',
'!**/node_modules/**',
'!**/vendor/**',
],
moduleFileExtensions: [
'ts',
'js',
'json',
'vue',
],
transform: {
'.*\\.(vue)$': 'vue-jest',
'^.+\\.js$': 'babel-jest',
'^.+\\.ts$': 'ts-jest',
},
transformIgnorePatterns: [
'<rootDir>/node_modules/(?!vuex-class-modules).+\\.js$',
],
moduleNameMapper: {
'^#/(.*)$': '<rootDir>/src/$1',
},
setupFilesAfterEnv: [
'#testing-library/jest-dom/extend-expect',
],
};
A snippet of an example test that's failing right now, which has been working fine previously.
some.test.js
function mountStore(loggedInState) {
const store = new Vuex.Store({
modules: {
customer: {
namespaced: true,
state: {
isLoggedIn: loggedInState,
},
actions,
},
},
});
return shallowMount(Component, {
localVue,
store,
router,
stubs: { 'router-link': RouterLinkStub },
});
}
describe('Test with customer logged in at beginning', () => {
let wrapper;
beforeEach(() => {
wrapper = mountStore(true);
});
it('should redirect to home if user is logged in on init', () => {
expect(wrapper.vm.$route.name).toBe('Home');
});
});
Regarding this specific test case, the result is as following.
expect(received).toBe(expected) // Object.is equality
Expected: "Home"
Received: null
I also noticed upgrading all dependencies (including some Jest dependencies) leads to even more failing tests. So I expect that to (probably) be the reason, since I just added TypeScript support later on. However, I don't know what dependency combination would lead to a faulty behavior.
Relevant dependencies I've updated, which eventually would lead to even more failing tests.
jest
ts-jest
babel-jest
Add
preset: 'ts-jest/presets/js-with-babel',
to jest.config.js since you use ts-jest with babel-jest. Source.
Did you try adding #types/jest? And adding it in your tsconfig.json:
"types": ["#types/node", "#nuxt/types", "#types/jest", "nuxt-i18n"]
I was having a similar issue. #winwiz1's answer worked for me, but I needed to put it inside the project definition as I'm using the projects syntax. I would just leave this as a comment on #winwiz1's answer, but StackOverflow mangles the format.
projects: [
{
"displayName": "test-unit",
"preset": "ts-jest",
"testMatch": ["<rootDir>/test-unit/**/*\\.tests\\.[t|j]s"]
}
],
I'm trying to write some visual tests and running into the mentioned error with the protractor-image-comparison of version 2.0.1. Even though there is an update of the library I decided to stick to the older version since I experience some issues with the newest one as well.
My setup is:
//protractor.conf.js:
const { SpecReporter } = require('jasmine-spec-reporter');
const { join } = require('path');
const { ProtractorImageComparison } = require('protractor-image-comparison');
exports.config = {
allScriptsTimeout: 11000,
specs: ['./src/**/*-spec.ts'],
capabilities: {
browserName: 'chrome',
chromeOptions: {
args: [
// '--headless',
'--disable-gpu', '--window-size=1600,950', '--no-sandbox'],
},
},
SELENIUM_PROMISE_MANAGER: false,
directConnect: true,
framework: 'jasmine2',
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 30000,
print: function() {
},
},
onPrepare() {
require('ts-node').register({
project: join(__dirname, './tsconfig.e2e.json'),
});
jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
browser.protractorImageComparison = new ProtractorImageComparison({
baselineFolder: join(__dirname, '/src/resources/baseline/'),
screenshotPath: join(__dirname, '/src/tmp/'),
formatImageName: '{tag}',
autoSaveBaseline: false
});
},
};
I came across this issue today and apparently from version 3.0.1 this package now functions as a plugin and not a class which needs to be instantiated.
I managed to get it working adding the following code to my conf.js:
plugins: [
{
inline: require('protractor-image-comparison'),
// package: 'protractor-image-comparison' //protractor is installed globally so it is checking for plugin globally also
options: {
baselineFolder: './testArtifacts/screen-compare/baselines/',
screenshotPath: './testArtifacts/screen-compare/screenshots/',
formatImageName: `{tag}-{logName}-{width}x{height}`,
savePerInstance: true,
},
},
],
Note: For me protractor was installed globally so I needed this workaround using inline instead of package to get it searching for the plugin module locally.
I am using react-loadable for react-router-v4and I want to do server side rendering.
Of course on server side I need not lazy loading, so I started to use react-loadable, because it says that it is possible to use with server with help of import-inspector babel plugin.
But unfortunately I got error in my server console require.ensure is not a function, which caused rerendering on my client side and I am losing all benefits of server-side rendering.
Before I had been using react-router-v3 and used getComponent with import without any problem.
Here is my routes config.
export default [
{
component: Root,
routes: [
{
path: '/',
component: Loadable({
loader: () => import('./Parent.jsx'),
loading: () => <div>Loading...</div>
}),
routes: [
{
path: '/',
exact: true,
component: Loadable({
loader: () => import('./Child.jsx'),
loading: () => <div>Loading...</div>
})
}
]
}
]
}
];
This is my .babelrc
{
presets : [["es2015", {modules: false}], "react", "stage-2", "stage-3"],
plugins: [
"transform-runtime",
"syntax-async-functions",
"dynamic-import-webpack"
],
env: {
node: {
plugins: [
["import-inspector", {
"serverSideRequirePath": true,
"webpackRequireWeakId": true,
}],
["babel-plugin-webpack-alias", {
"config": "webpack/server.js",
"findConfig": true
}]
]
}
}
}
On client it works perfectly, only error is markup checksum diffing error.
How is this supposed to work?
Thanks in advance!
Try add this to babel or babel loader
"dynamic-import-node",
That is from airbnb