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
Related
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)
I have two javascript projects in separate directories within a parent directory and I want both of them to be able to import files from a common directory. The structure looks a bit like this:
- parentDir
- project1
- package.json
- webpack.config.js
- src
- index.js
- project2
- package.json
- webpack.config.js
- src
- index.js
- common
- components
- CommonComponent.vue
- application
- app.js
I'd like both project1's index.js and project2's index.js to be able to import CommonComponent.vue and app.js.
Currently this works if I do:
import CommonComponent from ../../common/components/CommonComponent.vue
However those import paths starts to get very messy and hard to maintain the deeper into each tree we go, with huge numbers of ../s, so I'm trying to find a way of making the imports neater and easier to manage and I came across resolve options in webpack. So I've tried adding this to my webpack.config.js:
resolve: {
modules: [
path.resolve("../common/"),
path.resolve("./node_modules")
]
},
so then the import would look like:
import CommonComponent from "components/CommonComponent.vue"
import app from "application/app"
Importing the plain js file works, but when trying to import the .vue file, webpack throws an error:
ERROR in C:/parentDir/common/components/CommonComponent.vue
Module not found: Error: Can't resolve 'vue-style-loader' in 'C:/parentDir/common/components'
So how can I apply webpack loaders to files imported via resolve.modules?
Note: importing .vue files from within a single project works fine, so my module.rules config is correct.
It turns out the common package needed its own node_modules. That doesn't seem to be the case when importing a file from there directly via its path, but it is when using either resolve.modules or resolve.alias in webpack.
So the answer was to npm init in common and then to npm install all the dependencies and devDependencies needed there. e.g (of course these will depend on the project):
npm install --save vue
npm install --save-dev babel-core babel-loader css-loader less-loader vue-loader vue-template-compiler webpack
Once that's done, both of these webpack configs seem to have the same result as far as I can tell:
resolve: {
modules: [
path.resolve("../../common"),
path.resolve("./node_modules")
]
},
and
resolve: {
alias: {
components: path.resolve("../../common/components")
}
}
Both allow a file in project1 or project2 to do an import like:
import CommonComponent from "components/CommonComponent.vue"
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'm trying to import Tesseract into Angular2 (TypeScript). I can see it saved into the node_modules folder but when using
import { Tesseract } from '#types/tesseract.js';
it says:
[ts] Module '"c:/Users/black/Projects/projectCLI/tess/node_modules/#types/tesseract.js/index"' has no exported member 'Tesseract'.
In the index.d.ts file there is a namespace called Tesseract.
Is there some other way to import this or are we looking at this the wrong way?
I used npm install --save-dev #types/tesseract.js to install typescript Tesseract.
If there are any demo tutorials using tesseract can you please link them here?
thanks, in advance, for your help.
You need to install the actual javascript module:
npm install tesseract.js --save
Also install #types declarations:
npm install #types/tesseract.js --save-dev
Finally do the folowing to import:
import * as Tesseract from 'tesseract.js'
To use the library check here
The #types command saves this type declaration file.
This is a namespace and all the contents of the actual module are declared within.When you do import * as aliasname from tessreact.js, you can use all the functions within the namespace as aliasname.functionname. Example is the test file for the same type declaration file.
Our project is using the webpack resolve.root option to import modules with absolute paths. (avoiding something like ../../../module)
In its current state the project is using babel-loader which works perfectly fine.
My task is to migrate the app to Angular 2.
Therefor I am currently in the process of transitioning to TypeScript.
Somehow it seems like the ts-loader does not work in combination with the resolve.root option of the webpack config.
Example of the webpack.config.js
resolve: {
root: [
path.resolve('./node_modules'),
path.resolve('./app'),
path.resolve('./app/lib'),
]
},
Example of a module import
import AbstractListState from 'states/abstract_list_state';
The states directory is inside the app/lib directory.
Error when executing webpack
ERROR in ./app/mainViews/panel/panel.controller.ts
Module not found: Error: Cannot resolve module 'states/abstract_list_state' in C:\Users\...\Project\app\mainViews\panel
# ./app/mainViews/panel/panel.controller.ts 4:28-65
Pre version 2.0 TypeScript will try to load modules with an absolute path from the node_modules directory. This is because TypeScript's module resultion is per default set to "node". Which means it works like node's require method. So, even if you're using webpack to build your app, TypeScript (and its compiler) will still want to load the files.
In order to let webpack import your modules with absolute path you have to go back and use the require method. This way TypeScript will let webpack import stuff. But of course you will not get any type-inference, autocomplete, ...
Or, you update to the TypeScript 2.0 beta and give this a try: https://github.com/Microsoft/TypeScript/wiki/What%27s-new-in-TypeScript#module-resolution-enhancements-baseurl-path-mapping-rootdirs-and-tracing