I'm implementing a Hot Module Replacement with Webpack in my project, which uses Node(v4.4.4)/Hapi(v8.0.0) as a server. The way I thought I could get it working was by using a plugin in my server file, which is shown below:
`var compiler = new require('webpack')(webpackConfig.default);
var assets = { noInfo: false, publicPath: webpackConfig.default.output.publicPath };
var hot = { reload: true, noInfo: true };`
server.register({
register: require('hapi-webpack-plugin'),
options: {
compiler, assets, hot
}
},function(error) {
if (error) {
return console.error(error);
}
server.start(function() {
if (process.env.CONFIG_WINSTON === 'on') {
logger.info('Hapi', server.version, server.info.uri);
} else {
console.log('Hapi', server.version, server.info.uri);
}
});
});`
In my webpack.config.js, I'm using my entry like this:
entry: [
'webpack-hot-middleware/client?http://localhost:8080&reload=true',
'./webpack_common/src/scripts/main.js',
],
I have also added this plugin in my webpack.config.js:
new webpack.HotModuleReplacementPlugin(),
And finally I have already installed the packages:
"webpack": "^2.2.1",
"webpack-dev-middleware": "^1.10.1",
"webpack-dev-server": "^2.4.4",
"webpack-hot-middleware": "^2.17.1",
"hapi-webpack-plugin": "^2.0.0",
With all this setup, I could get my HMR working fine with Sass, which means, it is rebuilding and updating my browser. However, when I change any javascript, I see log messages saying everything went well (the bundle was rebuilt),
`
[HMR] bundle rebuilding client.js?4b20:207
[HMR] bundle rebuilt in 11952ms process-update.js:27
[HMR] Checking for updates on the server... process-update.js:100
[HMR] Updated modules:
A list of updated modules comes here...
[HMR] App is up to date.`
but I don't see any updates in my browser. If I manually refresh my browser, than the updates display fine. I tested with Chrome, Firefox and Safari, but none of them seems to work. I have searched through many other questions in foruns, but with no luck. Anyone has any clue on what I may need to do?
Related
I used to solve similar errors while I was using Jest with only JavaScript, but currently I'm not able to do so with Typescript.
All my tests were running fine until I installed Puppeteer which requires #types/jest-environment-puppeteer, #types/puppeteer and #types/expect-puppeteer.
After installing them, puppeteer tests are running perfectly, but other tests started to fail with below error.
D:\...\api\node_modules\uuid\dist\esm-browser\index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export { default as v1 } from './v1.js';
^^^^^^
SyntaxError: Unexpected token 'export'
at Runtime.createScriptFromCode (../node_modules/jest-runtime/build/index.js:1796:14)
at Object.require (../node_modules/#nestjs/common/decorators/core/injectable.decorator.js:4:16)
WHAT I DID?
allowJs: true on tsconfig.json and set the transformIgnorePatterns on jest configs. So that jest can compile files from node_modules/
After that this error stopped but test failed for another strange reason.
And worse is that test start time have increased too much.
So I left allowJs as in original setup and updated jest config from
"transform": {
"^.+\\.(t|j)s$": "ts-jest"
}
to
"transform": {
"^.+\\.(t)s$": "ts-jest"
}
So currently ts-jest doesnt compile js files. But I think I am not able to make babel pick the transformation for js files. These are my jest configs:
{
"moduleFileExtensions": ["js", "json", "ts"],
"rootDir": ".",
"testEnvironment": "node",
"testRegex": ".e2e-spec.ts$",
"transform": {
"^.+\\.(t)s$": "ts-jest",
"^.+\\.(js|jsx)$": "babel-jest"
},
"transformIgnorePatterns": ["<rootDir>/node_modules/.+.(js|jsx)$"]
}
Thanks to this reply:
https://stackoverflow.com/a/54117206/15741905
I started googling for similar fixes and ended up here:
https://github.com/uuidjs/uuid/issues/451
And this solved my problem: https://github.com/uuidjs/uuid/issues/451#issuecomment-1112328417
// jest.config.js
{
//................
moduleNameMapper: {
// Force module uuid to resolve with the CJS entry point, because Jest does not support package.json.exports. See https://github.com/uuidjs/uuid/issues/451
"uuid": require.resolve('uuid'),
}
}
Tough I would still be happy if there is solution to this by using jest-babel.
Because I had to carry jest configs from package.json to a seperate .js file.
Edit:
According to this github issue compatibility issue has been solved with the latest release of the uuid library.
Simply adding moduleNameMapper:{"^uuid$": "uuid"} into my jest.config.js fixed the issue for me:
transient dependency uuid: ^8.3.2
jest: 28.1.3
angular: 14.0.1
Upgrade to uuidv4() version 9.0.0 ("uuid": "^9.0.0") now fixes the the issue. See comment from SimenB: https://github.com/uuidjs/uuid/issues/451#issuecomment-1377099565
I tried the answer above initially, adding moduleNameMapper:{"^uuid$": "uuid"} into my jest.config.js, which fixed the issue for me. Then I followed the link (above) to read more and I saw that it has been fixed in "uuid": "^9.0.0".
So I took out the fix, installed latest uuidv4() at version 9.0.0, (package link below) and it started working fine again. No more errors and tests are running fine, again. https://www.npmjs.com/package/uuid
My React App started having the issues after updating "jest": "26.0.1" to "jest": "29.4.1", "environment-jsdom-fifteen": "1.0.2" to "jest-environment-jsdom": "29.4.1". along with other updates "ts-jest": "26.5.6" to "ts-jest": "^29.0.5". However, as mentioned above, upgrading to uuid version 9.0.0 has fixed it.
Date : 2/15/2023
Jest Version : "#types/jest": "^29.4.0",
UUID Version : "uuid": "^9.0.0"
using the jest.config.ts will generate an error that says
Multiple configurations found
here's how you can override that
/**
* #format
*/
import 'react-native';
import React from 'react';
import App from '../src/App';
import {v4 as uuidv4} from 'uuid';
// Note: test renderer must be required after react-native.
import renderer from 'react-test-renderer';
it('renders correctly', () => {
renderer.create(<App />);
});
jest.mock('uuid', () => {
return {
v4: jest.fn(() => 1)
}
})
Hoping this will solve other peoples error if the correct answer is not working for you :).
adding this to the package.json file solved it for me:
"devDependencies": {
....
},
"browser": {
"uuid": "./node_modules/uuid/dist/esm-browser/index.js"
}
I have an application built and watched with webpack in development mode, in that project I dynamically require modules in folders in other projects that are outside the scope. I'd like to watch these folders and trigger a recompile if they change (or a new file is added). I've found some information and this npm package but nothing seems to work with webpack 4. I'm now down to the code below for my webpack.dev.js which I think should work but doesn't recompile on changes.
module.exports = merge(common, {
mode: 'development',
devtool: 'source-map',
plugins: [
function (compiler) {
compiler.hooks.afterCompile.tapAsync('WatchDecorators', (compilation, callback) => {
projectDecoratorPaths.forEach(decoratorFolder => {
compilation.contextDependencies.add(decoratorFolder);
});
callback();
});
}
]
});
The projectDecoratorPaths is an array of folders that look like projectName/src/js/folder/*.js. but when I change a file in one of those folders or add a file nothing happens in watch. What am I doing wrong?
EDIT: Or how else can I get this to work?
EDIT: I've now found webpack-watch-files-plugin which should work with webpack 4 and seems well used and maintained, but even when it confirms it's watching the exact external files it still doesn't recompile on change. I'm not using Hot Module Replacement, code below.
plugins: [
new WatchExternalFilesPlugin({
files: projectDecoratorPaths,
verbose: true
})
]
I'm playing with Vue CLI project. I have configured startup project, set some development changes like those:
package.json
"dependencies": {
"bootstrap": "^4.3.1",
"core-js": "^3.0.1",
"preload-it": "^1.2.2",
"register-service-worker": "^1.6.2",
"vue": "^2.6.10",
"vue-router": "^3.0.3",
"vuetify": "^1.5.14",
"vuex": "^3.1.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.7.0",
"#vue/cli-plugin-pwa": "^3.7.0",
"#vue/cli-service": "^3.7.0",
"fontello-cli": "^0.4.0",
"node-sass": "^4.9.0",
"sass-loader": "^7.1.0",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"vue-cli-plugin-vuetify": "^0.5.0",
"vue-template-compiler": "^2.5.21",
"vuetify-loader": "^1.2.2"
}
vue.config.js
module.exports = {
configureWebpack: {
devtool: process.env.NODE_ENV === 'development'
? 'inline-source-map'
: false,
},
css: {
sourceMap: process.env.NODE_ENV === 'development'
}
}
babel.config.js
module.exports = {
presets: [
[
'#vue/app',
{ useBuiltIns: 'entry' }
]
]
}
But sourcemaps to vue files are still generated wrongly (to scss files works ok).
After clicking href to vue component
Note:
lot of versions of same file in webpack://./
only part that is in tag is visibile in source editor (maybe this is a cause)
file from mounted filesystem workspace is not used
And this is how original file looks like - it is possible to edit it via Chrome devtools
Is it possible to fix that so also element inspector tab (style) will provide proper source target?
EDIT 1
Simplest setup:
Install Vue CLI (3.7)
Add my vue.config.js (to enable sourcemaps)
Run npm run serve
EDIT 2
Same for Vue CLI 3.5
I also created repo with test project, but like I wrote it is just startup project with my config.
https://github.com/l00k/vue-sample
EDIT 3
Vue-cli github issue
https://github.com/vuejs/vue-cli/issues/4029
So far I did not found solution - at least using Vue CLI.
But I have found workaround.
But first of all - whole problem is not about Vue CLI but it is something with vue-loader-plugin IMO. I think so because while using clean setup with vue and webpack I also see that problem.
I have found out that it is related to wrong sourcemap generated for those parts of Vue file and
Source for those part is strip to only content of those tags. That is probably why browser could not map it to source. Also path to source file in sourcemap is wrong.
I have prepared additional loader for webpack which fixes those sourcemaps.
Check sm-fix-loader in repo below.
I dont know does it fix all issues, but at least in my cases it works awesome.
What works ok:
Build NODE_ENV=development webpack
SCSS inline (in vue file) and in separate file <style src="...">
TS / JS inline (in vue file) and in separate file <script src="...">
HRM NODE_ENV=development webpack-dev-server --hotOnly
SCSS inline (in vue file) and in separate file <style src="...">
It also reloads styles without reloading page itself :D
TS / JS inline (in vue file) and in separate file <script src="...">
Repo with working example:
https://github.com/l00k/starter-vue
Step by step solution:
Enable css sourcemaps in vue.config.js:
module.exports = {
css: {sourceMap: true},
Move all scss from components to separate files, collate them in index.scss and import index.scss via App.vue. This will solve lots of problems with vue-css-sourcemaps (caused by Webpack, Devtools and vue-cli), and somewhat simplify your workflow. If you need scoping, scope manually via #selectors (Importing SCSS file in Vue SFC components without duplication with Webpack)
To go further, you may need to set up CSS extraction for node_modules only, as another mysterious bug ruins styling as soon as you touch any css in devtools:
devtool: 'cheap-source-map',
plugins: process.env.NODE_ENV === 'development' ?
([new MiniCssExtractPlugin()]) : [],
module: {
rules: [
process.env.NODE_ENV === 'development' ?
(
{
// test: /node_modules/,
test: /node_modules\/.+\.scss/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
importLoaders: 2,
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
plugins: () => [require('autoprefixer')],
sourceMap: true
}
},
{
loader: 'sass-loader',
options: {sourceMap: true}
}
]
}) : {}
],
}
If you extract all css, you'll loose hmr (hot module reloading = reload on edit), but since you don't really edit scss in your node_modules, you extact only them.
All in all, this fixed all vue css-related sourcemap issues with Devtools and enabled hot-editing right in browser.
I'm making a simple snapshot test with Jest and just get this error:
home.test.js
import React from 'react';
import Home from './index';
import renderer from 'react-test-renderer';
it('renders home', ()=> {
const view = renderer.create(
<Home></Home>
).toJSON();
expect(view).toMatchSnapshot();
});
Unfortunately I don't have idea what is the problem here. I thought the test is well written.
Any help would be great.
HOW I SOLVED THE ERROR KEEPING MY TEST FROM RUNNING
Ran into this error, which kept my tests from running
Error Page
After many hours of frustration, in which I deleted the node_modules folder twice and reinstalled and scoured through Stackoverflow and Google without any solution, I decided to create a new CRNA project and see if it would have the same issues.
When I saw the issues didn’t exist in the new repo, I used the following steps to get it to work:
Delete the node_modules folder again
Upgraded my package.json file, with the key changes shown below:
```
{
"devDependencies": {
"react-native-scripts": "1.5.0",
"jest-expo": "^21.0.2",
"react-test-renderer": "16.0.0-alpha.12"
},
"jest": {
"preset": "jest-expo",
"transformIgnorePatterns": [
"node_modules/(?!react-native|expo|react-navigation|native-base-shoutem-theme|#shoutem/theme|#shoutem/animation|#shoutem/ui|tcomb-form-native)"
]
},
"dependencies": {
"react-native": “0.48.4”,
"expo": "^21.0.2",
"react": "16.0.0-alpha.12"
},
3. The core difference was in upgrading react-native from 0.48.0 to 0.48.4; react-native-scripts from 1.2.1 to 1.5.0 and including the transformIgnorePatterns under the jest option.
NOTE: The portion from *native-base* in the transformIgnorePatterns was included because I used NativeBase in the project.
4. I then added a .babelrc with the following details:
{
"presets": ["babel-preset-expo"],
"env": {
"development": {
"plugins": ["transform-react-jsx-source"]
}
}
}
```
5. Running the tests now give me the result:
Passing Tests
All tests are green
I wanted to try out Brunch and am having some trouble getting my compiled JS files to execute in the browser.
The file gets compiled and loaded by the page into the browser. If I stick an alert or a console log in the source files and do a build, then nothing happens when I load the page.
If I edit the file manually and put a console log or an alert into it then it works just fine.
Does anyone have any ideas? I feel like I'm probably just missing something silly.
This is what I have in my brunch config file
exports.paths = {
watched: ['client'],
}
exports.files = {
javascripts: { joinTo: 'javascripts/app.js' },
stylesheets: { joinTo: 'stylesheets/app.css' }
}
exports.plugins = {
sass: {
options: {
includePaths: ['node_modules/foundation-sites/scss']
}
}
}
I have the following brunch plugins in my package.json
"babel-brunch": "^6.1.1",
"clean-css-brunch": "^2.10.0",
"sass-brunch": "^2.10.4",
"uglify-js-brunch": "^2.10.0"
are you requiring the build in your html?
see below:
<script src="app.js"></script>
<script>require('initialize')</script>
by default brunch.io registers everything into commonjs modules. It then registers a "initialize" module to bootstrap the app and start everything.