I've been trying to add Fontawesome to a Vue 3 project but it is breaking the app.
When I try to import the fontawesome nodemodules I get a network 504 failure.
In main.js
I try to import the library as follows:
/* import the fontawesome core */
import { library } from '#fortawesome/fontawesome-svg-core'
/* import font awesome icon component */
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome'
/* import specific icons */
import { faUserSecret } from '#fortawesome/free-solid-svg-icons'
This breaks the app and when I check the Network tab I see that my the path to these resources is set as:
http://localhost:5173/node_modules/.vite/deps/#fortawesome_free-solid-svg-icons.js?v=de8afee4
but this fails and creates a 504 Gateway Timeout
When I check in my node_modules folder I can see the #fortawesome folder it is there as expected.
I suspect it may be something to do with how .Vite is constructing the build that is wrong.
My package.json file looks like this:
{
"name": "litreach",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^6.2.0",
"#fortawesome/free-brands-svg-icons": "^6.2.0",
"#fortawesome/free-regular-svg-icons": "^6.2.0",
"#fortawesome/free-solid-svg-icons": "^6.2.0",
"#fortawesome/vue-fontawesome": "^3.0.2",
"#popperjs/core": "^2.11.6",
"bootstrap": "^5.2.2",
"vue": "^3.2.45"
},
"devDependencies": {
"#vitejs/plugin-vue": "^3.1.2",
"sass": "^1.56.1",
"sass-loader": "^13.2.0",
"vite": "^3.1.8"
}
}
I deleted my node_modules folder and reinstalled and rebuilt again, but the same problem persists.
Related
I am following the instructions here but when I add the line import "bootstrap/dist/js/bootstrap.js" to the main.js file I get the error on the network net::ERR_ABORTED 504 (Gateway Timeout) and a blank white screen. Nothing renders. When I comment out that import bootstrap/dist/js/bootstrap.js the app works as expected.
This is what I have in the main.js file:
import { createApp } from 'vue'
import App from './App.vue';
import './assets/main.css';
createApp(App).mount('#app');
import "bootstrap/dist/js/bootstrap.js"```
This is my package.json details.
``` "scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"#popperjs/core": "^2.11.6",
"bootstrap": "^5.2.2",
"vue": "^3.2.44"
},
"devDependencies": {
"#vitejs/plugin-vue": "^3.1.2",
"vite": "^3.1.8"
}
Any ideas?
You just need to restart the server thats it
I have done everything in accordance with the docs.
I installed storybook, and then I changed the config file the way they say has to be done to make storybook work on Vite, which supports the element-plus library.
.storybook/main.js:
module.exports = {
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.#(js|jsx|ts|tsx)'],
addons: ['#storybook/addon-links', '#storybook/addon-essentials'],
core: {
builder: '#storybook/builder-vite', // 👈 The builder enabled here.
},
}
Package.json:
{
"name": "elementui-practice",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview --port 4173",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
},
"dependencies": {
"element-plus": "^2.2.17",
"node-sass": "^7.0.3",
"sass-loader": "^13.0.2",
"vue": "^3.2.38"
},
"devDependencies": {
"#babel/core": "^7.19.1",
"#storybook/addon-actions": "^6.5.12",
"#storybook/addon-essentials": "^6.5.12",
"#storybook/addon-interactions": "^6.5.12",
"#storybook/addon-links": "^6.5.12",
"#storybook/builder-vite": "^0.2.2",
"#storybook/testing-library": "^0.0.13",
"#storybook/vue3": "^6.5.12",
"#vitejs/plugin-vue": "^3.0.3",
"babel-loader": "^8.2.5",
"eslint": "^8.23.1",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-storybook": "^0.6.4",
"eslint-plugin-vue": "^9.5.1",
"sass": "^1.55.0",
"vite": "^3.0.9",
"vue-cli-plugin-storybook": "~2.1.0",
"vue-loader": "^16.8.3"
}
}
If I run only the element-plus (npm run dev), the library works.
If I run npm run storybook, element-plus styles are not applied to the components or elements. Normal css works, but element-plus components and styles do not work.
Add these code to storybook's preview.js
import { app } from '#storybook/vue3'; //I use Vue3
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
app.use(ElementPlus);
I'm trying to export two web components in a public package on npm, using Vite with TypeScript.
Vite has a Library Mode (https://vitejs.dev/guide/build.html#library-mode) which works well. The ESM and UMD files are both being transpiled into my /dist directory. My question is how to export the web components in the entry point file.
I have an entry point file called export.js
import AwesomeHeader from './components/AwesomeHeader.vue'
import AwesomeFooter from './components/AwesomeFooter.vue'
export default { // I feel like the problem is here.
components: {
AwesomeHeader: AwesomeHeader,
AwesomeFooter: AwesomeFooter,
}
}
The idea is that I'll npm publish the project and use it like this.
npm i #sparkyspider/awesome-components #(ficticious example)
import {AwesomeHeader, AwesomeFooter} from '#sparkyspider/awesome-components' // does not find
(AwesomeHeader and AwesomeFooter are not found as exports in the node_module, even though the JavaScript files are referenced / found)
My package.json below:
{
"name": "#sparkyspider/awesome-components",
"version": "1.0.8",
"files": [
"dist"
],
"main": "./dist/awesome-components.umd.js",
"module": "./dist/awesome-components.es.js",
"exports": {
".": {
"import": "./dist/awesome-components.es.js",
"require": "./dist/awesome-components.umd.js"
}
},
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit && vite build",
"serve": "vite preview"
},
"dependencies": {
"vue": "^3.0.5"
},
"devDependencies": {
"#vitejs/plugin-vue": "^1.2.2",
"#vue/compiler-sfc": "^3.0.5",
"typescript": "^4.1.3",
"vite": "^2.3.3",
"vue-tsc": "^0.0.24"
},
}
You are having object { component: ... } as default export, instead of exporting AwesomeHeader and AwesomeFooter, which you try to import.
export { AwesomeHeader, AwesomeFooter } in export.js will work.
More on export: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export
And you can't destruct default export: https://stackoverflow.com/a/43987935/8810271
Error I'm getting Anytime I run npm test:
FAIL ./App.test.js
● Test suite failed to run
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Details:
/Users/bestes/Desktop/react-native-training/node_modules/react-native-status-bar-height/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { Dimensions, Platform, StatusBar } from 'react-native';
^^^^^^
SyntaxError: Cannot use import statement outside a module
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
at Object.<anonymous> (node_modules/react-native-elements/src/config/index.js:1:1)
My Test:
import 'react-native';
import React from 'react';
import { render } from '#/../testing/test-utils'
import App from './App'
test('should render app component', () => {
const result = render(<App />)
expect(result).toMatchSnapshot()
})
My test-utils.js file:
import React from 'react'
import { render } from '#testing-library/react-native'
import { store } from '#/bootstrap/redux'
import { Provider } from 'react-redux'
const AllTheProviders = ({ children }) => {
return (
<Provider store={store}>
{children}
</Provider>
)
}
const customRender = (ui, options) =>
render(ui, { wrapper: AllTheProviders, ...options })
// re-export everything
export * from '#testing-library/react-native'
// override render method
export { customRender as render }
My package.json file:
{
"name": "ReactNativeTraining",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"#react-native-community/geolocation": "2.0.2",
"#react-native-community/masked-view": "0.1.10",
"#react-native-picker/picker": "1.9.10",
"#reduxjs/toolkit": "1.5.0",
"axios": "0.21.1",
"dayjs": "1.10.4",
"lodash": "4.17.20",
"react": "16.13.1",
"react-native": "0.63.2",
"react-native-config": "1.4.2",
"react-native-elements": "3.0.0-alpha.1",
"react-native-geocoding": "0.5.0",
"react-native-gesture-handler": "1.9.0",
"react-native-permissions": "3.0.0",
"react-native-picker-select": "8.0.4",
"react-native-reanimated": "1.13.2",
"react-native-safe-area-context": "3.1.9",
"react-native-screens": "2.17.0",
"react-native-size-matters": "0.4.0",
"react-native-vector-icons": "8.0.0",
"react-navigation": "4.0.2",
"react-navigation-stack": "1.5.4",
"react-navigation-tabs": "2.4.1",
"react-redux": "7.2.2"
},
"devDependencies": {
"#babel/core": "7.12.10",
"#babel/runtime": "7.12.5",
"#react-native-community/eslint-config": "2.0.0",
"#testing-library/jest-native": "4.0.1",
"#testing-library/react-native": "7.2.0",
"babel-jest": "^26.6.3",
"babel-plugin-module-resolver": "4.0.0",
"eslint": "7.18.0",
"jest": "26.6.3",
"metro-react-native-babel-preset": "0.64.0",
"react-test-renderer": "16.13.1"
},
"type": "module",
"jest": {
"verbose": true,
"preset": "react-native",
"setupFilesAfterEnv": ["#testing-library/jest-native/extend-expect"],
"transformIgnorePatterns": [
"node_modules/(?!(react-native",
"#react-native-community/geolocation",
"#react-native-community/masked-view",
"|#react-native-picker/picker",
"|#reduxjs/toolkit",
"|axios",
"|dayjs",
"|lodash",
"|react",
"|react-native",
"|react-native-config",
"|react-native-elements",
"|react-native-geocoding",
"|react-native-gesture-handler",
"|react-native-permissions",
"|react-native-picker-select",
"|react-native-reanimated",
"|react-native-safe-area-context",
"|react-native-screens",
"|react-native-size-matters",
"|react-native-vector-icons",
"|react-navigation",
"|react-navigation-stack",
"|react-navigation-tabs",
"|react-redux",
")/)"
]
}
}
My babel.config.js file:
module.exports = function (api) {
api.cache(true)
const presets = [
'module:metro-react-native-babel-preset'
]
const plugins = [
[
'module-resolver', {
'root': ['./src/'],
'extensions': ['.js', '.ios.js', '.android.js'],
'alias': {
'#': './src/'
}
}
]
]
return {
presets,
plugins
}
}
What I've tried:
Adding "type": "module" to my root level package.json file, which fixed a similar error with exporting,
Adding Transform Ignore Patterns to the Jest key in the package.json file.
I'd added ALL of my dependencies to the transformIgnorePatterns as it kept throwing errors on each one, until I added all and now it throws on react-native modules imports.
[Solved] Work for me
Install below
npm install --save-dev #babel/core
npm install --save-dev #babel/preset-env
after that create the "babel.config.js" file in the root and that content should be as below
module.exports = {
presets: ['#babel/preset-env', '#babel/preset-react'],
env: {
test: {
plugins: ["#babel/plugin-transform-runtime"]
}
}
};
I have an old React Native project, now i want to run it with Expo. The problem is Expo software stuck at “waiting for package and tunnel to start” when i try to use Expo to open the project and start it. I am working on MacOS with watchman already installed.
Here's the structure of my project
My app.json:
{ "name": "myapp", "displayName": "myApp", "expo": { "sdkVersion": "28.0.0" } }
package.json:
{
"name": "MyApp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"expo": "^28.0.0",
"react": "15.4.1",
"react-native": "0.42.0",
"react-native-calendar-strip": "^0.1.4",
"react-native-check-box": "^1.0.4",
"react-native-checkbox": "^1.1.0",
"react-native-code-push": "1.17.0-beta",
"react-native-collapsible": "0.8.0",
"react-native-datepicker": "^1.6.0",
"react-native-fetch-blob": "0.10.6",
"react-native-image-picker": "0.26.2",
"react-native-keyboard-aware-scroll-view": "^0.2.9",
"react-native-modal-picker": "0.0.16",
"react-native-modalbox": "1.3.9",
"react-native-pdf": "1.2.4",
"react-native-picker": "4.0.18",
"react-native-signature-pad": "git+https://github.com/silverspace/react-native-signature-pad/#greg/android_blank_workaround",
"react-native-simple-store": "^1.2.0",
"react-native-vector-icons": "4.0.1",
"react-navigation": "1.0.0-beta.7",
"react-redux": "5.0.3",
"realm": "2.11.0",
"redux": "3.6.0",
"redux-logger": "2.8.2",
"redux-thunk": "2.2.0",
"tipsi-stripe": "3.2.0"
},
"devDependencies": {
"babel-jest": "19.0.0",
"babel-preset-react-native": "1.9.1",
"jest": "20.0.4",
"react-test-renderer": "15.4.1"
},
"jest": {
"preset": "react-native"
}
}
index.ios.js and and index.android.js have the same code: import './App';
Here's my App.js:
import React from 'react';
import {
AppRegistry,
Text,
View,
Button,
AppState,
DeviceEventEmitter
} from 'react-native';
import { BackAndroid } from 'react-native'
import { NavigationActions, StackNavigator } from 'react-navigation';
// Redux
import { Provider } from 'react-redux'
import store from './app/store'
import codePush from 'react-native-code-push';
import HomeNavigation from './app/Home/screens/HomeNavigation'
import simpleStore from 'react-native-simple-store';
import { HOST } from './app/Common/constants';
const GET_USER_URL = `${HOST}/api/user`;
let codePushOptions = {
checkFrequency: codePush.CheckFrequency.ON_APP_RESUME,
installMode: codePush.InstallMode.ON_NEXT_RESUME
};
class App extends React.Component {
//Doing something here...
render(){
return(
<Provider store={store}>
<HomeNavigation />
</Provider>
)
}
}
export default CodePushApp = codePush(codePushOptions)(App);
AppRegistry.registerComponent('MypApp', () => CodePushApp);
I have try to install Expo on a Window PC but still have the same issues when try to run this project.
I know this is late but if you have already installed expo-cli then try changing the scripts section of your package.json file to the following
"scripts": {
"start": "expo start",
"eject": "expo eject",
"android": "expo start --android",
"ios": "expo start --ios",
"test": "jest"
}
This worked for me