By default Storybook uses babel-loader, but the current version of babel-loader is incompatible to the one Storybook requires. So I decided to use awesome-typescript-loader instead. That is, my project uses babel-loader and Storybook uses awesome-typescript-loader.
I added the webpack.config.js file:
module.exports = ({ config }) => {
config.module.rules.push({
test: /\.(ts|tsx)$/,
use: [
{
loader: require.resolve('awesome-typescript-loader'),
},
],
});
config.resolve.extensions.push('.ts', '.tsx');
return config;
};
but Storybook still insist to load babel-loader.
ERR! Error: Cannot find module 'babel-loader'
How can I set up an alternative loader?
Try with #next version, there was a fix 5 days ago that solves it by skipping babel loader check.
This is how to run the init command with the #next version:
npx -p #storybook/cli#next sb init
Additionally, if you haven't already, clean up babel-loader from package.json, remove npm lock file, and re-run npm install.
Be aware #next is not the stable version, and this is not completely ideal, but if you are interested keep following the conversation
Related
Im on a M1 apple, so node-sass wont work for me. Every site I work on, I uninstall node-sass and install sass( also change nvm use 16.2.0 if anyone has that issue).
this has always worked, but today after doing so I get the following errors
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
Error: Cannot find module 'node-sass'
So I went into node_modules/sass-loader/lib/loader.js and found this on line 46
const render = getRenderFuncFromSassImpl(options.implementation || require("node-sass"));
and changed it to
const render = getRenderFuncFromSassImpl(options.implementation || require("sass"));
Everything works, css is compiled.. but what I did seems like a hack,
Is there a better way to do it?
Will this break things in future?
Why didn't it update automatically like the other 20 sites I work on?
You can set the implementation of sass-loader in your package.json so it will use value of options.implementation instead of require("node-sass"):
module.exports = {
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
"style-loader",
"css-loader",
{
loader: "sass-loader",
options: {
// Prefer `dart-sass`
implementation: require("sass"),
},
},
],
},
],
},
};
As for your third question, the doc states that:
By default the loader resolve the implementation based on your dependencies. Just add required implementation to package.json (sass or node-sass package) and install dependencies.
Maybe you still have node-sass listed as a dependency?
I struggled with the same problem. What ended up working was to delete package-lock.json and install everything again.
I'm trying to do a very simple test using mocha (no config files, no additional flags, just mocha, yarn2, and testee.js file), but it always give me 0 passing. Hell, it won't even run any file!
// testee.js
console.log('test') // No output
describe('something', () => {
it('Should run', () => {
console.log('test 2') // No output either
})
})
$ yarn mocha testee.js
0 passing (1ms)
Tools I'm using:
Mocha 9.0.2
Yarn Berry 2.4.2
Is mocha unsupported by Yarn 2? Should I use something else? I always use mocha for all of my test files, maybe it's time to migrate if that really is the case.
Note: I tried using yarn 1 and it worked flawlessly. Also, Mocha found the testee.js file, otherwise it would give me not found error instead of 0 passing
Mocha 9 uses ESM-first approach to imports
https://github.com/mochajs/mocha/releases/tag/v9.0.0
Yarn 2+ with the default PnP install scheme does not support ESM yet, because Node API lacks some features to make this possible
For the time being, if you want to use Mocha 9, you have to use node_modules install scheme with Yarn 2+ by changing your config to:
.yarnrc.yml
nodeLinker: node-modules
...
and running yarn to reinstall your project with node_modules
You can track ESM support for Yarn PnP here:
https://github.com/yarnpkg/berry/issues/638
I am using yarn 2 and react with webpack.
In my package is "typescript": ... defined. Once I start yarn start I am getting an error:
yarn workspace test start
When you use this plugin you must install `typescript`.
What is wrong? How should I fix it? Or debug it?
I've faced the similar issue when I was upgrading webpack from 4 to 5.
The problem was the version of react-dev-utils
Upgrading react-dev-utils from v10 to v12 made the issue disappear.
devDependencies {
...
"react-dev-utils": "^12.0.1",
...
}
You can be checked the value of your plugins config about ForkTsCheckerWebpackPlugin which the param key named tsconfig.
Error Message
Check [key, value] about ForkTsCheckerWebpackPlugin.
Find it in your node_modules, and set debug point, run the debugger.
You need to take a look at your webpack.config.js where ForkTsCheckerWebpackPlugin is initialized. ForkTsCheckerWebpackPlugin needs to be able to find the tsconfig file.
new ForkTsCheckerWebpackPlugin({
typescript: resolve.sync('typescript', {
basedir: paths.appNodeModules,
tsconfig: paths.appTsConfig,
})
}),
In my case I'm defining paths.appNodeModules and paths.appsTsConfig in a file called paths.js.
module.exports = {
appTsConfig: resolveApp('tsconfig.json'),
appNodeModules: resolveApp('node_modules'),
};
I'm building an internal tool in Laravel and I need a datetime picker for part of the interface. My research has suggested that Tempus Dominus is the solution most people use to solve this.
I've installed Tempus Dominus and Moment (through Node) and added them both to my app.js file. However when I try to compile the JS I get the following warning:
WARNING in ./node_modules/moment/min/moment.min.js
Module not found: Error: Can't resolve './locale' in 'C:\inetpub\wwwroot\salesdb\node_modules\moment\min'
# ./node_modules/moment/min/moment.min.js
# ./resources/js/app.js
# multi ./resources/js/app.js ./resources/sass/app.scss
This is how I'm importing them in the app.js file:
require('moment/min/moment.min.js');
require( 'tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.js');
What am I missing?
The official Tempus Dominus Bootstrap plugin is unmaintained and is kinda buggy when it comes to ES6 and module bundlers.
I strongly advise you to install these two forks instead:
https://www.npmjs.com/package/tempusdominus
https://www.npmjs.com/package/tempusdominus-bootstrap
npm i tempusdominus tempusdominus-bootstrap
If you wanna make it work, you should inject/provide moment and jquery imports in the final build of your application (1st option), or make them globally available (2nd option).
1st option
What is your module bundler?
E.g., if you are using Rollup, you can configure the build like this using the Rollup's #rollup/plugin-inject plugin:
// Your imported plugins...
import inject from "#rollup/plugin-inject";
export default {
input: "src/index.js",
output: [
// You outputs...
],
plugins: [
inject({
$: "jquery",
jQuery: "jquery",
moment: "moment",
exclude: "src/**",
}),
// Your other Rollup plugins here...
],
};
For Webpack, you'd need to use the ProvidePlugin:
const webpack = require('webpack');
module.exports = {
entry: './index.js',
output: {
filename: '[name].js'
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
moment: 'moment'
})
]
};
2nd option
The other option would be to make moment and jQuery globally available in your app by adding the following lines to your index.js main entry point file:
import moment from "moment";
import $ from "jquery";
window.$ = window.jQuery = $;
window.moment = moment;
// Your other imports (tempusdominus-bootstrap as well) go here...
Though I didn't test, both options should work (let me know if not).
Of course, the preferred one would be to use a module bundler (1st option) and not to expose jQuery and/or moment to window.
And if you are using React, I advise you to use this library here instead (demo here). But that's another story.
It seems to be a common problem, but after a few days of active searching I didn't find any solution that works in my case.
windows7-x64
node: 6.3.0-x64 (also tried node-v4.4.7-x64)
npm: 3.10.3
webpack: 1.13.1
sublime text (not Vim)
First of all, I can't install fsevents on windows, which might be the problem, because it's the library for watching on OS X.
D:\file>npm install webpack
file#1.0.0 D:\file
`-- webpack#1.13.1
npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: fsevents#1.0.13
So, if your --watch works on windows, please tell me, do you have the same issue with skipping fsevents when installing webpack?
Secondly, webpack --watch does compile the file, but it doesn't watch at all.
E.g. if I use stylus watch, then it actually blocks my command line until I press ctrl+c
D:\file>stylus -w style.styl
watching C:/Users/...
compiled style.css
watching style.styl
_
And only after ctrl+c it will unblock my keyboard.
^CTerminate batch job (Y/N)? y
stylus-watch
While webpack -w is totally different. It's not just not compiling the file on changes, but it's also not watching at all. I mean that after typing the command webpack --watch it's compiling the file one time, but it doesn't lock my keyboard and so it allows me to write another command.
D:\webpa>webpack main.js bundle.js
D:\webpa>webpack -w main.js bundle.js
D:\webpa>webpack --watch main.js bundle.js
D:\webpa>
webpack-watch
The same with webpack-dev-server - it starts server, but then immediately finishes it.
D:\webpa>webpack-dev-server --hot --inline
http://localhost:8080/
webpack result is served from /
content is served from D:\webpa
D:\webpa>
It looks like the problem is not with webpack.config.js, because it doesn't watch even with a command like webpack --watch main.js bundle.js, but anyway, here is my basic config.
var webpack = require('webpack');
module.exports = {
context: __dirname,
entry: "./main.js",
output: {
path: __dirname,
filename: "bundle.js"
},
};
And I've tried many other variants:
var webpack = require('webpack');
var path = require('path');
var entry = path.join(__dirname, "main.js");
var WebpackNotifierPlugin = require('webpack-notifier');
module.exports = {
context: __dirname,
entry: entry,
output: {
path: __dirname,
filename: "bundle.js"
},
resolve: {root: [__dirname]},
resolve: { fallback: path.join(__dirname, "node_modules") },
resolveLoader: { fallback: path.join(__dirname, "node_modules") },
plugins: [
new webpack.OldWatchingPlugin(),
new WebpackNotifierPlugin(),
new webpack.ResolverPlugin(
new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
),
new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors/js/applibs.js'),
new webpack.optimize.DedupePlugin()
]
};
As I said, the problem seems to be not in webpack.config.js
I've also tried things like:
echo fs.inotify.max_user_watches=524288
webpack-dev-server --content-base ./ --port 9966 --hot --inline
webpack --watch --watch-poll
rename/move/create new folder, reinstall node.js and webpack
So yeah, if you had this issue and you resolved it, please share some info.
Did you have problems with installing fsevents?
Was your webpack --watch command blocking your keyboard and actually watching, but just not compiling files after changes? Or was it finishing watching immediately like in my case?
Any other suggestions what to use apart from --watch and webpack-dev-server?
Thanks!
I'll include this here because it fixed my issue. It may or may not fix yours, depending on if your paths in your post are actually the paths you're using. If it doesn't resolve your issue, at least it'll solve somebodies cause this question comes up first thing for this issue.
You can't have a path with "(" or ")" in it, because the is-glob dependency thinks it's a glob if you do. If you must put your project in a path with "(" (like Program Files (x86)), then you must add something like this to your is-glob module in node_modules:
if (typeof str === 'string' && str.indexOf('Program Files (x86)') > -1)
return false
Have a look at using fswatch. I find myself in the same mess. Windows/Linux cannot support fsevents considering its strictly for OSX. Support for Linux, for example, is through inotify.
It seems fswatch provides a cross-platform filesystem monitor, so you should be all set if you use with your windows machine.