Missing something in order to import fs module with rollup - rollup

I'm using ES6 import statements along with rollup in my Node app and running into difficulties. For example, when trying to load fs:
import * as fs from 'fs';
and trying to use:
fs.writeFile(...);
I get the error:
Uncaught (in promise) TypeError: Cannot read property 'writeFile' of undefined
My rollup config:
import commonjs from 'rollup-plugin-commonjs';
import resolve from 'rollup-plugin-node-resolve';
export default {
input: 'js/index.js',
output: {
file: 'build/bundle.js',
format: 'iife',
sourcemap: 'inline'
},
plugins: [
resolve(),
commonjs()
],
external: [
'fs'
]
};

Related

How to make create-vue parse JSX without problems (as VueCLI does)

I use JSX extensively to customize Naive-UI library elements. But after migrating from VueCLI to create-vue, I noticed it looks like create-vue doesn't understand JSX in .vue file at all. For example it throws Uncaught SyntaxError: Unexpected token '<' for this:
const x = <div>Hi all</div>;
But VueCLI does understand... So the question is:
How to make create-vue parse JSX without problems (as VueCLI does)?
PS. Here is vite.config.js
import { fileURLToPath, URL } from "node:url";
import { defineConfig } from "vite";
import vue from "#vitejs/plugin-vue";
import vueJsx from "#vitejs/plugin-vue-jsx";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(), vueJsx()],
resolve: {
alias: {
"#": fileURLToPath(new URL("./src", import.meta.url)),
},
},
});

To use JSX in .vue files, make sure to use <script lang="jsx"> (or "tsx" if using TypeScript)

React-native .env files are not working properly

I followed the guide and I used react-native-dotenv lib.
Here is my babel.co
module.exports = {
presets: [
'module:metro-react-native-babel-preset',
'module:react-native-dotenv',
],
};
Here is what I have in my .env file:
URL="someUrl"
And this is how I'm trying to use it:
import {URL} from 'react-native-dotenv';
But I'm still getting this error:
Unknown option: .name. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.
Any solutions on this please?

The documentation tells you to import it via:
import {URL} from '#env'
and not
import {URL} from 'react-native-dotenv';

import vue-awesome icons error while jest testing with nuxt on node 13.9.0

I have followed the instructions on https://github.com/Justineo/vue-awesome
in my jest.config.js I add the following
transformIgnorePatterns: [
'/node_modules(?![\\\\/]vue-awesome[\\\\/])/'
]
my nuxt.config.js
build: {
transpile: [/^vue-awesome/] // enable font-awesome integration.
},
The icons work just fine when I'm running the dev box, but I get the following when I run yarn test:
[path/to/project]/node_modules/vue-awesome/icons/building.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import Icon from '../components/Icon.vue'
^^^^^^
SyntaxError: Cannot use import statement outside a module
explicitly, the issue seems to be something to do with how babel reads (or overlooks) the imports above the Icon component import. So, for example, given the building.js in the error log above, here is how the import looks in the vuejs file:
<script>
import 'vue-awesome/icons/building'
import Icon from 'vue-awesome/components/Icon'
export default {
componentes: {
'v-icon': Icon
}
...
}
</script>

It looks like I have to explicitly mock the component and its imports at the top of the file (below the imports)
the following works for my test.
import { shallowMount, createLocalVue } from '#vue/test-utils'
import Vuex from 'vuex'
import { AxiosSpy, MockNuxt } from 'jest-nuxt-helper'
import index from '#/pages/courses/index'
// MOCKS:
jest.mock('vue-awesome/icons/building', () => '')
jest.mock('vue-awesome/components/Icon', () => '<div></div>')
...

Module parse failed: Unexpected character '#' (1:0) vuejs , vuetify and vuex

getting error while adding/integrating Vuetify like.. import Vuetify from 'vuetify/lib' Vue.use(Vuetify) in main.js
Error:
ERROR in ./node_modules/vuetify/src/stylus/components/_grid.styl
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
| . #import '../bootstrap'
main.js
import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)

we need to configure loader in webpack (webpack.config.js or webpack.js or webpack.base.js) like
webpack.base.js
.......other config
module: {
rules: [
{
test: /\.styl$/,
loader: ['css-loader', 'stylus-loader']
},
.....other loaders
]
}
....other config
to install loaders
npm i stylus-loader css-loader --save-dev

This is working on my side.
you can add it on your roles.
{
test: /\.styl$/,
loader: ['style-loader', 'css-loader', 'stylus-loader']
},

How to import index.vue by just mentioning the parent directory name rather than filename?

I've been building my Vue application by using Vue Cli 3.
If I need to import an index.js which is in directory named Dir1, I can import it using
import file1 from '#/components/Dir1/
but somehow it doesn't work with .vue extension files.
I have to expicitly mention the file name such as import Title from #/components/Title/index.vue.
What changes do I have to make in the settings in order to import the .vue extension file without mentioning the filename?

This is how I would do it with Vue.
You may need to tweak the config a little bit to suit your dev environment needs.
Note that this is not a full config but a guideline on what should be done based on NPM directory-named-webpack-plugin documentation.
In your webpack.config.js you should have the following (Webpack 3):
const DirectoryNamedWebpackPlugin = require('directory-named-webpack-plugin');
// ...
let config = {
// ...
module: {
rules: [
{
test: /\.(js|vue)$/,
exclude: /node_modules/,
use: 'babel-loader'
}
]
},
resolve: {
modules: ['components', 'node_modules'],
extensions: ['.js', '.vue'],
plugins: [
new DirectoryNamedWebpackPlugin(true)
]
}
// ...
}
modules.exports = config;
taken and modified for Vue from: Recursive import of components using webpack in React