Unable to resolve module #env from D:\react\weatho\weatho-app\App.js: #env could not be found within the project
10:import {REACT_APP_WEATHER_API_KEY} from "#env";
my env file looks like this:
REACT_APP_WEATHER_API_KEY=2607fb610e6f9fecd16c84408d0b42a2
and my Babel file looks like this:
module.exports = function(api) {
api.cache(true);
return {
plugin: ['babel-preset-expo','module:react-native-dotenv'],
}
}
and my env file is in root folder along with Appjson and few other files
You should add a plugin like this(.env file must be in the root directory)
module.exports = function (api) {
api.cache(true);
return {
presets: ["babel-preset-expo"],
plugins: [
[
"module:react-native-dotenv",
{
moduleName: "#env",
path: ".env",
},
],
],
};
};
And don't forget to restart the expo start and ios/android restart the app.
If you are still getting the same issue then it can be a cache issue.
You can easily clear the babel cache by running the following command :
rm -rf node_modules/.cache/babel-loader/*
or
yarn start --reset-cache
or
expo r -c
Your babel config has 'plugin' which should be 'plugins'
yarn start --reset-cache
npm start -- --reset-cache
expo start -c
Related
Module not found: Error: Can't resolve 'process/browser' in '/Users/nigelng/oxpay-merchant-portal-fe/node_modules/xlsx'
Did you mean 'browser.js'?
I have installed xlsx 0.18.5 npm package to export xlsx files, I found out that's a webpack issue (https://github.com/SheetJS/sheetjs/issues/2527), but the solutions didn't work for me.
do anyone experience the same error?
The way I fixed this was by using the package #craco/craco so you can manually change the webpack config file without ejecting create-react-app (since that is permanent). Once craco is installed create a file in the root directory named craco.config.js and then copy and paste this configuration, should fix your problem:
const webpack = require("webpack");
module.exports = {
webpack: {
configure: {
module: {
rules: [
{
test: /\.m?js/,
resolve: {
fullySpecified: false
}
}
]
},
}
}
};
Make sure to change your start script to "craco start" and you should be off to the races.
I'm trying to debug my android app with react native v0.66.1 and react native tools v1.8.1 in vsCode. But after running the app and attach to packager, or launch in debug mode,
I got this error com.facebook.react.commot.JavascriptException: Invalid or unexpected token.
update babel.config.js of your project : (assume your metro-react-native-babel-preset is 0.58.0)
from:
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
};
to:
module.exports = {
presets: [['module:metro-react-native-babel-preset', {
unstable_disableES6Transforms: true
}]],
};
finally run yarn start --reset-cache to restart app.
I'm currently facing an issue that i don't know anything about.
I'm building an app using Next.JS, TailwinCSS, Npm and vercel to deploy.
In fact, when i start the server, i'm having this issue (also when deploying on Vercel):
./node_modules/next/dist/compiled/css-loader/cjs.js??ruleSet[1].rules[2].oneOf[5].use[1]!./node_modules/next/dist/compiled/postcss-loader/cjs.js??ruleSet[1].rules[2].oneOf[5].use[2]!./node_modules/react-loader-spinner/dist/loader/css/react-spinner-loader.css
TypeError: Cannot read property 'theme' of undefined
at runMicrotasks (<anonymous>)
I had some issues at a time, with TailwindCSS because of certain properties not running, i don't know if the reinstallation had an impact or not...?
If someone have any idea,
Thank you for your time !
Replace
'#tailwindcss/jit': {}
with
tailwindcss: {}
in your postcss.config.js like
// https://tailwindcss.com/docs/using-with-preprocessors
module.exports = {
plugins: {
tailwindcss: {}, // remove '#tailwindcss/jit': {},
autoprefixer: {},
},
}
Then update tailwind.config.js and add
mode:'jit'
module.exports = {
mode:'jit', // <= add here
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*. {js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
Also check this pr and issue
I was facing an similar issue.
My error log is following.
It was occured after updating packages.
> next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
error - ./node_modules/next/dist/compiled/css-loader/cjs.js??ruleSet[1].rules[2].oneOf[6].use[1]!./node_modules/next/dist/compiled/postcss-loader/cjs.js??ruleSet[1].rules[2].oneOf[6].use[2]!./styles/globals.css
TypeError: Cannot read property 'theme' of undefined
I could not understand what happen.
So I do
rm -r node_modules
rm package-lock.json
rm -r .next
git reset --hard <commit id>
npm install
npm start
If that doesn't work, git clone again may work.
How about this?
Thanks!
I recently try to make a boilerplate for webpack2 + babel6 + gulp + react-hot-loader project. I started by forking react-hot-loader-minimal-boilerplate. Then I added a gulpfile to it as this branch.
If you read the code, you'll find I've only added the last 1 commit, which added the gulp package, gulp file and add the npm run gulp script. You 'd want to take a look at gulpfile.babel.js, which currently looks like this:
const gulp = require('gulp');
const webpack = require('webpack');
const cfg = require('./webpack.config');
const devServer = require('webpack-dev-server');
const path = require('path');
const util = require('gulp-util');
gulp.task('dev', () => {
cfg.plugins = [
new webpack.HotModuleReplacementPlugin(),
];
cfg.entry = {
'app': [
'babel-polyfill',
'react-hot-loader/patch',
'webpack-dev-server/client?http://localhost:8080',
'./src/index',
],
};
new devServer(webpack(cfg), {
//contentBase: path.join(__dirname, 'dist'),
hot: true,
historyApiFallback: true,
//publicPath: cfg.output.publicPath,
stats: {
colors: true,
},
}).listen(8080, 'localhost', function (err) {
if(err) throw new gutil.PluginError("webpack-dev-server", err);
util.log(`'${util.colors.cyan('dev:server')}' http://localhost:8080/webpack-dev-server/index.html`);
});
});
Supposedly, the command npm run dev and npm run gulp should have the same effect. But in reality, the gulp command is not working.
If I change my React code, the code in browser should update accordingly.
The console log for code update in npm run dev:
Instead, although the browser did get signal from webpack-dev-server for the update, the DOM is not updated along with the signal.
The console log for code update in npm run gulp:
Any suggestion on how to fix this boilerplate?
I'm setting up React for the first time following the tutorial. I created main.js and ran the various commands. The last command gives me error:
To install React DOM and build your bundle with webpack:
$ npm install --save react react-dom babel-preset-react
$ webpack
When I run webpack I receive error:
Output filename not configured
It points me to the usage docs. The usage docs tells me the command line interface expects input of the form:
webpack <entry> <output>
Obviously the command webpack as shown in the react tutorial does not meet this criteria. What did I do wrong?
Create a webpack.config.js, eg.:
module.exports = {
context: __dirname + "/app",
entry: {
jsx: './main.js',
html: './index.html'
},
output: {
path: __dirname + '/dist',
filename: 'bundle.js'
}
}