Question
Hey, guys. I'm trying to document my React-Native project using Docz. Thing is my project is using Native-Base.
Description
When I try to build, I keep getting this error:
./node_modules/native-base-shoutem-theme/src/StyleProvider.js 10:19
Module parse failed: Unexpected token (10:19)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| */
| export default class StyleProvider extends React.Component {
> static propTypes = {
| children: PropTypes.element.isRequired,
| style: PropTypes.object,
This is my doczrc.js file:
import { reactNative } from 'docz-plugin-react-native';
export default {
title: 'Recarga Styleguide',
plugins: [reactNative()],
native: true,
src: './app/components/ui/' // <== where the components are located inside the project
};
I've been researching and it seems to be quite a common error with Native-Base.
I found this solution in stackoverflow:
[Expo for Web failed to compile because of native base module for Web failed to compile because of native base module)
I suspect this solution might work for me, thing is: I don't think my project is using expo. I think I would like to try some setting on my babel.config or metro.config file, but I'm not sure how it would work.
Could you help me?
Thanks!
When I checked the library you used, I realized that it was Docs Deprecated
I recommend using this library THIS as the library itself recommends
Related
I have a vue project which uses Vite in place of Webpack, and when I try to use import x from './src/assets/my/path/to/image.png' to resolve an image to compile-time URL, I am greeted by the following error message:
✘ [ERROR] No loader is configured for ".png" files: src/assets/my/path/to/image.png
The entire project is pretty close to the scaffold project given by npm init vue#latest (using vue3) so my vite.config.js is pretty basic:
export default defineConfig({
plugins: [vue(), VitePWA({})],
resolve: {
alias: {
"#": fileURLToPath(new URL("./src", import.meta.url)),
},
},
build: {
manifest: true,
polyfillModulePreload: true,
}
});
What am I missing? How can I configure this? I can't find anything in Vite documentation about loaders.
I had a quite similar issue with my project that I couldn't really solve. The issue seemed that only initially loaded png files were added. Because I am new to Vite, my efforts with the vite.config.js were fruitless.
Instead, I found a different solution to import the assets (import img from '/path/to/img.png' ) in respective js files directly instead of vite.config.js. Since I used these assets for replacement images for toggling buttons, it was a quick fix. Maybe it helps you, too.
So I inherited an old (Vue 2) app that uses Styleguidist for creating style guide and documenting components...
It was running extra slow so my first task was to upgrade to using vite instead of webpack. Almost there... fixed almost all the issue, the one is outstanding though... this app uses this format of *.vue components
<template>...</template>
<script>...</script>
<style>...</style>
<docs>
Example of usage
```jsx
<MyComponent>...</MyComponent>
</docs>
where content inside is markdown, so one can write nicer documentation with code example
Now, vite is complaining that I am trying to use jsx (where I am not)...
this is the error
3:36:36 PM [vite] Internal server error: Failed to parse source for
import analysis because the content contains invalid JS syntax. If you
are using JSX, make sure to name the file with the .jsx or .tsx
extension. Plugin: vite:import-analysis
So what am I to do? How do I tell VITE to ignore that part?
The solution, as posted here, is to create a small Vite plugin that ignores the <docs> blocks.
Add this to vite.config.js:
const vueDocsPlugin = {
name: 'vue-docs',
transform(code, id) {
if (!/vue&type=docs/.test(id))
return;
return `export default ''`;
}
};
Then add the plugin to the plugins array:
export default defineConfig({
plugins: [
// vue() will be here...
vueDocsPlugin,
],
});
I'm having some issues with the Notify plugin from Quasar. I have already defined the plugin in quasar.config.js and made the necessary imports according to the Quasar documentation. However, I am still facing the error of $q.notify being undefined in the .mdx story file. In Quasar V1, the error was not generated and the code works fine. Thanks in advance!
For anyone interested, I solved it by adding the following in the storybook preview.js file:
app.use(Quasar, {
plugins: {
Notify,
},
config: {
notify:{},
},
}
I'm trying to get a preact library to work with expo/react-native
It works find on web using this alias in webpack:
// webpack.config.js
const createExpoWebpackConfigAsync = require('#expo/webpack-config');
module.exports = async function(env, argv) {
const config = await createExpoWebpackConfigAsync(env, argv);
config.resolve.alias = {
...config.resolve.alias,
'preact': 'react'
}
return config;
};
But on android I get an error: Unable to resolve "preact" from "node_modules/.../....
Does anyone know how to get the same kind of alias working outside of web?
I was unable to find a solution where webpack's alias was usable outside of Web on Android. I needed it on account of the typical invalid Hook call caused by duplicate React modules being used.
Supposedly Yarn workspaces might fix this as well but I couldn't get that working.
The solution I found and was mildly painless was to update my local libraries' devDependencies so they all use the same React module being used in the main project's dependencies.
- app
|
|-- package.json dependency: "react":"18.1.0"
- local_library
|
|-- package.json devDependency:
"react": "file:../../../node_modules/react",
I am new in React Native. Right now, I am studying Props and State. I wanted to try the FlatList Component in this doc https://facebook.github.io/react-native/docs/flatlist. However, I am getting this error.
You're using typed JavaScript known as Type script.
If you want to use TypeScript (I highly encourage it, then you can do so by following below tutorial):
Migrating to TypeScript:
https://facebook.github.io/react-native/blog/2018/05/07/using-typescript-with-react-native
To just get rid of the error!
state = {selected : (new Map())};
TypeScript Migration Continued...
Adding TypeScript
The next step is to add TypeScript to your project. The following commands will:
add TypeScript to your project
add React Native TypeScript Transformer to your project
initialize an empty TypeScript config file, which we'll configure next
add an empty React Native TypeScript Transformer config file, which we'll - configure next
adds typings for React and React Native
Okay, let's go ahead and run these.
yarn add --dev typescript
yarn add --dev react-native-typescript-transformer
yarn tsc --init --pretty --jsx react
touch rn-cli.config.js
yarn add --dev #types/react #types/react-native
The tsconfig.json file contains all the settings for the TypeScript compiler. The defaults created by the command above are mostly fine, but open the file and uncomment the following line:
{
/* Search the config file for the following line and uncomment it. */
// "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
}
The rn-cli.config.js contains the settings for the React Native TypeScript Transformer. Open it and add the following:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
},
getSourceExts() {
return ['ts', 'tsx'];
},
};
Migrating to TypeScript
Rename the generated App.js and __tests_/App.js files to App.tsx. index.js needs to use the .js extension. All new files should use the .tsx extension (or .ts if the file doesn't contain any JSX).
If you tried to run the app now, you'd get an error like object prototype may only be an object or null. This is caused by a failure to import the default export from React as well as a named export on the same line. Open App.tsx and modify the import at the top of the file:
-import React, { Component } from 'react';
+import React from 'react'
+import { Component } from 'react';
Some of this has to do with differences in how Babel and TypeScript interoperate with CommonJS modules. In the future, the two will stabilize on the same behaviour.
At this point, you should be able to run the React Native app.