I'm learning react-redux app and now I'm trying to pass to th browser a "Hello World!" but when I start it with npm it appears an error and I don't really know how to fix it. Sorry I'm a bit noob in this coding world.
npm
package.json
webpack.config
Thanks in advance :)
Edit:
Below is my index.js code:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/app';
ReactDOM.render( <App />, document.getElementById('app') );
Below is my app.js code:
import React from 'react'; export default () => ( <div>Hello world!</div> );
module.export = {
entry: './index.js',
output: {
path: __dirname,
filename:'bungle.js'
},
devtool: 'eval-source-map',
module: {
loaders: [{
test: /.js?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react'],
plugins: ['transform-object-rest-spread']
}
}]
}
};
Is the src folder in the root of the project or did you try to move it?
Although React officialy doesn't follow a specific folder structure and naming convention but its very common that developers normally place most of the logic inside src folder. Source folder can have a components folder where u store all folders, similarly inside the src folder you can have an images folder to store all the images , a css folder to store all the css and so on. You are right by default you get a src folder through creat react app. I guess the teacher you are following might create a src folder in the future or you can show me the code of your index file so i can tell u better
Edit: (after OP provided index.js and app.js)
That's strange. Although this shouldn't happen but what I'll recommend is to create another react project through create-react-app and try to run that to see if this is not some issue with React
Related
So I have a react native project, and in that project many of my urls start looking like this: import Component from '../../component/file';
So after this problem I saw this video by fireshipio with says I can shorten it by adding a jscofig.json file but it did not work when I wrote import Component from '../../component/file';
it just told me it could not find the path please tell me what I am supposed to do to make this working because if its possible my links will become so much shorter and smarter. Remember the programming rule do not repeat yourself so please help me follow that.
link to fireshipio vid: https://www.youtube.com/watch?v=WpgZKBtW_t8
You should Modify/Add your desired common path in babel.config.js file and then you can easily import any file/class without adding long paths
Here is an example of babel.config.js from one of my project.
module.exports = api => {
api.cache(true);
return {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
'#babel/plugin-proposal-optional-chaining',
'#babel/plugin-proposal-nullish-coalescing-operator',
[
'module-resolver',
{
root: ['./src'],
alias: {
'#routes': ['./src/routes.js'],
'#navigations': ['./src/navigations'],
'#components': ['./src/components'],
'#store': ['./src/store'],
'#images': ['./src/images'], //You can add your source path like this
'#utils': ['./src/utils'],
},
},
],
],
};
};
After adding the source path in babel.config.js you can import the files like this in your class.
import SampleImage from '#images/sampleImage.png'
You can import like this in your any class, No need to do '../../src/image/sampleImage.png'
I'm using storybook in vue.js.
I tried to import my component but it was failed, because Sass which imported in my component made error.
(component which is not importing Sass can imported and displayed.)
so, I check official description and created a .storybook/main.js file to add Sass support.
But i faced a unexpected error, "Require statement not part of import statement" in using storybook" at const path = require('path').
I couldn't find example of this error related storybook, so i'm confusing.
how to solve this error?
I just started using storybook, so i don't know which file info is needed to solve this.
if need other file info, I'll add it.
My main.js
const path = require('path');
// Export a function. Accept the base config as the only param.
module.exports = {
webpackFinal: async ( config ) => {
// Make whatever fine-grained changes you need
config.module.rules.push({
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
include: path.resolve(__dirname, '../'),
});
// Return the altered config
return config;
},
};
official description of using scss in storybook
What is the correct way of loading vuetify into a package that i use in a vuetify project?
When serving projects it all seems to work fine but when i build the project i've got some issues with the css/sass
things i've tried:
With vuetify loader: the css is loaded twice so i can't overwrite sass variables
Without vuetify loader: the package doesn't have the vuetify css, so it looks horrible
Without vuetify loader with vuetify.min.css: the css is loaded twice so i can't overwrite sass variables, and the loaded css is all the css so it's huge
My package is called vuetify-resource, and this is the source code of the index.js (without the vuetify loader) At this point everything works on npm run serve But when i build the package doesn't have "access" to the vuetify css.
import Vue from 'vue';
import Vuetify from 'vuetify';
import VuetifyResourceComponent from './VuetifyResource.vue';
Vue.use(Vuetify);
const VuetifyResource = {
install(Vue, options) {
Vue.component('vuetify-resource', VuetifyResourceComponent);
},
};
export default VuetifyResource;
To solve my issue i had to do a couple of things.
Make peer dependencies of vuetify and vue
add vuetify to the webpack externals, so when someone uses the package, the package uses that projects vuetify
not longer import vue and vuetify in the index.js it's not needed, the project that uses the package imports that
import the specific components that you use in every .vue file
for example:
Vue.config.js
module.exports = {
configureWebpack: {
externals: {'vuetify/lib': 'vuetify/lib'},
},
};
index.js
import VuetifyResourceComponent from './VuetifyResource.vue';
const VuetifyResource = {
install(Vue, options) {
Vue.component('vuetify-resource', VuetifyResourceComponent);
},
};
export default VuetifyResource;
part of the component.vue
import { VDataTable } from 'vuetify/lib';
export default {
name: 'vuetify-resource',
components: {
VDataTable
},
Step 4 in Ricardo's answer is not needed if you use vuetify-loader, it will do the job for you.
And I would modify step 2 to also exclude Vuetify's styles/css from your bundle. If you don't exclude them you can run into styling issues when the Vuetify version differ between your library and your application.
Use a regular expression in vue.config.js like this: configureWebpack: { externals: /^vuetify\// }. That way, only your own styles are included in the library bundle.
BugSnag provides a very useful and initially free product for tracking errors in your vue app. The problem is that there is no documentation for using this in a nuxt app. A plugin would be the best place to utilize it in the app.
Trying to resolve this was killing me for a while but I was able to find help from Patryk Padus from the comments on this post.
For anyone trying to make this happen, do the following:
1.Place the following code inside of a plugin located in the /plugins folder of your application root:
#/plugins/bugsnag.js
import Vue from 'vue'
import bugsnag from '#bugsnag/js'
import bugsnagVue from '#bugsnag/plugin-vue'
const bugsnagClient = bugsnag({
apiKey: 'YOUR-KEY',
notifyReleaseStages: [ 'production', 'staging' ]
})
bugsnagClient.use(bugsnagVue, Vue);
export default (ctx, inject) => {
inject('bugsnag', bugsnagClient)
}
2.Inside of the nuxt.config add the following to your plugins section:
plugins: [
'#/plugins/bugsnag.js',
],
3.Inside of your vue layout reference the bugsnag object using the $bugsnag object:
this.$bugsnag.notify(new Error('Nuxt Test error'))
If you're reading this in January 2021 and using Nuxt v2.x.x and above, the above answer might not work for you.
Here's what I did instead:
import Vue from 'vue'
import bugsnag from '#bugsnag/js'
import BugsnagVue from '#bugsnag/plugin-vue'
const bugsnagClient = bugsnag.start({
apiKey: process.env.BUGSNAG_KEY,
plugins: [new BugsnagVue()], // this is important
})
Vue.use(bugsnagClient) // // this is also important
export default (ctx, inject) => {
inject('bugsnag', bugsnagClient)
}
Tip: Install the #nuxt/dotenv module to be able to use process.env in your plugin.
References:
Bugsnag Vue installation reference
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