Reputation: 495
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?
Upvotes: 3
Views: 751
Reputation: 32992
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 [email protected] - 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';
Upvotes: 4