I am using the webpack dllplugin for my dev configurations in my react project. I found out that two of my files are not getting updated on changes. I found out that this was caused because they are added to the dll manifest. Below is my dll webpack config file and the manifest that is created after I run the below command :
cross-env BUILDING_DLL=true webpack --display-chunks --color --config internals/webpack/webpack.dll.babel.js --hide-modules.
webpack.dll.babel.js:
const path = resolve('../node_modules/react-boilerplate-dlls');
const outputPath = path.join(process.cwd(), path);
var entry = { reactBoilerplateDeps:
[ 'babel-polyfill',
'fontfaceobserver',
'history',
'hoist-non-react-statics',
'immutable',
'intl',
'invariant',
'lodash',
'prop-types',
'query-string',
'react',
'react-dom',
'react-helmet',
'react-intl',
'react-loadable',
'react-redux',
'react-router-dom',
'react-router-redux',
'redux',
'redux-immutable',
'redux-saga',
'reselect',
'styled-components',
'warning',
'whatwg-fetch',
'core-js',
'eventsource-polyfill' ] }
module.exports = require('./webpack.base.babel')({
context: process.cwd(),
entry: entry,
devtool: 'eval',
output: {
filename: '[name].dll.js',
path: outputPath,
library: '[name]',
},
plugins: [
new webpack.DllPlugin({
name: '[name]',
path: join(outputPath, '[name].json'),
}),
],
performance: {
hints: false,
},
});
reactBoilerplateDeps.json:
{
"name": "reactBoilerplateDeps",
"content": {
.....,
"./app/utils/request.js": {
"id": "./app/utils/request.js",
"meta": {
"harmonyModule": true
},
"exports": [
"default"
]
},
"./node_modules/exports-loader/index.js?self.fetch!./node_modules/whatwg-fetch/fetch.js": {
"id": "./node_modules/exports-loader/index.js?self.fetch!./node_modules/whatwg-fetch/fetch.js",
"meta": {
}
},
"./app/env.js": {
"id": "./app/env.js",
"meta": {
"harmonyModule": true
},
"exports": [
"default"
]
},
"./node_modules/core-js/shim.js": {
"id": "./node_modules/core-js/shim.js",
"meta": {
}
},
.....
}
}
I don't understand why the app\utils\request.js and app\env.js files are added in the manifest file and what HarmonyModules : true signifies.
Any help is appreciated. Thank you :)
Related
I am building an app with React Native and using Expo CLI. I am having a problem with missing assets once the app is built and testing on test flight. I am getting the error below. I have read through the documents on react native and expo and I cannot seem to figure out the problem. Also attached is my app.json and the metro.config.js files.
It looks like that you are using a custom metro.config.js that does not extend #expo/metro-config.
This can result in unexpected and hard to debug issues, like missing assets in the production bundle.
We recommend you to abort, fix the metro.config.js, and try again.
app.json
{
"expo": {
"name": "Unfiltered",
"slug": "unfiltered-with-kiran",
"version": "1.0.5",
"orientation": "portrait",
"icon": "./assets/icon.png",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true,
"bundleIdentifier": "blahblahblah",
"buildNumber": "1"
},
"android": {
"versionCode": 2,
"adaptiveIcon": {
"foregroundImage": "./assets/adaptive-icon.png",
"backgroundColor": "#FFFFFF"
},
"package": "blahblahblah"
},
"web": {
"favicon": "./assets/favicon.png"
}
}
}
metro.config.js
const { getDefaultConfig } = require('expo/metro-config');
module.exports = (async () => {
const {
resolver: { sourceExts, assetExts },
} = await getDefaultConfig(__dirname);
return {
resolver: {
assetExts: [
...assetExts,
'png',
'jpg',
'jpeg',
'gif',
'svg',
'ttf',
'otf',
'woff',
'woff2',
],
sourceExts: [
...sourceExts,
'cjs',
'jsx',
'ts',
'tsx',
'mjs',
'md',
'mdx',
],
},
};
})();
I finally found the answer, I had to add the transformer and assetPlugins.
transformer: {
assetPlugins: ['expo-asset/tools/hashAssetFiles'],
},
I have been trying to determine what has changed doing this update that would cause the icons to no longer render correctly. I do not receive any errors in the browser, but I see that it is no longer trying to load the font file (previously was /packs/media/fonts/element-icons-xxx.woff)
The manifest.json contains an entry for the file:
"media/fonts/element-icons.woff": "/packs/media/fonts/element-icons-313f7dac.woff",
I have compared the generated webpack.config.js and see very few changes:
"output.pathinfo: true" has been removed
""cache": true," has been removed
under ""loader": "sass-loader"" the following has been added under "options":
"sassOptions": {
"includePaths": []
}
under "plugins" a ""logger": {}," has been added above ""pathCache": {},"
The theme is currently being loaded via babel.config.js under plugins:
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
But I have also tried importing it in the main entrypoint with:
import 'element-ui/lib/theme-chalk/index.css';
with the same result.
I have added in the 'resolve-url-loader' as recommended in some posts:
environment.loaders.get('sass').use.splice(-1, 0, {
loader: 'resolve-url-loader'
});
Which places it right above the 'sass-loader':
{
"key": "sass",
"value": {
"test": {},
"use": [
"/Users/tom/LGL_DEV/lgl/node_modules/#rails/webpacker/node_modules/mini-css-extract-plugin/dist/loader.js",
{
"loader": "css-loader",
"options": {
"sourceMap": true,
"importLoaders": 2,
"modules": false
}
},
{
"loader": "postcss-loader",
"options": {
"config": {
"path": "/Users/tom/LGL_DEV/lgl"
},
"sourceMap": true
}
},
{
"loader": "resolve-url-loader"
},
{
"loader": "sass-loader",
"options": {
"sourceMap": true,
"sassOptions": {
"includePaths": []
}
}
}
],
"sideEffects": true,
"exclude": {}
}
},
Thoughts?
Update: I have incrementally updated webpacker to see where this breaks:
4.2.2: element-icons load just fine.
4.3.0: element-icons load just fine.
5.0.0: not loading element-icons.
webpack version didn't change
mini-css-extract-plugin changed from 0.8.2 to 0.9.0
file-loader changed from 4.3.0 to 5.1.0
5.0.1: not loading element-icons.
I created react app by using create-react-app and 2 days ago i run npm run eject follows by i added #svgr/webpack
into project it was working perfectly at the time. I just get back to do some undone work, but when i run yarn start the error it's showed in the command:
options/query provided without loader (use loader + options) in {
"test": [
{},
{},
{},
{},
{}
],
"use": [
"#svgr/webpack",
"url-loader"
],
"options": {
"limit": 10000,
"name": "static/media/[name].[hash:8].[ext]"
}
}
follow the error message i change webpack.config.js to
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.svg$/],
loader: ['#svgr/webpack', 'url-loader'],
options: {
limit: imageInlineSizeLimit,
name: 'static/media/[name].[hash:8].[ext]',
},
},
it then shows
options/query cannot be used with loaders (use options for each array item) in {
"test": [
{},
{},
{},
{},
{}
],
"loader": [
"#svgr/webpack",
"url-loader"
],
"options": {
"limit": 10000,
"name": "static/media/[name].[hash:8].[ext]"
}
}
Anybody have the workaround to solve this problem.
Github issues
Try changing your configuration to
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.svg$/],
use: [{
loader: '#svgr/webpack',
options: {
limit: imageInlineSizeLimit,
name: 'static/media/[name].[hash:8].[ext]',
}
},
{
loader: 'url-loader'
}]
},
Trying to set up some testing in a typescript project. For some reason, though, I'm getting a 404 on the spec file (even though I can see the path is correct). Is there something I'm missing in my Karma configuration file?
module.exports = function(config) {
config.set({
basePath: ".",
frameworks: ["jspm", "jasmine"],
reporters: ["progress"],
browsers: ["PhantomJS"],
files: [
],
proxies: {
"/test/": "/base/test/",
"/src/": "/base/src/"
},
jspm: {
stripExtension: false,
loadFiles: [
"test/**/*.ts"
],
serveFiles: [
"src/**/*.ts"
]
},
preprocessors: {
"**/*.ts": ["typescript"]
},
typescriptPreprocessor: {
options: {
noResolve: false,
module: 'amd'
},
transformPath: function(path) {
return path.replace(/\.ts$/, '.js');
}
}
});
}
Or my config.js file?
System.config({
transpiler: "typescript",
paths: {
"github:*": "jspm_packages/github/*",
"npm:*": "jspm_packages/npm/*"
},
map: {
"typescript": "npm:typescript#1.8.10",
"github:jspm/nodelibs-os#0.1.0": {
"os-browserify": "npm:os-browserify#0.1.2"
},
"npm:os-browserify#0.1.2": {
"os": "github:jspm/nodelibs-os#0.1.0"
},
"npm:typescript#1.8.10": {
"os": "github:jspm/nodelibs-os#0.1.0"
}
}
});
I had the same sort of issue except wasn't using the typescript-preprocessor as I wanted JSPM to handle that.
See my question at Karma + JSPM + Typescript - not found '.ts.js' and the repo at https://github.com/Larchy/karma-jspm-typescript-coverage
Basically added a duplicate package to my jspm config to support karma serving at a higher level
"app": {
"main": "app",
"format": "system",
"defaultExtension": "ts",
"meta": {
"*.ts": {
"loader": "ts"
}
}
},
"src/app": {
"main": "app",
"defaultExtension": "ts",
"meta": {
"*.ts": {
"loader": "ts"
}
}
}
and added proxies to karma config, as you already have:
proxies : {
"/base/jspm_packages" : "/base/src/jspm_packages"
},
I am getting an error on bundling my aurelia app.
Error is : Unable to calculate canonical name to bundle file
‘///twenty/two/2/.js’
Following is my Config.js content
"baseURL": "/src/",
"defaultJSExtensions": true,
"transpiler": "babel",
"babelOptions": {
"optional": [
"runtime",
"optimisation.modules.system",
"es7.decorators",
"es7.classProperties"
]
},
"paths": {
"*": "*",
"github:": "jspm_packages/github/",
"npm:": "jspm_packages/npm/",
"resources/": "resources/",
"account/": "account/",
"activity/": "activity/",
"dashboard/": "dashboard/",
"feedback/": "feedback/",
"home/": "home/",
"orders/": "orders/",
"shared/": "shared/",
"user/": "user/"
},
Following is the build/bundles.json
{
"bundles": {
"dist/app-build": {
"includes": [
"[*/**/*]",
"[*/**/*.html!text]",
"[*/**/*.css!text]"
],
"excludes": [],
"options": {
"inject": true,
"minify": true
}
},
"dist/aurelia": {
"includes": [
"aurelia-animator-css",
"aurelia-auth",
"aurelia-binding",
"aurelia-bootstrapper",
"aurelia-breeze",
"aurelia-dependency-injection",
"aurelia-dialog",
"aurelia-event-aggregator",
"aurelia-framework",
"aurelia-history",
"aurelia-history-browser",
"aurelia-http-client",
"aurelia-i18n",
"aurelia-loader",
"aurelia-loader-default",
"aurelia-logging",
"aurelia-metadata",
"aurelia-path",
"aurelia-route-recognizer",
"aurelia-router",
"aurelia-task-queue",
"aurelia-templating",
"aurelia-templating-binding",
"aurelia-templating-resources",
"aurelia-templating-router",
"aurelia-validation",
"babel",
"bootstrap",
"breeze",
"core-js",
"css",
"font-awesome",
"i18next",
"jquery",
"moment",
"ms-signalr-client",
"text",
"toastr"
],
"options": {
"inject": true,
"minify": true,
"rev": true
}
}
}
}
Please help me to figure out what is wrong.