I just tried to install [Vue-double-list][1] in my Vue app.
I have a fail to compile Webpack, but I do not know how resolve it.
I use postcss.
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
{ loader: 'css-loader', options: { importLoaders: 1 } },
'postcss-loader'
],
}, {
test: /\.vue$/,
loader: 'vue-loader',
options: {
postcss: [require('postcss-cssnext')()],
loaders: {
}
// other vue-loader options go here
}
},
And it is the fail
./node_modules/vue-double-list/index.js
Module parse failed: Unexpected token (1:20)
You may need an appropriate loader to handle this file type.
| export default from './dist/vue-double-list.common'
| export * from './dist/vue-double-list.common'
| import './dist/vue-double-list.css'
# ./src/main.js 11:0-41
# multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-
server ./src/main.js
Related
I just started learning next.js and I wanted to add some documentation using https://react-styleguidist.js.org/
I created my project using npx create-next-app
After installing it, and adding some configuration
[styleguide.config.js]
const path = require('path')
module.exports = {
components: './**/*.js',
webpackConfig: {
entry: 'next/lib/app.js',
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ['#babel/react' ],
plugins: ['#babel/plugin-proposal-class-properties']
}
}
},
{
test: /\.scss$/,
loader: 'sass-loader'
}
]
}
}
};
I'm getting the following error when trying to run it using the following command:
npx styleguidist server
./node_modules/react-styleguidist/lib/client/index.js (./node_modules/react-styleguidist/lib/loaders/styleguide-loader.js!./node_modules/react-styleguidist/lib/client/index.js)
Error: ENOENT: no such file or directory, scandir '${projectPath}\node_modules\ally.md\amd'
at Array.map (<anonymous>)
at Array.map (<anonymous>)
# ./node_modules/react-styleguidist/lib/client/index.js 36:19-71 46:2-49:4 46:65-49:3
# multi ./node_modules/react-styleguidist/lib/client/index ./node_modules/react-dev-utils/webpackHotDevClient.js
(Note that I have replaced the project path for "${projectPath}")
And I'm at a loss on how to fix it.
For further details, you can find my package.json here https://pastebin.com/H7RfxxKZ.
My folder structure shown in below image:
All my components are under src/components, some include component.module.css files
My context components are under src/context
All my global scss can be found under "styles/"
Any guidance on why this can happen and how to solve it would be appreciated, my knowledge on how the configuration files work is limited, and any reference to any related article would be appreciated.
Thanks for your help. have a nice rest of the day and stay safe.
After doing some further testing, I found out that my main problem was the "components: './**/*.js'" and the fact that I was missing some alias for my components! I will post here what worked for me.
module.exports = {
components: "./src/**/*.js",
skipComponentsWithoutExample: true, //You don't need this one
moduleAliases: { //Map it to your folder structure
'components': path.resolve(__dirname, 'src','components'),
'_db': path.resolve(__dirname, 'src','_db'),
'context': path.resolve(__dirname, 'src','context'),
'styles': path.resolve(__dirname, 'src','styles'),
},
webpackConfig: {
module: {
rules: [
{
test: /\.js?$/,
exclude: /node_modules/,
loader: "babel-loader",
},
{
test: /\.scss$/,
loaders: [
'style-loader',
'css-loader',
'sass-loader'
]
},
{ //This code prevents errors with font-awesome
test: /\.(ttf|eot|svg|gif|woff|woff2)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: [{
loader: 'file-loader',
}]
},
],
},
},
};
Well I'm using amberframework and it have built-in webpack building the issue is that when I'm trying to import an image via scss it can't handle the image file and can't find as I understand it.
The thing is most of the source cod located in folder called src and so are the assets. During build step it should transfer the files to the public folder but it doesn't and instead output this weird error.
The error:
ERROR in ./src/assets/stylesheets/main.scss
Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve './images/transparent.jpg' in '/Users/niko/code/blog/src/assets/stylesheets'
at factoryCallback (/Users/niko/code/blog/node_modules/webpack/lib/Compilation.js:282:40)
at factory (/Users/niko/code/blog/node_modules/webpack/lib/NormalModuleFactory.js:237:20)
at resolver (/Users/niko/code/blog/node_modules/webpack/lib/NormalModuleFactory.js:60:20)
at asyncLib.parallel (/Users/niko/code/blog/node_modules/webpack/lib/NormalModuleFactory.js:127:20)
at /Users/niko/code/blog/node_modules/async/dist/async.js:3888:9
at /Users/niko/code/blog/node_modules/async/dist/async.js:473:16
at iteratorCallback (/Users/niko/code/blog/node_modules/async/dist/async.js:1062:13)
at /Users/niko/code/blog/node_modules/async/dist/async.js:969:16
at /Users/niko/code/blog/node_modules/async/dist/async.js:3885:13
at resolvers.normal.resolve (/Users/niko/code/blog/node_modules/webpack/lib/NormalModuleFactory.js:119:22)
at onError (/Users/niko/code/blog/node_modules/enhanced-resolve/lib/Resolver.js:65:10)
at loggingCallbackWrapper (/Users/niko/code/blog/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at runAfter (/Users/niko/code/blog/node_modules/enhanced-resolve/lib/Resolver.js:158:4)
at innerCallback (/Users/niko/code/blog/node_modules/enhanced-resolve/lib/Resolver.js:146:3)
at loggingCallbackWrapper (/Users/niko/code/blog/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at next (/Users/niko/code/blog/node_modules/tapable/lib/Tapable.js:252:11)
at /Users/niko/code/blog/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:40:4
at loggingCallbackWrapper (/Users/niko/code/blog/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at runAfter (/Users/niko/code/blog/node_modules/enhanced-resolve/lib/Resolver.js:158:4)
at innerCallback (/Users/niko/code/blog/node_modules/enhanced-resolve/lib/Resolver.js:146:3)
at loggingCallbackWrapper (/Users/niko/code/blog/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at next (/Users/niko/code/blog/node_modules/tapable/lib/Tapable.js:252:11)
at innerCallback (/Users/niko/code/blog/node_modules/enhanced-resolve/lib/Resolver.js:144:11)
at loggingCallbackWrapper (/Users/niko/code/blog/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at next (/Users/niko/code/blog/node_modules/tapable/lib/Tapable.js:249:35)
at resolver.doResolve.createInnerCallback (/Users/niko/code/blog/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:44:6)
at loggingCallbackWrapper (/Users/niko/code/blog/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at afterInnerCallback (/Users/niko/code/blog/node_modules/enhanced-resolve/lib/Resolver.js:168:10)
at loggingCallbackWrapper (/Users/niko/code/blog/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at next (/Users/niko/code/blog/node_modules/tapable/lib/Tapable.js:252:11)
# ./src/assets/stylesheets/main.scss
ERROR in ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/assets/stylesheets/main.scss
Module not found: Error: Can't resolve './images/transparent.jpg' in '/Users/niko/code/blog/src/assets/stylesheets'
# ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/assets/stylesheets/main.scss 7:83-118
# ./src/assets/stylesheets/main.scss
The code webpack file:
const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
let config = {
entry: {
'main.bundle.js': './src/assets/javascripts/main.js',
'main.bundle.css': './src/assets/stylesheets/main.scss'
},
output: {
filename: '[name]',
path: path.resolve(__dirname, '../../public/dist'),
publicPath: '/dist'
},
resolve: {
alias: {
amber: path.resolve(__dirname, '../../lib/amber/assets/js/amber.js')
}
},
module: {
rules: [
{
test: /\.css$/,
exclude: /node_modules/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
},
{
test: /\.scss$/,
exclude: /node_modules/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
},
{
test: /\.(png|svg|jpg|gif)$/,
exclude: /node_modules/,
use: [
'file-loader?name=/images/[name].[ext]'
]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
exclude: /node_modules/,
use: [
'file-loader?name=/[name].[ext]'
]
},
{
test: /\.js?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['env']
}
}
]
},
plugins: [
new ExtractTextPlugin('main.bundle.css'),
],
// For more info about webpack logs see: https://webpack.js.org/configuration/stats/
stats: 'errors-only'
};
module.exports = config;
This part of the error code tells us what's wrong. The relative path is incorrect.
Module not found: Error: Can't resolve './images/transparent.jpg' in '/Users/niko/code/blog/src/assets/stylesheets'
It's looking for /Users/niko/code/blog/src/assets/stylesheets/images/transparent.jpg
When you reference the jpg from the sass file, it should be one more folder back with a dot dot slash. ../images/transparent.jpg. Instead of starting to look in stylesheets, it will look from assets.
I have a ReactJS application based off of this boilerplate.
I am simply trying to load and require or import a css file (to be embedded in <style> tag, as opposed to css link). Below are the two methods I have tried, and not ever both at the same time.
Method 1: Configure loaders in Webpack
These are all the loader configurations I have tried, but still resulted in this error: [require-hacker] Trying to load "something.css" as a "*.js"
dev.config.js
module: {
loaders: [
// loaders in here
]
}
{ test: /\.css$/, loader: "style!css" }
{ test: /\.css$/, loader: 'style-loader!css-loader'} from here
{ test: /\.css$/, loader: 'style!css!postcss' }
{ test: /\.css$/, loader: 'style!css?modules&localIdentName=[name]---[local]---[hash:base64:5]!postcss' }
{ test: /\.css$/,
use: [
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[path][name]__[local]--[hash:base64:5]'
}
}
]
}
{
test: /\.css$/,
loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap'
},
Method 2: Use loaders directly
If I remove the css loaders altogether, and instead call require('style!css!./something.css'), I get this error:
Error: Cannot find module 'style!css!./something.css'
---- # NOTE: ----
I am able to properly require my .scss files and its webpack loader configuration is below. But for some reason my css files don't want to play that way too.
{ test: /\.scss$/,
loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap' }
change extensions: ['less','scss'] to extensions: ['less','scss','css'] in webpack-isomorphic-tools.js at line 65.for more details you can see this
I have a module which I want to write a test for. I use webpack to transpile it because I'm writing it in ES6.
The file (app.js) starts like this:
import template from './app.html'; // pulls in the template for this component
import './app.scss'; // pulls in the styles for this component
But when I run the test, I get an error that app.scss is not found
ERROR in ./src/app.js
Module not found: Error: Cannot resolve module 'scss' in /Users/.../src
# ./src/app.js 11:0-21
13 05 2016 10:38:52.276:INFO [..browserinfo..]: Connected on socket /#KYFiNbOR-7lqgc9qAAAA with id 63011795
(browser) ERROR
Uncaught Error: Cannot find module "./app.scss"
at /Users/.../spec.bundle.js:34081 <- webpack:///src/app.js:4:0
Finished in 0.241 secs / 0 s
The test starts like this:
import angular from 'angular';
import header from './app.js'; // error occurs here cause .scss file is not recognized
describe('my module', () => {
let $rootScope, makeController;
// testing stuff
});
My karma.conf.js file includes this:
webpack: {
devtool: 'inline-source-map',
module: {
loaders: [
{ test: /\.js/, exclude: [/app\/lib/, /node_modules/], loader: 'babel' },
{ test: /\.html/, loader: 'raw' },
{ test: /\.scss/, loader: 'style!css!scss' },
{ test: /\.css$/, loader: 'style!css' }
]
}
}
How do I get karma/webpack to read the scss file correctly and run my tests?
The problem was a typo:
scss should have been sass
webpack: {
module: {
loaders: [
...,
{ test: /\.scss/, loader: 'style!css!sass' },
...
]
}
}
I'm slowly bringing Webpack into an existing project. At this point we won't require .css files. However, I would like Webpack to still process them.
I would like Webpack to just load the file, pass it to whatever .css loader is required (Stylus in our case), and output a .css file.
None of the combinations of ExtractTextPlugin, raw and file loaders, passing loaders into other loaders work, Webpack inevitably throws
Module build failed: ParseError: ...bootstrap-theme.min.css:5:1996
1| /*!
2| * Bootstrap v3.3.5 (http://getbootstrap.com)
3| * Copyright 2011-2015 Twitter, Inc.
...
expected "indent", got ";"
Is it even possible to process external files with Webpack like this?
Various combinations tried:
{
test: /\.(styl|css)/,
loader: 'raw!stylus'
}
{
test: /\.(styl|css)/,
loader: 'file!stylus'
}
{
test: /\.(styl|css)/,
loader: ExtractTextPlugin.extract('file', 'raw!stylus')
}
{
test: /\.(styl|css)/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader!stylus-loader')
}
You don't need to pass your css files through the stylus loader, only the .styl files.
I've managed to make it work with this configuration:
module.exports = {
entry: {
name: './test.js'
},
output: {
filename: './bundle.js'
},
module: {
loaders: [
{
test: /\.css$/,
loaders: ['style', 'css']
},
{
test: /\.styl$/,
loaders: ['style', 'css', 'stylus']
},
{
test:/\.(woff2?|eot|ttf|svg)$/,
loader: 'url'
}
]
}
}
And then you can import/require your css files as such:
require('./test.css');
require('./node_modules/bootstrap/dist/css/bootstrap.min.css');
You could also add your CSS as an extra entry point of name:
module.exports = {
entry: {
name: [
'./test.js',
'./test.css',
],
},
/* … */
};