I added Truncate-react to my project. After that, React tells me I need to install #babel/plugin-proposal-class-properties, which I did in package.json file in this way:
"babel": {
"presets": [
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
[
"#babel/plugin-proposal-class-properties",
{
"loose": true
}
]
]
}
Of course, the proposal-class-properties itself I installed with the label --save-dev
but after all this, I still get an error that looks like this
based on the github link you sent you have to do 2 things to make it work
you have both .babelrc file and babel config in your package.json. you have to choose one.
You have to change import TextTruncate from 'react-text-truncate/src/TextTruncate' to
import TextTruncate from 'react-text-truncate' in VideoCard component.
I assume react-text-truncate/src/TextTruncate this file is not the compiled version
Related
I'm trying to run a test in jest. When I add my import:
import { AnimalFactory } from "../../AnimalFactory";
I get the following error:
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import axios from "axios/index";
SyntaxError: Cannot use import statement outside a module in Javascript/Jest
I believe something about import axios from axios/index is causing an issue. How can I fix this?
I read some suggestions to include "type": "module", so I've added to package.json as an additional line but nothing seems to change
I'm also getting this error:
Cannot find module 'axios/index' from 'AnimalFactory.js'
However, Jest was able to find:
'../../AnimalFactory.js'
You might want to include a file extension in your import, or update your 'moduleFileExtensions', which is currently ['js', 'json', 'jsx', 'ts', 'tsx', 'node'].
What i've done:
installed babel and the plugin:
npm install --save-dev #babel/plugin-transform-modules-commonjs
webpack:
"babel": {
"presets": [
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
"#babel/plugin-proposal-class-properties",
"#babel/plugin-transform-modules-commonjs"
]
},
In my React-Native application, import paths are like this.
import {
ScreenContainer,
SLButton,
SLTextInput,
} from '../../../../../components';
import { KeyBoardTypes } from '../../../../../enums';
import { SIGN_UP_FORM } from '../../../../constants/forms';
I have seen some applications, there the paths are more clear and elegant without '../../../'s. How can I achieve this in React-Native??
I saw in my solution that, in every folder there was a package.json file. I'm not sure if that is the proper way to do it.
You need to configure alias in webpack.config.js. You can find an example here and here
webpack.config.js:
alias: {
'#': path.join(__dirname, 'src')
}
your.js.file.js
import '#/utils/classComponentHooks';
if you don't use wepback for react-native (despite you can). You can also try .babelrc
[
'module-resolver',
{
root: ['./src'],
alias: {
'#': './src',
},
},
];
Starting around React Native version 0.55 (I'm not sure exactly when this was enabled) you can just use your project name as the path root.
import {DatePanel} from 'MyProject/components/panels';
import HomeScreen from 'MyProject/screens/HomeScreen';
No problems with flow, Xcode, etc.
It's possible. I've done it, but I don't recommend it. It doesn't work when xcode starts bundler because you have to do npm start -- --reset-cache. You have to use workarounds to learn your IDE understand this paths. It doesn't work with Flow.
You can use npm babel-plugin-module-resolver. Babel is used by metro budler.
.babelrc.
{
"presets": ["react-native"],
"plugins": [
[
"module-resolver",
{
"root": ["./src"],
"alias": {
"src": "./src",
"root": "./"
}
}
]
],
}
The custom package I created and installed via npm has peer dependency - element-ui
This package imports component from element ui:
import {Pagination} from 'element-ui';'
But instead of importing only Pagination component, the whole element-ui lib is being imported in generated js file.
For building assets I use Laravel mix.
This is a snippet from webpack.mix.js
babel: {
"presets": [
["es2015", {"modules": false, "targets": {
"browsers": ["> 5%", "ie >= 9"]
}}]
],
"plugins": [["component", [
{
"libraryName": "element-ui",
"styleLibraryName": "theme-default"
}
]]]
}
When I use the same line of code for import inside my project, not from the custom package, the behavior is correct. Only Pagination is imported.
Thanks!
Solved by pre building my custom package, with the same lines in webpack.config.js
"plugins": [["component", [
{
"libraryName": "element-ui",
"styleLibraryName": "theme-default"
}
]]]
I have done it following the documentation of elemen-ui on demand Import Element on demand - ElementUI Vuejs, just a small change so that it works well in laravel.
npm install babel-plugin-component -D
then the babel preset is2015
npm install --save-dev babel-preset-es2015
Finally, you create a .babelrc file in the root of your project at the same level as webpack.mix.js, and add the following:
{
"presets": [["es2015", { "modules": false }]],
"plugins": [
[
"component",
[
{
"libraryName": "element-ui",
"styleLibraryName": "theme-default"
}
]
]
]
}
I'm unsure what package is causing additions in my source files when compiled to add things like this:
gcv = '__coverage__',
and
++cov_119g7nzanu.f[4];
++cov_119g7nzanu.s[26];
I suspect it's a testing package, but we don't do that yet, so I'd like to remove it until we do. Just not sure what to remove, I tried searching for it and found nothing. We're using gulp if that helps, but I hope someone will recognize these additions without having to scan a whole package.json file
Edit 1: It looks like Babel coverage from the plugin "instanbul" (https://github.com/istanbuljs/babel-plugin-istanbul) but I removed this from my package.json, rebuilt and still have it. Any ideas how to remove it?
I found the answer to this. It's using istanbul, and to turn off the coverage, go in the .babelrc file:
{
"presets": [
"es2015"
],
"env": {
"test": {
"plugins": [
"istanbul"
]
}
}
}
and remove the istanbul plugin:
{
"presets": [
"es2015"
],
"env": {
}
}
I'm onto my personal project and I want to integrate flowtype. Now, within the package.json I got:
"babel-plugin-syntax-flow": "6.3.13"
which helps babelify to transcript the flowtype's syntax but it doesn't do 'flow check' and doesn't log potential errors. Should I setup a separate gulp task with a separate package for it like https://www.npmjs.com/package/gulp-flowtype or should the the babel-plugin-syntax-flow also handle error logging?
The only thing Babel knows about Flow is how to parse it so that it won't cause a syntax error. Generally you'd use babel-plugin-transform-flow-strip-types, which enables the syntax plugin you have now, and then deletes the flow types so they don't end up in your final output. This is also enabled by default if you use the Babel preset react.
You'd definitely still have to use Flow's standard typechecker to do the actual static analysis.
Here is my working solution:
You need to install:
$ npm i --save-dev babel-plugin-syntax-flow
babel-plugin-transform-flow-strip-types babel-plugin-typecheck
Then add
"typecheck",
"syntax-flow",
"transform-flow-strip-types",
to your .babelrc configuration
Here is a sample of my configuration:
{
"presets": ["stage-2", "es2015", "react"],
"plugins": [
"react-hot-loader/babel",
"transform-decorators-legacy",
"typecheck",
"syntax-flow",
"transform-flow-strip-types",
"transform-async-to-generator"
],
"env": {
"development": {
"presets": ["react-hmre"]
},
"test":{
"presets": ["stage-2", "es2015", "react"],
"plugins": [
"react-hot-loader/babel",
"transform-decorators-legacy",
"typecheck",
"syntax-flow",
"transform-flow-strip-types",
"transform-async-to-generator"
],
}
}
}
This will output errors both at runtime and into your console.
As of June 2017, all you need to do is npm i --save-dev flow-runtime and add:
{
"plugins": [["flow-runtime", {
"assert": true,
"annotate": true
}]]
}