Why does #chakra-ui/gatsby-plugin crashes gatsby? - javascript

Trying to apply ChakraUI to my gatsby project.
I've installed all the necessary packages
"#chakra-ui/gatsby-plugin": "^1.0.1"
"#chakra-ui/react": "^1.1.3"
"#emotion/react": "^11.1.4"
"#emotion/styled": "^11.0.0"
"framer-motion": "^3.2.0"
then added the plugin to gatsby-config.js
...
{
resolve: '#chakra-ui/gatsby-plugin',
options: {
isResettingCSS: true,
isUsingColorMode: true,
},
},
...
but after I run `yarn develop, the output is:
> yarn develop
yarn run v1.22.10
$ gatsby develop
success open and validate gatsby-configs - 0.045s
success load plugins - 0.693s
success onPreInit - 0.039s
success initialize cache - 0.018s
success copy gatsby files - 0.093s
success onPreBootstrap - 0.022s
success createSchemaCustomization - 0.010s
success Checking for changed pages - 0.001s
success source and transform nodes - 0.068s
success building schema - 0.234s
info Total nodes: 31, SitePage nodes: 1 (use --verbose for breakdown)
success createPages - 0.004s
success Checking for changed pages - 0.001s
success createPagesStatefully - 0.123s
success update schema - 0.031s
success write out redirect data - 0.002s
success Build manifest and related icons - 0.126s
success onPostBootstrap - 0.139s
info bootstrap finished - 5.753s
success onPreExtractQueries - 0.003s
success extract queries from components - 0.207s
success write out requires - 0.010s
success run page queries - 0.029s - 3/3 104.13/s
ERROR
There was an error compiling the html.js component for the development server.
See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html TypeError: Object(...) is not a
function
27 | };
28 |
> 29 | return transform ? compose(transform, rtlTransform) : rtlTransform;
| ^
30 | }
31 |
32 | export function logical(opts) {
WebpackError: TypeError: Object(...) is not a function
- logical-prop.js:29
node_modules/#chakra-ui/styled-system/dist/esm/utils/logical-prop.js:29:29
- logical-prop.js:41
node_modules/#chakra-ui/styled-system/dist/esm/utils/logical-prop.js:41:1
- position.js:20
node_modules/#chakra-ui/styled-system/dist/esm/config/position.js:20:22
- index.js:1
node_modules/#chakra-ui/styled-system/dist/esm/config/index.js:1:1
- index.js:1
node_modules/#chakra-ui/styled-system/dist/esm/index.js:1:1
- index.js:1
node_modules/#chakra-ui/system/dist/esm/index.js:1:1
- chakra-provider.js:1
node_modules/#chakra-ui/react/dist/esm/chakra-provider.js:1:1
- index.js:1
node_modules/#chakra-ui/react/dist/esm/index.js:1:1
- gatsby-ssr.js:1
node_modules/#chakra-ui/gatsby-plugin/gatsby-ssr.js:1:1
not finished Building development bundle - 5.148s
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Do you have any ideas what to do? I don't even use custom html.js.

Watch out, #chakra-ui/gatsby-plugin is not the same as gatsby-plugin-chakra-ui. Follow this example: https://www.gatsbyjs.com/plugins/gatsby-plugin-chakra-ui/
You'll need to install these packages:
yarn add gatsby-plugin-chakra-ui #chakra-ui/core #emotion/core #emotion/styled emotion-theming
In your gatsby-config.js:
module.exports = {
plugins: ["gatsby-plugin-chakra-ui"],
};
Once installed, use it as you wish. For example:
import React from "react";
import { Box, Text } from "#chakra-ui/core";
function IndexPage() {
return (
<Box p={8}>
<Text fontSize="xl">Hello World</Text>
</Box>
);
}
export default IndexPage;
Update: the recent documentation suggests following https://chakra-ui.com/docs/getting-started#gatsby rather than the deprecated package (due to migration). For those who might be struggling with the same issue, check the dependency deprecation.

As pointed out by #jamie-bradley it is discouraged to use gatsby-plugin-chakra-ui as suggested in the accepted answer.
The current version of #chakra-ui/gatsby-plugin still causes issues but downgrading to version 2.0.4 works (tested with Gatsby v4 and v5):
"#chakra-ui/gatsby-plugin": "^2.0.4",
Alongside this version you can use the newest versions of #chakra-ui/react and #chakra-ui/icons:
"#chakra-ui/icons": "^2.0.14",
"#chakra-ui/react": "^2.4.4",
The following warning will show when you run gatsby develop but you can ignore it:
warn Plugin #chakra-ui/gatsby-plugin is not compatible with your gatsby version 5.3.3 - It requires gatsby#^2.29.3 || ^3.0.0 || ^4.0.0

Related

Invalid configuration object: webpack-cli configuration.optimization.splitChunks Webpacker 5 Rails 6

After upgrading from Webpacker 4 to 5, I receive a new error while running rails webpacker:compile. Running yarn dev, alone; works without issue -- I can't seem to find what the cause of this bug is, or what file its located in. There's aren't many debugging tools in this case. How do I fix the problem where splitChunks is failing for webpacker 5?
Error:
➜ rails webpacker:compile
warning: parser/current is loading parser/ruby27, which recognizes
warning: 2.7.3-compliant syntax, but you are running 2.7.4.
warning: please see https://github.com/whitequark/parser#compatibility-with-ruby-mri.
I, [2022-01-04T14:59:51.4223 #20612] INFO -- : initializing Lit
Compiling...
Compilation failed:
[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
- configuration.optimization.splitChunks should be one of these:
false | object { automaticNameDelimiter?, cacheGroups?, chunks?, defaultSizeTypes?, enforceSizeThreshold?, fallbackCacheGroup?, filename?, hidePathInfo?, maxAsyncRequests?, maxAsyncSize?, maxInitialRequests?, maxInitialSize?, maxSize?, minChunks?, minRemainingSize?, minSize?, minSizeReduction?, name?, usedExports? }
-> Optimize duplication and caching by splitting chunks by shared modules and cache group.
Details:
* configuration.optimization.splitChunks.name should be one of these:
false | string | function
-> Give chunks created a name (chunks with equal name are merged).
Details:
* configuration.optimization.splitChunks.name should be false.
* configuration.optimization.splitChunks.name should be a string.
* configuration.optimization.splitChunks.name should be an instance of function.
I don't what's your configurations, but the problem is in your configuration.optimization.splitChunks.name being something other then either false , string or instance of function

React Native - Emulator - Hermes library crash - couldn't find DSO to load: libhermes.so

After successfully installing the app, when trying to lauch it on the emulator, the following crash occurs. Details below:
2020-07-13 14:50:17.365 3375-3722/com.Myapp E/AndroidRuntime: FATAL EXCEPTION: create_react_context
Process: com.Myapp, PID: 3375
java.lang.UnsatisfiedLinkError: couldn't find DSO to load: libhermes.so
at com.facebook.soloader.SoLoader.doLoadLibraryBySoName(SoLoader.java:789)
at com.facebook.soloader.SoLoader.loadLibraryBySoName(SoLoader.java:639)
at com.facebook.soloader.SoLoader.loadLibrary(SoLoader.java:577)
at com.facebook.soloader.SoLoader.loadLibrary(SoLoader.java:525)
at com.facebook.hermes.reactexecutor.HermesExecutor.<clinit>(HermesExecutor.java:20)
at com.facebook.hermes.reactexecutor.HermesExecutorFactory.create(HermesExecutorFactory.java:29)
at com.facebook.react.ReactInstanceManager$5.run(ReactInstanceManager.java:997)
at java.lang.Thread.run(Thread.java:923)
Add to android/app/build.gradle
configurations.all {
resolutionStrategy {
force "com.facebook.soloader:soloader:0.8.0"
}
}
and make sure that enableHermes: false

Error building schema with gatsby-source-filesystem config (following official tutorial)

I'm learning Gatsby by following the tutorial on https://www.gatsbyjs.org/tutorial/part-five/#source-plugins, but got stuck trying to configure the gatsby-source-filesystem in gatsby-config.js.
I'm just using the simple gatsby config file as in the tuto:
module.exports = {
siteMetadata: {
title: `Pandas Eating Lots`,
},
plugins: [
{
resolve: `gatsby-source-filesystem`,
options: {
name: `src`,
path: `${__dirname}/src/`,
},
},
`gatsby-plugin-emotion`,
{
resolve: `gatsby-plugin-typography`,
options: {
pathToConfigModule: `src/utils/typography`,
},
},
],
}
And I get the following error when I start the dev server:
$ gatsby develop
success open and validate gatsby-configs - 0.036s
success load plugins - 0.199s
success onPreInit - 0.010s
success initialize cache - 0.025s
success copy gatsby files - 0.052s
success onPreBootstrap - 0.013s
success createSchemaCustomization - 0.002s
success source and transform nodes - 0.091s
⠋ building schema
ERROR
UNHANDLED REJECTION File.publicURL provided incorrect OutputType: 'String'
Error: File.publicURL provided incorrect OutputType: 'String'
- TypeMapper.js:294 TypeMapper.convertOutputFieldConfig
[tutorial-part-four]/[graphql-compose]/lib/TypeMapper.js:294:15
- configAsThunk.js:19 resolveOutputConfigAsThunk
[tutorial-part-four]/[graphql-compose]/lib/utils/configAsThunk.js:19:41
- ObjectTypeComposer.js:300 ObjectTypeComposer.getFieldConfig
[tutorial-part-four]/[graphql-compose]/lib/ObjectTypeComposer.js:300:58
- toInputObjectType.js:44 fieldNames.forEach.fieldName
[tutorial-part-four]/[graphql-compose]/lib/utils/toInputObjectType.js:44:19
- Array.forEach
- toInputObjectType.js:38 toInputObjectType
[tutorial-part-four]/[graphql-compose]/lib/utils/toInputObjectType.js:38:14
- ObjectTypeComposer.js:600 ObjectTypeComposer.getInputTypeComposer
[tutorial-part-four]/[graphql-compose]/lib/ObjectTypeComposer.js:600:84
- sort.js:54 getSortInput
[tutorial-part-four]/[gatsby]/dist/schema/types/sort.js:54:42
- schema.js:1104 addTypeToRootQuery
[tutorial-part-four]/[gatsby]/dist/schema/schema.js:1104:23
- schema.js:270 processTypeComposer
[tutorial-part-four]/[gatsby]/dist/schema/schema.js:270:13
⠋ building schema
$
I'm using Node version 10.16.3
I tried to search but didn't find useful information about this specific error.
Can anyone help please? Many thanks!
Updating gatsby-source-filesystem might fix the issue for you.
https://github.com/gatsbyjs/gatsby/issues/20718#issuecomment-787009213

Fastify plugin fastify-autoload error plugin must be a function

I have setup the fastify framework with fastify-cli library with command fastify-cli generate. It has fastify-autoload plugin used out of the box.
But, it will throw an error when I add my own service with exception for model.js and schema.js files.
...
fastify.register(AutoLoad, {
dir: path.join(__dirname, 'services'),
options: Object.assign({}, opts),
ignorePattern: /.*(model|schema)\.js/
})
...
Error message:
assert.js:788
throw newErr;
^
AssertionError [ERR_ASSERTION]: ifError got unwanted exception: plugin must be a function
at wrap (D:\project\kuisioner\backend\node_modules\fastify-cli\start.js:124:5)
...
actual: Error: plugin must be a function
...
error Command failed with exit code 1.
...
But it will run smoothly when I register it manually
...
fastify.register(require('./services/quiz/get'))
fastify.register(require('./services/quiz/post'))
...
My file structure:
- src
- plugins
- db.js
- services
| - quiz
| - get.js
| - model.js
| - post.js
| - schema.js
- app.js
I use fastify-cli fastify start -l info src/app.js to run my code
Here's my repo https://github.com/nnfans/kuisionerid_backend
Checking your repo the error is the dir value. You must point to the dir with the files, it is not supported the recursive loading yet
fastify.register(AutoLoad, {
dir: path.join(__dirname, 'services/quiz'),
options: Object.assign({}, opts),
ignorePattern: /.*(model|schema)\.js/
})
With this change, the npm start will work.
Another option is to use module.exports.autoload = false in the files that need to be skipped, but your regex is ok.
if you got here and you use typescript, maybe try to delete the dist dir and re-run tsc, you might have had a bad route that persisted there

Karate: passing dynamic parameter values via the command line not working

I am trying to pass a URL from the command line when I run karate integration tests on the command line. I took a look at this and tried to do the same thing but so far no luck.
I have this karate-config.js file
function karateconf() {
karate.configure('connectTimeout', 5000);
karate.configure('readTimeout', 5000);
var config = { baseURL: 'http://localhost:8080' };
if (karate.env == 'ci') {
config.baseURL = karate.properties['base.URL'];
karate.log('*******************************', karate.properties['base.URL']);
}
return config;
}
And I run the test using gradle like this
./gradlew integrationTest -Dkarate.env=ci -Dbase.URL=http://someurl:8080
And here is the karate logs
14:12:54.599 [pool-1-thread-1] INFO com.intuit.karate - ******************************* null
14:12:54.827 [pool-1-thread-1] ERROR com.intuit.karate - url not set, please refer to the keyword documentation for 'url'
14:12:54.827 [pool-1-thread-1] ERROR com.intuit.karate - http request failed: url not set, please refer to the keyword documentation for 'url'
14:12:54.836 [pool-1-thread-1] INFO c.i.karate.cucumber.CucumberRunner - <<<< feature 1 of 1 on thread pool-1-thread-1: com/guidewire/lifecycle/controller/configuration-controller.feature
14:12:55.359 [Test worker] INFO n.m.cucumber.ReportParser - File '/workspace/configuration-service/configuration-infrastructure/app-backend/lifecycle/target/surefire-reports/TEST-com.guidewire.lifecycle.controller.configuration-controller.json' contain 1 features
I could not figure out what I am missing here.
Gradle ? This is covered in the documentation: https://github.com/intuit/karate#command-line - and looks like you need to add base.URL to your gradle build file the same way as below:
For gradle you must extend the test task to allow the cucumber.options
to be passed to the Cucumber-JVM (otherwise they get consumed by
gradle itself). To do that, add the following:
test {
// pull cucumber options into the cucumber jvm
systemProperty "cucumber.options", System.properties.getProperty("cucumber.options")
// pull karate options into the jvm
systemProperty "karate.env", System.properties.getProperty("karate.env")
// ensure tests are always run
outputs.upToDateWhen { false }
}

Categories