Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix webpack transforms for different install methods #830

Merged
merged 2 commits into from
Nov 27, 2019
Merged

Conversation

jameshadfield
Copy link
Member

The directory structure of npm dependencies is different
depending on whether auspice is installed from source, a
global npm install or a project's dependency. E.g. for webpack
to process the font-awesome dependency, then:
Global install & from source: ${__dirname}/node_modules/font-awesome
Project dependency: ${__dirname}/../font-awesome

This bug comes from #826 which specified the first of the above
two scenarios.

Tested with projects using auspice (incl client-side customisations)
via global npm auspice install, auspice as a npm dependency and auspice via npm link <path>

Note that this PR implements a short-term solution. In general, there are a a lot of
complex issues related to npm and using auspice to build custom bundles, including
but not limited to #689. I plan to write up a detailed issue for these shortly.

The directory structure of npm dependencies is different
depending on whether auspice is installed from source, a
global npm install or a project's dependency. E.g. for webpack
to process the `font-awesome` dependency, then:
Global install & from source: `${__dirname}/node_modules/font-awesome`
Project dependency:           `${__dirname}/../font-awesome`

This bug comes from #826 which specified the first of the above
two scenarios.

Tested with projects using auspice (incl client-side customisations)
via global npm auspice isntall, npm dependency and `npm link <path>`
@tsibley
Copy link
Member

tsibley commented Nov 27, 2019

@jameshadfield I think a simpler solution to this is to remove the include condition for file-loader all together:

diff --git a/webpack.config.js b/webpack.config.js
index 8c34bdf3..50b8b2de 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -118,13 +118,7 @@ const generateConfig = ({extensionPath, devMode=false, customOutputPath, analyze
         },
         {
           test: /\.(gif|png|jpe?g|svg|woff2?|eot|otf|ttf)$/i,
-          use: "file-loader",
-          include: [
-            ...directoriesToTransform,
-            path.join(__dirname, 'node_modules/font-awesome'),
-            path.join(__dirname, 'node_modules/leaflet'),
-            path.join(__dirname, 'node_modules/typeface-lato')
-          ]
+          use: "file-loader"
         }
       ]
     }

Not entirely sure why the include was there in the first place, but by removing it, I believe this lets the file-loader process any import which matches the test, not just those within the listed dirs. This seems like fine behaviour.

This is a simplification of the solution implemented
in the previous commit & has been tested in the
following cases:
* normal auspice source build
* custom build using global auspice
* custom build using auspice as dependency
@jameshadfield
Copy link
Member Author

Thanks @tsibley!

@jameshadfield jameshadfield merged commit 916edb0 into master Nov 27, 2019
@jameshadfield jameshadfield deleted the hotfix branch November 27, 2019 20:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants