I am new to Next and React. I have a use case where we have a nextJs application that uses react-native and react-native-web, let's call it A. A is intended to be used either for web and native through different build entry. I have another React app, call it B, that provides a web component to be used by A. Now I can build A and B successfully, but when I start A in web, I got
Module not found: Can't resolve '<B>'.
My IDE can't link this either. When I command click the import, it says nodule not installed even though I did.
I've checked that B's build artifacts do exist in A's node_module, and everything is referenced correctly in package-lock.json. Previously we were using react-native-builder-bob (link) to build B and it was working fine. But react-native-builder-bob is meant for React Native applications and we would like to have better control of the building behavior in the future. My guess is that there is probably some issue with transpiling B that Next is not picking up the dependency.
Here is my .babelrc in B:
{
"presets": [
"#babel/preset-env",
"#babel/preset-typescript",
"#babel/react"
],
"plugins": [
"#babel/plugin-proposal-class-properties"
]
}
.bablerc in A:
{
"env": {
"next": {
"presets": ["next/babel"],
"plugins": [["react-native-web", { "commonjs": true }]]
}
},
"presets": ["module:metro-react-native-babel-preset"]
}
I think I've got the same babel configuration that react-native-builder-bob is using. Is there anything I am missing?
Checked node_module folder that build artifacts exist.
Everything is correctly referenced.
Works fine with bob build
The react-native-builder-bob configuration is:
"react-native-builder-bob": {
"source": "src",
"output": "lib",
"targets": [
"commonjs",
"module",
[
"typescript",
{
"project": "tsconfig.json"
}
]
]
},
How should I change the configs to make it work?
Related
The code in question is very simple. I have an "app" folder with a server directory inside. I open a terminal. I cd into app. I then type npx create-next-app client. next installs. I change directory to app/client. I run npm run dev.
I get this in console...
Error: Your custom PostCSS configuration must export a plugins key.
I tried with earlier version of create-next-app. Same. Tried with other installation on my machine. Same.
Is there any way to find out what postcss next thinks is being used?
Can i add a config to fix it?
Okay, I found the answer! I added a practically empty postcss.config.json.
{
"plugins": [
]
}
First, I tried using the exact example, "default", from the nextjs docs...
{
"plugins": [
"postcss-flexbugs-fixes",
[
"postcss-preset-env",
{
"autoprefixer": {
"flexbox": "no-2009"
},
"stage": 3,
"features": {
"custom-properties": false
}
}
]
]
}
That didn't work. Then I erased the json data leaving just an empty plugins array. Worked.
But why...
I use #testing-library/react-native to test my RN app. When I run yarn test, following error occurs.
#testing-library/react-native should have "jest-preset.js" or "jest-preset.json" file at the root.
I use typescript for my app.
my test script is like this.
test": "jest --config jest.config.json"
jest.config.json file is like this.
{
"preset": "#testing-library/react-native",
"collectCoverageFrom": ["src/**/*.{ts,tsx}"],
"moduleDirectories": ["node_modules", "src"],
"setupFiles": [
"<rootDir>/jestSetup/setup.js",
"./node_modules/react-native-gesture-handler/jestSetup.js"
],
"transformIgnorePatterns": [
"node_modules/(?!(jest-)?(react-native|#?react-navigation|#react-native-community))"
],
"coveragePathIgnorePatterns": ["/node_modules/", "/jestSetup", "/src/config.ts", "/src/app.tsx"]
}
Why am I getting this error?
I'm using expo and after updates from 38 to 39, Jest stopped working. I had same issues — it was complaining about missing preset js files.
Preset below didn't work for me:
"preset": "#testing-library/react-native",
So I have changed jest.config.js like this:
module.exports = {
clearMocks: true,
coverageDirectory: 'coverage',
testEnvironment: 'node',
preset: './node_modules/jest-expo/jest-preset.js',
}
Changed preset file location to expo's one which im using and it did the work
The preset no longer exists in >=7.0.0 "#testing-library/react-native". According to the documentation it seems "react-native" should be used as the preset.
"preset": "react-native",
V7 upgrade documentation reference
For those seeing this in a fully up to date project, the missing file is [./node_modules/]react-native/jest-preset.js and you need to make sure that react-native itself is installed.
This will happen if you don't have react-native install globally.
yarn add react-native (or do it globally)
so in package.json you should see something like:
"react-native": "0.66.3",
I want to add the following babel configuration in react-scripts I don't want to eject from cra I want to keep using it without ejecting. I see there is a way to fork the repo and add your custom configuration. But I want to know where exactly I can paste this.
// .babelrc or babel-loader option
{
"plugins": [
["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }] // `style: true` for less
]
}
There is, in theory, customize-cra, which lets you do things like override Babel plugins.
Here is a list of things you can do.
It doesn't appear to be maintained at time of writing, and for me didn't seem usable if your project is modules-based (ie import) as opposed to require.
CRA itself recommends forking their scripts as an alternative to ejecting, which is a pretty bold statement.
If you wish to override a property of one of the config files of React, you can just create that config file in your project's main directory and just set that single property, this will override that property in React's configuration. For babel you can just add it as a property in package.json like so:
"babel": {
"presets": [ ... ],
"plugins": [ ... ],
}
If you run npm run-script eject you are going to get a copy of all the config that ReactJS uses for your project in the main directory of your project/config, from there you can edit whatever you like, keep version tracking of your changes and not mess with the react repository.
If you insist on forking it you can fork the main create-react-app repository from here, which contains the react-scripts here
I am using grunt to automate the whole process. This is what my configuration looks like:
browserify: {
dist: {
files: {
'<%= dirs.dest %>/index.js': [
'<%= dirs.src %>/index.js'
]
},
options: {
transform: [
['babelify', { presets: ['es2015', 'stage-3', 'react'] }]
]
},
}
},
It fails when attempting to parse one of the react components that are imported with the following error:
>> <div>
>> ^
>> ParseError: Unexpected token
Warning: Error running grunt-browserify. Use --force to continue.
Aborted due to warnings.
I've tried using the same file that throws the error with babel-standalone in the browser and it works just fine.
I'm stumped as to how to fix this as most links say that using babel-preset-react should fix it (and it works with another project that I have)
Try babel-preset-env, this should cover most cases.
Personally I tend to use something like:
"presets": ["env", "react", "stage-3"]
if this doesn't work, it must be something else with your config
By default, browserify does not transpile included files that are outside your project. Since the component that was causing the issue was being included from node_modules, I had to configure its package.json file to ensure that browserify knew that its source was not transpiled and that it had to transpile it when it was being included.
I was able to do that by including this in my node_modules component's package.json:
"browserify": { "transform": [ "babelify" ] }
Once I added this and ensured that the component was being exported from the module, everything started working as expected.
Reference: https://github.com/babel/babel/issues/1625#issuecomment-105334250
I am new to jest and facing issues with .babelrc. As suggested in docs, I have to put following content in .babelrc file for jest to run:
// .babelrc
{
"presets": ["es2015", "react"]
}
But my project already has .babelrc file with following content:
{
"presets": [
"es2015",
"react",
"stage-0"
]
, "plugins": [
"transform-object-rest-spread"
, "transform-decorators-legacy"
, "transform-es2015-modules-amd"
]
}
If I try to run jest with already present file, it gives me error: ReferenceError: define is not defined. But if I remove the "transform-es2015-modules-amd" plugin property from the .babelrc file, it runs fine. The issue is I cant remove the property as it is being used somewhere else. Can i create separate .bebelrc file for jest and map it accordingly or any other solution? Please share if any.
For running tests in command line, you can put separate .babelrc file in the project's root dir. For example .babelrc:
{
"presets": ["env"]
}
run tests in terminal (console):
yarn test