In my Nuxt js application, I installed i18next:
npm install --save-dev i18next
Then whenever I add it to the plugin array in nuxt.config.js as the documentation suggests:
module.exports = {
build: {
vendor: ['i18next']
}
}
I get this error when I start the sever (npm run dev)
ERROR Nuxt error
Error: Module should export a function: i18next
- module.js:127 ModuleContainer.addModule
[begueradj]/[nuxt]/lib/core/module.js:127:13
- utils.js:96 promise.then
[begueradj]/[nuxt]/lib/common/utils.js:96:43
- next_tick.js:189 process._tickCallback
internal/process/next_tick.js:189:7
- module.js:696 Function.Module.runMain
module.js:696:11
- bootstrap_node.js:204 startup
bootstrap_node.js:204:16
- bootstrap_node.js:625
bootstrap_node.js:625:3
Why does this happen? How to fix it?
The vendor array is used on Nuxt.js 1.x to help Webpack 3 to optimize build. It's not used to import a lib.
(nb: since Nuxt.js 2.x, that vendor config is deprecated and can be removed)
To import an external lib, you have create a custom Vue.js plugin and to declare it in the nuxt.config.js in the plugins array (https://nuxtjs.org/guide/plugins/)
module.exports = {
plugins: ['~/plugins/your-cutom-plugins']
}
or,
you can import your external lib in your component/page/middleware/plugin file to use it directly:
<script>
import i18next from 'i18next'
i18next.init({
...
)
</script>
(nb: prefer use install --save because "i18next" is not only used on dev, but on production too)
Related
I am using React JS and I am building a simple admin login page in MERN stack and using npm packages: jsonwebtoken, react-router-dom, #material-ui/icons.
I am constantly getting a error:
ERROR in ./node_modules/jwa/index.js 5:13-30
Module not found: Error: Can't resolve 'crypto' in '/home/dell/Desktop/Coding/photography/photo-gallery/node_modules/jwa'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
- install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "crypto": false }
Similar to this question, you need to find your webpack config, add the fallback config, and npm install crypto-browserify.
I'm very new to nuxt and javascript and I'm trying to figure out how to use my app's dependencies client-side. I have them listed in my nuxt.config.js and installed with npm. I also have a file in the /plugins directory that imports them (not sure if this is good or not). Here is where I run into trouble: I have two scripts located in my /static directory that need to take advantage of my npm packages. Putting an import statement in those scripts causes an error. Importing the packages in the script section of the page vue file also doesn't work. How can I use npm packages in scripts that are included in pages client-side?
Can you provide a more information, about which kind of error is happening and which kind of packages did you try to install?
In this example I am going to show you how I included in my nuxt project npm package vuelidate
after installing vuelidate:
add to nuxt.config.js
plugins: [
{ src: "~/plugins/vuelidate", mode: "client" },
],
create vuelidate.js file in my plugin folder (plugin/vuelidate.js)
import Vue from 'vue'
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate);
after that I can use vuelidate in my .vue components (no always necessary to import something because in our 2 stage Vue.use(Vuelidate) we already installed vuelidate globally)
<script>
import { required, minLength } from "vuelidate/lib/validators";
export default {
name: "OrderByLinkForm",
components: {},
...
};
</script>
i'm new to VueJS CLI webpack.
I want to globally include my javascript files.
my main.js:
require('./assets/css/main.css');
require('./assets/js/vendor/jquery-2.2.4.min.js');
require('./assets/js/vendor/TweenMax.min.js');
require('./assets/js/vendor/device.min.js');
require('./assets/js/functions.js');
In functions.js i'm using functions from all of the libraries(jquery,device.js...)
I get the error:
Uncaught ReferenceError: TweenMax is not defined
...
Why cant i use the libraries in functions.js ? i'm confused.
Thanks in advance
That doesn't work because of how vue and webpack handle assets and static files.
Usually you would just install your module via npm like:
npm install gsap --save
That's for TweenMax you tried to use. You'll find it on npm here.
Then in the .vue file where you want to use it, you would just import and use it:
<script>
import {TweenMax} from 'gsap'
export default {
methods: {
myMethod () {
TweenMax.to()
}
}
}
</script>
If you want to use them in several components you could consider adding them as instance properties. Then you don't have to import them manually all the time.
I would like to use the dat.GUI library for a project that's build with Webpack 2. If I install the module via npm -install --save-dev dat.gui and then try to import it using import * as DAT from 'dat.gui'; I get the following error when Webpack is trying to compile my project:
ERROR in ./~/dat.gui/src/dat/controllers/NumberControllerSlider.js
Module not found: Error: Can't resolve 'style' in
'/home/me/myProject/node_modules/dat.gui/src/dat/controllers'
BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix
when using loaders.
I know this error occurs when using Webpack 2 to build Webpack 1 based projects. But why is Webpack even trying to build the module if there already is a build version inside node_modules/dat.gui/build';? Is there a way to tell Webpack or NPM to use the existing build version without trying to re-build it?
When importing a node module, webpack looks into its package.json and uses the main field as entry of the module, similar to what Node.js does (webpack looks for more fields by default, see resolve.mainFields).
Since for dat.gui the main field does not point to the built version but to the source, which actually inlines loaders as seen in dat.gui#0.6.1 - NumberControllerSlider.js for the styleSheet import, and that is not a good idea in general and certainly not to publish.
But you can import the built version by specifying the corresponding path. So your import would be:
import * as DAT from 'dat.gui/build/dat.gui.js';
If you'd like to still import just dat.gui you can configure resolve.alias to point to the built version as follows:
resolve: {
alias: {
'dat.gui': 'dat.gui/build/dat.gui.js'
}
}
With that you can use your original import statement:
import * as DAT from 'dat.gui';
I want import nools in my project with webpack, and I try in 2 steps :
1) install nools with npm :
npm install nools --save
2) import nools in to the project :
import "../node_modules/nools";
webpack give me this error :
Can not resolve 'fs'
and solve this error with add this code to webpack.config.js
target:node
and webpack build without any error , but when start my project with npm start ,browser console give me this error :
require is not defined
my problem is how to import nools with webpack
It looks like nools needs the fs module to read a file from disk if a file path (rather than the source string itself) is passed to nools.compile().
Assuming your browser-based usage of nools in your webpack project never passes a *.nools string to nools.compile(), then fs.readFileSync() is never called, so you can force webpack to resolve require('fs') to an empty object by adding this to your webpack config:
node: {
fs: 'empty'
}
See webpack's documentation of the node options: 1.x / 2.x