This is the error that am getting when i tried to run my code in Expo.
App.js: Cannot find module 'babel-plugin-babel-preset-expo
Any solution would be appreciated.
My babel.config.js looks like this
module.exports = function(api) {
api.cache(true);
return {
plugins: ['babel-preset-expo','module:react-native-dotenv'],
}
}```
https://github.com/expo/expo/issues/10964
Well this guy had similar error.I don;t think it has been resolved i guess.
Your babel configuration looks wrong.
replace your babel.config.js file with
module.exports = function (api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: [
["module:react-native-dotenv", {
"moduleName": "#env"
}]
]
};
};
Now you can import your environment variables by
import { ENV_VARIABLE_NAME } from "#env"
where ENV_VARIABLE_NAME is the name you specified in your .env file
Related
I have a fairly large Vue project that was initially created with vue-cli. I'm getting the infamous "couldn't fulfill desired order of chunk group(s)" warning when building. After much searching, I think the solution is to add ignoreOrder to the initial configuration options for mini-css-extract-plugin but I have no idea how. I think this should be done in vue.config.js. The contents of that file are:
module.exports = {
lintOnSave: false
}
I've tried:
module.exports = {
lintOnSave: false,
configureWebpack: {
plugins: [
new MiniCssExtractPlugin({ ignoreOrder: true })
]
}
}
But that gives me an error that I think means that the module was loaded twice.
I've tried:
module.exports = {
lintOnSave: false,
css: {
loaderOptions: {
ignoreOrder: true
}
}
}
but that gives me a syntax error.
How do I set that option?
According to the document, you can pass the configuration for min-css-extract-plugin by passing the options via css.extract property as following:
// vue.config.js
module.exports = {
// ...,
css: {
extract: {
ignoreOrder: true
},
}
};
I am using Vue typeScript with GraphQL. Whenever I try to use a query using deconstructor I get an error from Vetur. I am able to use GetPostData query in the Vue Component and its working fine.
Trying to use this - https://github.com/apollographql/graphql-tag#support-for-multiple-operations
Vue File
import { GetPostData } from "../../util/queries/getPageData.gql";
getPageData.gql
query GetPostData {
continents {
code
}
}
query GetCountries($code: String!) {
country(code: $code) {
code
}
}
Vue.config.js
const antdTheme = require("./src/theme.js");
module.exports = {
publicPath: "/",
pwa: {
iconPaths: {
favicon32: "./favicon.png",
favicon16: "./favicon.png",
appleTouchIcon: "./favicon.png",
maskIcon: "./favicon.png",
msTileImage: "./favicon.png"
}
},
css: {
loaderOptions: {
less: {
modifyVars: antdTheme,
javascriptEnabled: true
}
}
},
chainWebpack: config => {
// GraphQL Loader
config.module
.rule("graphql")
.test(/\.(graphql|gql)$/)
.use("graphql-tag/loader")
.loader("graphql-tag/loader")
.end();
}
};
I think it states that's what you can do but I don't think you really can.
It's better to put all your queries in a javascript file and import 'graphql-tag' to store queries instead of using a .gql file.
Just tested and Vetur didn't complain, could have been a bug that is already fixed.
According to graphql-tag package this case is supported (docs), so if Vetur complains must be an issue with the extension itself.
React native documentation state that
"You can also use this babel plugin that removes all the console.* calls. You need to install it first with npm i babel-plugin-transform-remove-console --save-dev, and then edit the .babelrc file under your project directory like this"
{
"env": {
"production": {
"plugins": ["transform-remove-console"]
}
}
}
I didn't find .babelrc file. Hence I made the following changes in babel.config.js file.
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
env: {
production: {
plugins: ["transform-remove-console"]
}
}
};
But it's not working for me. The logs are displayed when I've tested them in Android Studio. What went wrong here?
The documented approach didn't work for my existing project either, but it worked in a new test project. I tried numerous dependency upgrades, adding/removing deps, plugins, etc. trying to figure out the source of the problem, but no luck. So finally I went with this workaround:
module.exports = {
plugins: ['#babel/plugin-proposal-numeric-separator', 'lodash'].concat(
process.env.NODE_ENV === 'production' ? ['transform-remove-console'] : []
),
presets: [
'module:metro-react-native-babel-preset',
['#babel/env', { targets: { node: 6 } }]
]
};
This should work (recommended method)
const presets = ['module:metro-react-native-babel-preset'];
const plugins = ['module:react-native-dotenv'];
if (process.env.ENV === 'prod') {
plugins.push('transform-remove-console');
}
module.exports = {presets, plugins};
Or if you don't want to use any package for this you can do this.
Place this in index.js
if(!__DEV__){
console.log = () => {}
}
I've noticed that there are virtually no info from babel on incorrect configuration. For example I've created new app with react-native-cli, installed decorators plugin and filled my babel.config.js as follows:
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: ['#babel/plugin-proposal-decorators', { legacy: true }],
};
And there were the same complain as if no plugin is installed. Correct config would be:
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [['#babel/plugin-proposal-decorators', { legacy: true }]],
};
Now I'm trying to install jsx-control-statements and have the same silent fail causing
ReferenceError: Can't find variable: Choose as if no such plugin is installed at all. My babel.config.js is:
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
'jsx-control-statements',
['#babel/plugin-proposal-decorators', { legacy: true }],
],
};
So the question is: How do I debug this configuration? How can I get some diagnostic from babel about incorrect configuration/not found packages etc.?
For instance if the presets/plugins are missing or missconfigured, you'll get an error when webpack takes over and try to load all the config. But I think your best shot is to use progressPlugin where you could display each step and see for yourself what is happening.
new webpack.ProgressPlugin((percentage, message, ...args) => {
console.log(percentage, message, ...args);
}),
Another approach, would be using debug module, as nearly all other plugins, modules use it.
DEBUG=* webpack [-c webpack.something.js]
Hope it helps
If you use babel.config.js you could do the following:
module.exports = function(api) {
if (api) {
api.cache(true);
api.debug = process.env.NODE_ENV === 'development' || false;
}
const presets = ['#babel/preset-env'];
const plugins = [
'#babel/plugin-proposal-class-properties',
...
];
return {
presets,
plugins,
};
};
I'm using Vue cli3, and want to ignore moment.js plugin with webpack. This is the rule, but on vue.confing.js it gives an error no matter how I change it.
plugins: [
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
],
You appear to be trying to use the deprecated constructor. Try this instead and don't forget to import webpack into the script...
const webpack = require('webpack')
module.exports = {
configureWebpack: {
plugins: [
new webpack.IgnorePlugin({
resourceRegExp: /^\.\/locale$/,
contextRegExp: /moment$/
})
]
}
}
If you want to remove all of moment and not just the locales as the OP seemed to want, here is the required configuration:
const webpack = require('webpack');
module.exports = {
configureWebpack: {
plugins: [
new webpack.IgnorePlugin({
resourceRegExp: /moment$/
}),
]
}
};