I have been using the ‘alexwine:bootstrap-4’ and ‘fortawesome:fontawesome’ Atmosphere packages.
Upon updating from 1.6.0 to 1.6.1 I began getting new console warnings:
DevTools failed to parse SourceMap: http://localhost:3000/packages/popper.js.map
DevTools failed to parse SourceMap: http://localhost:3000/bootstrap.css.map
I am assuming the cause is the change in the 1.6.1 release in the standard-minifier-css to postcss, from the older css-parse and css-stringify packages.
I have wanted to move bootstrap and font-awesome over to NPM so I removed the ‘alexwine:bootstrap-4’ and ‘fortawesome:fontawesome’ Atmosphere packages and began NPMing:
npm install --save bootstrap
npm install --save jquery
npm install --save popper.js
npm install --save font-awesome
Now to get these into the project I added a few lines to
\imports\startup\client\index.js :
import 'font-awesome/css/font-awesome.css';
import 'bootstrap/dist/css/bootstrap.css';
import $ from 'jquery';
import 'bootstrap';
Meteor.startup(() => {
render(<App />, document.getElementById('react-root'));
$('[data-toggle="tooltip"]').tooltip(); //Enable Bootstrap ToolTips Everywhere
});
Bootstrap renders and the ToolTips work! Unfortunately I still was getting the SourceMap warnings, and I was now also getting font errors.
Failed to decode downloaded font: http://localhost:3000/fonts/fontawesome-webfont.woff2?v=4.7.0
OTS parsing error: invalid version tag
Failed to decode downloaded font: http://localhost:3000/fonts/fontawesome-webfont.woff?v=4.7.0
OTS parsing error: invalid version tag
Failed to decode downloaded font: http://localhost:3000/fonts/fontawesome-webfont.ttf?v=4.7.0
OTS parsing error: invalid version tag
To resolve the original warnings I copied the map files files into the public folder.
node_modules\bootstrap\dist\css\bootstrap.css.map to public
node_modules\popper.js\dist\popper.js.map to public\packages
To resolve the font errors I copied the font-awesome fonts folder into the public folder.
node_modules\font-awesome\fonts to public\fonts
I have added NPM scripts to automate this :
"scripts": {
"start": "meteor",
"copy-font-awesome-fonts": "xcopy node_modules\\font-awesome\\fonts public\\fonts /s /y",
"copy-bootstrap-sourcemap": "xcopy node_modules\\bootstrap\\dist\\css\\bootstrap.css.map public /y",
"copy-popper-sourcemap": "xcopy node_modules\\popper.js\\dist\\popper.js.map public\\packages /y"
},
I also added a few lines to the .gitignore :
public/fonts
public/packages
public/bootstrap.css.map
This has resolved all of the console messages, but I don’t feel that this is the most correct solution.
It feels like the build tool should pull these in automatically, yes?
I am hoping someone here knows the most correct resolution to this.
Thanks, Tim
