I want to use react-native-dotenv but its not working.
https://github.com/zetachang/react-native-dotenv
I created a .env file and added a FB_ID=21221
then I go to babel and edited like this:
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo', 'react-native-dotenv'],
plugins: ['react-native-reanimated/plugin'],
};
};
I restarted it and want to access FB_ID but its not exists
react-native-dotenv maintainer. This is an old version of the documentation. The new documentation is on npm. This library is now a plugin not a preset. try plugins: ['react-native-reanimated/plugin', 'module:react-native-dotenv']. Also, the api.cache(true) doesn't help. Try api.cache(false) instead.
Related
node_modules/react-native/Libraries/LogBox/Data/parseLogBoxLog.js:
/Users/rakshithkumars/Number-Guessing/node_modules/react-native/Libraries/LogBox/Data/parseLogBoxLog.js:
.useUnicodeFlag is not a valid regexpu-core option.
I fixed it in this way:
Run:
yarn add #babel/plugin-proposal-unicode-property-regex --dev
or
npm install --save-dev #babel/plugin-proposal-unicode-property-regex
Then open you babel.config.js file, which may be something like this:
module.exports = function (api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
};
};
And add this line:
plugins: ['#babel/plugin-proposal-unicode-property-regex'],
It should end up something like this:
module.exports = function (api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: ['#babel/plugin-proposal-unicode-property-regex'],
};
};
Note:
This shouldn't change anything, but, before trying this change, I migrated from Node 14 to Node 16. Should not affect, but... Mentioning it just in case.
Note 2:
It was not necessary to run expo r -c in my case.
Experienced the same issue and fixed it by adding the following plugin to babel.config.js:
#babel/plugin-proposal-unicode-property-regex
Then ran expo r -c to clear the cache
I believed the npm run serve command use the sourcemap by default for the js, but it seems not because I always see vue.runtime.esm.js:619.
I made a vue.config.js file at the root level project.
I try two things:
module.exports = {
configureWebpack: config => {
config.devtool = 'source-map'
}
}
and:
module.exports = {
configureWebpack: {
devtool: 'source-map'
}
}
None of them works. I still stuck with vue.runtime.esm.js:619 which is useless.
Does anyone know how really activate the source-map with vue-cli 4?
Using the generated vue.config.js from vue-cli v4 (generating a vue 3 project) It provided me this file:
// vue.config.js
const { defineConfig } = require('#vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
})
I then modified it to this:
// vue.config.js
const { defineConfig } = require('#vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
configureWebpack: {
devtool: 'source-map',
}
})
Which works enough for me to enable VSCode debugging in Chrome/Electron.
*Edit
The error you are getting may be unrelated to source-maps and related to warnings from vue itself.
For example
runtime-core.esm-bundler.js:6584
[Vue warn]: Failed to resolve component: AMadeUpComponentName
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
at <MyView onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > >
at <RouterView>
at <App>
Unfortunately this is a limitation of vue. However, improvements have been made between VueJS v2 and v3. Finally, I couldn't find an original source, but I read that improving the warning messages to track down the cause of warnings and errors is a high priority feature.
* Edit 10/12/2022
I had an older project that this answer didn't solve at all. After a yarn upgrade and #vue/cli upgrading, this configuration began working again!
You are looking for the ProjectOptions chainWebpack property.
chainWebpack?: (config: ChainableWebpackConfig) => void;
Try the following in your vue.config.js file:
/** #type import('#vue/cli-service').ProjectOptions */
module.exports = {
// https://github.com/neutrinojs/webpack-chain/tree/v4#getting-started
chainWebpack(config) {
config.devtool('source-map')
},
}
stream cannot be used with expo, as it is a Node.js standard package. However, the package stream-browserify can be used as an alternative in those scenarios.
In order to make modules resolve this instead of the native Node package, I am trying to make babel-plugin-require-rewrite work with expo.
I am adding this to babel.config.js:
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: [
["rewrite-require", { aliases: {
"stream": "stream-browserify"
}}]
]
};
};
Unfortunately, it is not respected by the bundler. I get this error when trying:
The package at "node_modules\qr-image\lib\qr.js" attempted to import the Node standard library module "stream". It failed because React Native does not include the Node standard library. Read more at https://docs.expo.io/versions/latest/introduction/faq.html#can-i-use-nodejs-packages-with-expo
Is it possible to make this work in Expo?
You dont need to modify babel config to use stream-browserify in your source. You can import stream-browserify in your App.js. I have created a simple example on GitHub.
App.js
const Stream = require('stream-browserify');
Package.json
"dependencies": {
"buffer": "^5.2.1",
"events": "^3.0.0",
"stream-browserify": "^2.0.2",
"readable-stream": {
"version": "2.3.6",
"dependencies": {
"core-util-is": "github:mjmasn/core-util-is"
}
}
...
}
stream-browserify has dependency readable-stream which has its own dependency and use node environment. To resolve it you have to add these node packages. You can read about core-util-is fork here.
This answer rn-nodeify install that i have posted should work. Except Step 1 & Step 5 follow all steps. Step 3 is used for adding node packages you are specifically looking to install, in this case specify stream. Please do modifications in Step 4 based on your requirement in Step 3.
Please do comment if you want me to elaborate.
What ended up working for me was creating a metro.config.js file with the following content (I used readable-stream instead of stream-browserify, but I think either should work):
module.exports = {
resolver: {
extraNodeModules: {
stream: require.resolve('readable-stream'),
},
},
};
And then I just used yarn add readable-stream and this allows dependencies to use readable-stream as if it were stream.
This was based on the info I found here: https://gist.github.com/parshap/e3063d9bf6058041b34b26b7166fd6bd#file-node-modules-in-react-native-md
I would like to add aliases to my React Native project started from the scratch with default react-native cli tools.
I created a webpack.config.js in the app root folder hoping that this will be enough for webpack to catch in on the fly. But its never happened.
Are any workarounds available?
Currently my webpack.config.js looks like that:
var path = require('path');
const alias = {
'~': __dirname,
'assets': path.resolve('./app/assets/'),
'native-styles': path.resolve('./app/native/styles')
}
module.exports = {
resolve: {
alias: alias,
}
}
I want to use autofix in .vue file, but Eslint only show the errors, no autofix.
How do I configure the .eslintrc to make it work?
Try to use it with specifying files extensions
eslint --fix --ext .js,.vue src
It will not work.
I had exactly the same issue and asked this question here (surprised you haven't found it).
I also asked them on Github and the answer is that they still not came with solution to use fix with plugins (vue-loader).
Eslint and VueJS files. Throwing errors but not fixing them
Here is thread on Github of Eslint: https://github.com/eslint/eslint/issues/7456#issuecomment-256757117
Hope it helps.
Assuming Vue.js 3, in your root directory, create a file vue.config.js, if not exists already, and insert:
const { defineConfig } = require('#vue/cli-service')
module.exports = defineConfig({
chainWebpack: config => {
config
.plugin('eslint')
.tap(args => {
args[0].fix = true
return args
})
}
})