unable to import react component from library - reactjs

After going through almost all the answers related to this topic I had no luck so have to create a new question.
Problem Statement :
I have a library of components (module) that I want to import inside my react application which has an export syntax like(working in another app) :
export * from 'button'; // this returns jsx component
Now, in my application I am using this as :
import {button} from ./library; // this is the bundled module where button component exists.
When I do this Webpack gives me an error :
(function (exports, require, module, __filename, __dirname) { export * from './button';
^^^^^^
SyntaxError: Unexpected token export
I am using Webpack 4 and babel 7 with these configurations :
webpack.config.js
//this is exports.
module.exports = {
entry: {
client: ['whatwg-fetch', './client/index.js', 'webpack-hot-middleware/client']
},
optimization: {
minimizer: [new OptimizeCSSAssetsPlugin({})]
},
output: {
path: path.resolve(__dirname, `dist/client/${pkg.version}`),
filename: '[name].js',
publicPath: `/myApp/${pkg.version}`
},
devtool: ifProduction('nosources-source-map', 'source-map'),
resolve: {
modules: [path.resolve('./client'), path.resolve('./node_modules')]
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.less$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
},
{
test: /\.(ttf|eot|svg|woff|woff2?)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader?name=fonts/[name].[ext]'
},
{
test: /\.(png|jpg|ico|svg|eot|ttf)$/,
loader: 'url-loader'
}
]
},
mode,
plugins: [
new webpack.HotModuleReplacementPlugin(),
new MiniCssExtractPlugin(),
new BundleAnalyzerPlugin({
analyzerMode: 'static',
openAnalyzer: false,
reportFilename: '../report.html'
})
]
};
babel.config.js
// prettier-ignore
module.exports = {
presets: [
'#babel/preset-env',
'#babel/preset-react',
],
plugins: [
'#babel/plugin-transform-spread',
'react-hot-loader/babel',
'babel-plugin-syntax-export-extensions',
'#babel/plugin-proposal-export-namespace-from',
'#babel/plugin-syntax-export-namespace-from',
'#babel/plugin-syntax-export-default-from',
'#babel/plugin-syntax-dynamic-import',
'#babel/plugin-proposal-class-properties',
['#babel/plugin-transform-runtime',
{
regenerator: true,
},
],
],
env: {
development: {
presets: [
'#babel/preset-env', ['#babel/preset-react', { development: true } ],
],
},
test: {
presets: [['#babel/preset-env'], '#babel/preset-react'],
},
},
};
I am not sure what's going wrong, Any help would be much appreciated.
Thanks.

Related

React froala Super expression must either be null or a function not undefined

I am trying to use froala editor in my react code and It is working perfectly in my local. But in production it is crashing. It is just a blank page. When I opened console there is a error message Super expression must either be null or a function not undefined. If I remove froala editor then it is working fine.
import React from 'react';
import 'froala-editor/css/froala_style.min.css';
import 'froala-editor/css/froala_editor.pkgd.min.css';
import FroalaEditorComponent from 'react-froala-wysiwyg';
const Editor = (props) => {
return <FroalaEditorComponent {...props} />;
};
export default Editor;
and this is my webpack config
const webpack = require('webpack');
const path = require('path');
const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
mode: 'production',
entry: {
main: ['./client/app/main'],
},
externals: {
react: 'React',
'react-dom': 'ReactDOM'
},
output: {
path: path.resolve(__dirname, './client/dist'),
filename: '[name].app.bundle.js',
},
devtool: 'source-map',
module: {
rules: [
{
test: /\.html$/,
loader: 'file-loader?name=[name].[ext]',
},
{
test: /\.js?$/,
exclude: /node_modules[\/\\](?!(swiper|dom7|#jimp\/core|d3-array|d3-scale|file-type|react-wordcloud|striptags)[\/\\])/,
loader: 'babel-loader',
options: {
cacheDirectory: true,
babelrc: false,
presets: ['#babel/preset-env', '#babel/react'],
plugins: [
['#babel/plugin-proposal-decorators', { 'legacy': true }],
'#babel/plugin-proposal-optional-chaining',
'#babel/plugin-proposal-class-properties',
]
},
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
],
},
resolve: {
modules: [path.resolve(__dirname, './client/app'), 'node_modules'],
extensions: ['.jsx', '.js', '.json'],
// These extensions are tried when resolving a file
enforceExtension: false,
// If false it will also try to use no extension from above
moduleExtensions: ['-loader'],
// These extensions are tried when resolving a module
enforceModuleExtension: false,
},
plugins: [
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
new CompressionPlugin({
test: /\.js?$/,
deleteOriginalAssets: true,
})
],
node: {
fs: 'empty'
}
};
Any help would be really thankfull

React-Monaco-Editor: Not finding workers produced by monaco-editor-webpack-plugin

I'm trying to integrate the monaco editor into an existing react application. I followed the installation steps from (react-monaco-editor), but I don't get any syntax highlighting or autocomplete for typescript, consistent with the FAQ as if I hadn't set up the monaco-editor-webpack-plugin.
I have setup the plugin though. I can see that the monaco-editor-webpack-plugin is dropping files along side my app.js, so I presume it is working:
It seems my issue is that react-monaco-editor is trying to pull these files from the wrong location. If I load my page and open my network tab, I can see the following:
There are two problems:
1 - the paths are full paths on my system but should be relative paths - e.g.
http://127.0.0.1/dist/app/secured/49.js
2 - there is a slash missing between "secured" and "49.js" (secured49.js) and also for the other numeric files, but the editor.worker.js has the slash (weird).
So the question I'm hoping to answer is - how does react-monaco-editor determine the paths it will pull these files from, and is there a way I can influence the pathing?
Any help or recommendations would be much appreciated! Some snippets of my code below in case helpful.
package.json:
"monaco-editor-webpack-plugin": "^1.7.0",
"react-monaco-editor": "^0.26.2",
weback.config.js
'use strict';
const path = require('path');
const webpack = require('webpack');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
process.noDeprecation = true;
const babel = {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env', '#babel/preset-react'],
plugins: [
['#babel/plugin-proposal-decorators', { 'legacy': true }],
['jsx-control-statements'],
'#babel/plugin-proposal-function-bind',
['#babel/plugin-proposal-decorators', { 'legacy': true }],
['#babel/plugin-proposal-class-properties', { 'loose': true }]
],
compact: true
}
};
const config = {
entry: './index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.js'
},
mode: 'development', // Change to production on checkin
context: settings.app(),
resolve: {
modules: [
settings.app(),
path.join(settings.project(), 'node_modules'),
path.join(__dirname, 'node_modules')
],
symlinks: true,
extensions: ['.js', '.jsx', '.json', '.css', 'scss', 'less']
},
resolveLoader: {
modules: [
path.join(settings.project(), 'node_modules'),
path.join(__dirname, 'node_modules')
],
symlinks: true
},
module: {
rules: [
{
test: /.(js|jsx)?$/,
use: [
{
loader: 'babel-loader',
options: {
presets: [
'#babel/preset-env',
'#babel/preset-react'
],
plugins: [
'#babel/plugin-proposal-function-bind',
['jsx-control-statements'],
['#babel/plugin-proposal-decorators', {'legacy': true}],
['#babel/plugin-proposal-class-properties', { 'loose': true }]
],
compact: true
}
}
],
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.scss$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'sass-loader'
}
]
},
{
test: /\.less$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'less-loader'
}
]
},
{
test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
use: [{
loader: 'url-loader',
options: {
limit: 100000,
mimetype: 'application/font-woff'
}
}]
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
use: [{
loader: 'url-loader',
options: {
limit: 100000,
mimetype: 'application/octet-stream'
}
}]
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
use: [{
loader: 'url-loader',
options: {
limit: 100000,
mimetype: 'application/image/svg+xml'
}
}]
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
use: 'file-loader'
},
{
test: /-font\.otf(\?.+)?$/,
use: [
'file-loader?name=fonts/[name].[ext]'
]
}
]
},
devtool: 'source-map',
node: {
console: true,
fs: 'empty',
net: 'empty',
tls: 'empty'
},
plugins: [
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
new CaseSensitivePathsPlugin(),
new MonacoWebpackPlugin()
]
};
module.exports = config;
index.js
import { observer } from 'mobx-react';
import React, { Component } from 'react';
import MonacoEditor from 'react-monaco-editor';
#observer
export default class TSEditor extends Component {
constructor(props) {
super(props);
this.state = {
code: 'var name : string = "kyle";'
};
this.editorDidMount = this.editorDidMount.bind(this);
this.onChange = this.onChange.bind(this);
}
onChange(newValue, e) {
console.log('onChange', newValue, e);
}
editorDidMount(editor, monaco) {
console.log('editorDidMount', editor);
editor.focus();
}
render() {
const code = this.state.code;
const options = {
selectOnLineNumbers: true
};
return (
<MonacoEditor
language="typescript"
theme="vs-dark"
value={code}
options={options}
onChange={this.onChange}
editorDidMount={this.editorDidMount}
/>
);
}
}
I my case... this did the trick... within webpack.config.js
devServer: {
https: true,
port: 3000,
publicPath: "/dist/"
},
...
..
.
plugins: [
...
..
.
new MonacoWebpackPlugin({
publicPath: "/dist/"
})
]
available options are documented at https://github.com/Microsoft/monaco-editor-webpack-plugin#options
This turned out to be a problem caused by an incorrect publicPath in the output portion of my webpack configuration.
For anyone else with a similar issue, add a publicPath in your webpack configuration that gives the correct location of your web worker JS files.

How to import js modules (with absolute path) in my typescript file in React application?

I'm integrating typescript in my React app which has significant amount of code. I've some app level HOCs which I apply on React Components as :
import React from 'react';
import HOC1 from 'app/hocs/hoc1';
import compose from 'recompose/compose;
class MyComponent from React.Component {
...component stuff...
}
export default compose(HOC1())(MyComponent);
But now I've added typescript in my application, whenever I'm importing
import HOC1 from 'app/hocs/hoc1';
it says
TS2307: Cannot find module 'app/hocs/hoc1'.
I don't want to add type definitions to all my HOCs. What is the solution and why I'm getting this error?
[EDIT] I'm using baseUrl in tsconfig as well. My folder structure is
/Project/configs/tsconfig
/Project/src/app/hocs
In tsconfig, I've given baseUrl as ../src through this documentation.
Another Edit
And my webpack config looks like :
{
test: /\.(t|j)sx?$/,
loader: 'happypack/loader?id=jsx-without-proptypes',
include: [
path.resolve(__dirname),
path.resolve(__dirname, '../src'),
],
},
The whole webpack config looks something like
const config = {
context: path.resolve(__dirname, '../src'),
mode: NODE_ENV,
optimization: {
splitChunks: false,
nodeEnv: NODE_ENV,
minimize: false,
},
node: {
net: 'empty',
},
output: {
path: path.resolve(__dirname, '../build/public/assets'),
publicPath: '/assets/',
sourcePrefix: ' ',
pathinfo: DEBUG, //https://webpack.js.org/configuration/output/#output-pathinfo
},
module: {
noParse: [/html2canvas/],
rules: [
{
test: /\.tsx?$/,
enforce: 'pre',
use: { loader: 'awesome-typescript-loader' },
},
...shimLoaders,
...selectiveModulesLoader,
{
test: /\.(t|j)sx?$/,
loader: 'happypack/loader?id=jsx-without-proptypes',
include: [
path.resolve(__dirname),
path.resolve(__dirname, '../src'),
],
},
{
test: /\.jsx?$/,
loader: 'happypack/loader?id=jsx-without-lodash-plugin',
include: [
path.resolve(__dirname, '../src/app/modules/insights/'),
],
exclude: /node_modules/,
},
{
test: /\.jsx?$/,
loader: 'happypack/loader?id=jsx-with-proptypes',
},
{
test: /\.jsx?$/,
loader: 'babel-loader',
query: {
presets: [['env', { include: ['babel-plugin-transform-es2015-template-literals'] }]],
},
},
{
test: /\.css$/,
use: getCssLoaders({
pwd: PWD,
debug: DEBUG,
}),
},
...getScssRules(DEBUG, PWD),
{
test: /\.less$/,
use: [DEBUG ? 'css-loader' : 'css-loader?minimize', 'less-loader'],
},
{
test: /\.txt$/,
loader: 'raw-loader',
},
{
test: /\.svg$/,
loader: 'spr-svg-loader',
},
{
test: /\.(png|jpg|jpeg|gif)$/,
loader: 'url-loader',
query: {
name: DEBUG ? '[path][name].[ext]' : '[hash].[ext]', // ?[hash]
limit: 10000,
},
},
{
test: /\.(woff|woff2)$/,
loader: 'url-loader?name=fonts/[name].[ext]&limit=65000&mimetype=application/font-woff',
},
{
test: /\.(otf|ttf)$/,
loader: 'url-loader?name=fonts/[name].[ext]&limit=65000&mimetype=application/octet-stream',
},
{
test: /\.eot$/,
loader: 'url-loader?name=fonts/[name].[ext]&limit=65000&mimetype=application/vnd.ms-fontobject',
},
{
test: /\.(wav|mp3)$/,
loader: 'file-loader',
query: {
name: DEBUG ? '[path][name].[ext]' : '[hash].[ext]', // ?[hash]
},
},
{
test: /\.pug/,
loader: 'pug-loader',
},
{
test: /\.html$/,
include: /src\/app/,
loader: StringReplacePlugin.replace({
replacements: [
{
//Replaces ES6 strings from languagePack to simple string
pattern: /__\(\s*`([^`]*)`\s*\)/gi,
replacement: (match, p1) => {
let replacedStr = p1;
replacedStr = replacedStr.replace(new RegExp('\\$\\{([\\w\\.\\:\\-]+)\\}', 'g'), '\' + $1 + \'');
return `'${replacedStr}'`;
},
},
{
//Following methods - look out carefully for the *quotes* (single/double)
//doing what i18nPlugin would do for html files - with the *single* quotes
pattern: /__\(\s*'(.+?)'\s*\)/g,
replacement: (match, p1) => {
const replacedStr = p1;
return `'${replacedStr}'`;
},
},
{
//doing what i18nPlugin would do for html files - with the *double* quotes
pattern: /__\(\s*"(.+?)"\s*\)/g,
replacement: (match, p1) => {
const replacedStr = p1;
return `"${replacedStr}"`;
},
},
],
}),
},
],
},
resolve: {
modules: [
path.resolve(PWD),
path.resolve(PWD, '..'),
'node_modules',
'web_modules',
'src',
],
extensions: ['.js', '.jsx', '.ts', '.tsx', '.json', '.webpack.js', '.web.js'],
alias: ALIAS,
// symlinks: false, //https://webpack.js.org/configuration/resolve/#resolve-symlinks, https://github.com/webpack/webpack/issues/1643
},
plugins: [getProvidePlugin(), getLoaderOptionPlugin({ debug: DEBUG }), ...getHappypackPlugin({ debug: DEBUG })],
resolveLoader: {
modules: ['node_modules', path.resolve(PWD, '../../node_modules'), path.resolve(PWD, './config/loaders/')],
alias: {
text: 'raw-loader', // treat text plugin as raw-loader
jst: 'ejs-loader',
style: 'style-loader',
imports: 'imports-loader',
},
},
bail: !DEBUG,
watch: DEBUG,
cache: DEBUG,
stats: DEBUG ?
{
colors: true,
reasons: false,
hash: VERBOSE,
version: VERBOSE,
timings: true,
chunks: false,
chunkModules: VERBOSE,
cached: VERBOSE,
cachedAssets: VERBOSE,
performance: true,
} :
{ all: false, assets: true, warnings: true, errors: true, errorDetails: false },
};
Another Edit
Alias as defined on webpack config also didn't do the trick.
https://webpack.js.org/configuration/resolve/#resolve-alias
Using Alias
To map the imports to the right files you'll need to use the config.resolve.alias field in the webpack configuration.
Where in your scenario will look like:
const config = {
resolve: {
alias: {
'app': path.resolve(__dirname, 'src/app/'),
},
},
};
I am not 100% sure I am doing it right, but I also specify paths key in tsconfig, like this:
"baseUrl": "./src",
"paths": {
"#common/*": ["./common/*"],
"#moduleA/*": ["./moduleA/*"],
"#moduleB/*": ["./moduleB/*"],
}
and it seems to work all right. # prefix is just something i do to discern between my modules and npm dependencies

Webpack 2 configuration for Tree shaking and lazy loading with System.import on React project

I am new to webpack 2 and it's lazy loading, so far I have created project without lazy loading and code splitting, but now want to split my code into chunks and use System imports with React Router. I have created React Router part according to this article
this webpack 2 config file is below.
let webpack = require('webpack');
let path = require('path');
let ExtractTextPlugin = require('extract-text-webpack-plugin');
var devFlagPlugin = new webpack.DefinePlugin({
__DEV__: JSON.stringify(JSON.parse(process.env.DEBUG || 'false')),
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development'),
}
});
let extractSCSS = new ExtractTextPlugin('[name].css')
module.exports = {
context: __dirname,
entry: {
bundle: './src/app/app-client.jsx',
styles: './src/app/sass/main.scss',
vendor: [
'react', 'react-dom'
]
},
output: {
filename: '[name].js',
chunkFilename: 'chunk.[id].[chunkhash:8].js',
path: './src/build',
},
resolve: {
extensions: ['.js', '.jsx']
},
devtool: 'cheap-module-source-map',
module : {
rules : [
{
test: /\.scss$/,
loader: extractSCSS.extract(['css-loader','sass-loader'])
},
{
test: /\.jsx?$/,
exclude: [/node_modules/, /libs/],
use: {
loader: "babel-loader",
query: {
presets: ['es2015', 'react', 'stage-2' ],
plugins: [ "transform-runtime" ]
}
}
},
{
test: /\.woff2?$|\.ttf$|\.eot$|\.svg$|\.png|\.jpe?g|\.gif$/,
use: {
loader:'file-loader'
}
}
]
},
plugins: [
extractSCSS,
devFlagPlugin,
new webpack.optimize.CommonsChunkPlugin({
name: 'bundle',
children: true,
async: true,
minChunks: 2
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
children: true,
async: true,
minChunks: 2
})
]
}
but webpack creates only two files, vendor and bundle, also size of bundle hasn't reduced after I separated React and React DOM.
this is my routes.
import App from './App.jsx';
function errorLoading(err) {
console.error('Dynamic page loading failed', err);
}
function loadRoute(cb) {
return (module) => cb(null, module.default);
}
export default {
component: App,
childRoutes: [
{
path: 'stock/info/:symbol(/:tab)',
getComponent(location, cb) {
System.import('./StockPage')
.then(loadRoute(cb))
.catch(errorLoading);
}
},
{
path: '*',
getComponent(location, cb) {
System.import('./NoMatch')
.then(loadRoute(cb))
.catch(errorLoading);
}
}
]
};
my application runs, but lazy loading won't work of course, because I have no chunks of my modules within System.import.
Please help me to create right webpack config for performance of my application!
Thanks in advance and sorry if something is nonsense, since I am new to webpack.
Webpack2 switched from System.import() to import() to match the current proposed javascript feature. Which is in stage3 right now.
So you should be able to change your webpack config to include STAGE-3
{
test: /\.jsx?$/,
exclude: [/node_modules/, /libs/],
use: {
loader: "babel-loader",
query: {
presets: ['es2015', 'react', 'stage-2', 'stage-3' ],
plugins: [ "transform-runtime" ]
}
}
},
Or the dynamic-import plugin
{
test: /\.jsx?$/,
exclude: [/node_modules/, /libs/],
use: {
loader: "babel-loader",
query: {
presets: ['es2015', 'react', 'stage-2' ],
plugins: [ "transform-runtime", "syntax-dynamic-import"]
}
}
},
Then change your routes
export default {
component: App,
childRoutes: [
{
path: 'stock/info/:symbol(/:tab)',
getComponent(location, cb) {
import('./StockPage')
.then(loadRoute(cb))
.catch(errorLoading);
}
},
{
path: '*',
getComponent(location, cb) {
import('./NoMatch')
.then(loadRoute(cb))
.catch(errorLoading);
}
}
]
};
See the webpack2 help page here for full docs on using import for code splitting and lazy loading.
https://webpack.js.org/guides/migrating/#code-splitting-with-es2015
https://github.com/tc39/proposal-dynamic-import
To enable Webpack2 tree shaking which only requires making one change to your babel setup.
presets: ['es2015', 'react', 'stage-2' ],
becomes
presets: [['es2015', { modules: false }], 'react', 'stage-2' ],
This is the article that I found out about treeshaking from: https://medium.freecodecamp.com/tree-shaking-es6-modules-in-webpack-2-1add6672f31b#.lv3ldgfhs

css modules object import returns empty

I am trying to use css modules inside react, but it is not working.
The log of this code:
import React from 'react'
import styles from '../../css/test.css'
class Test extends React.Component {
render() {
console.log(styles)
return (
<div className={styles.app}>
<p>This text will be blue</p>
</div>
);
}
}
export default Test
returns Object {}
and the rendered code are tags with no class:
<div><p>This text will be blue</p></div>
The css code is available at site, here is my test.css:
.test p {
color: blue;
}
If I changed the div to have class='test', the color of p changes to blue
Here is my webpack.config.js
var path = require('path')
var webpack = require('webpack')
var HappyPack = require('happypack')
var BundleTracker = require('webpack-bundle-tracker')
var path = require('path')
var ExtractTextPlugin = require("extract-text-webpack-plugin")
function _path(p) {
return path.join(__dirname, p);
}
module.exports = {
context: __dirname,
entry: [
'./assets/js/index'
],
output: {
path: path.resolve('./assets/bundles/'),
filename: '[name].js'
},
devtool: 'inline-eval-cheap-source-map',
plugins: [
new BundleTracker({filename: './webpack-stats.json'}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
}),
new HappyPack({
id: 'jsx',
threads: 4,
loaders: ["babel-loader"]
}),
new ExtractTextPlugin("[name].css", { allChunks: true })
],
module: {
loaders: [
{
test: /\.css$/,
include: path.resolve(__dirname, './assets/css/'),
loader: ExtractTextPlugin.extract("style-loader", "css-loader!resolve-url-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]")
},
{
test: /\.scss$/,
include: path.resolve(__dirname, './assets/css/'),
loader: ExtractTextPlugin.extract("style-loader", "css-loader!resolve-url-loader!sass-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]")
},
{
test: /\.jsx?$/,
include: path.resolve(__dirname, './assets/js/'),
exclude: /node_modules/,
loaders: ["happypack/loader?id=jsx"]
},
{
test: /\.png$/,
loader: 'file-loader',
query: {
name: '/static/img/[name].[ext]'
}
}
]
},
resolve: {
modulesDirectories: ['node_modules'],
extensions: ['', '.js', '.jsx'],
alias: {
'inputmask' : _path('node_modules/jquery-mask-plugin/dist/jquery.mask')
},
}
}
Can anyone help me?
Thanks in advance.
Looks like your passing the css-loader params to the resolve-url-loader:
"css-loader!resolve-url-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]"
Should be:
"css-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]&importLoaders=1!resolve-url-loader"
A lot of time passed since this question, so my webpack was update many times with another technologies.
This webpack config is working:
...
module.exports = {
entry,
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/'
},
devtool:
process.env.NODE_ENV === 'production' ? 'source-map' : 'inline-source-map',
module: {
rules: [
{
test: /\.jsx?$/,
include: path.resolve(__dirname, './app/view/'),
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.pcss$/,
include: path.resolve(__dirname, './app/view/'),
use: [
{
loader: 'style-loader'
},
{
loader:
'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
},
{
loader: 'postcss-loader',
options: {
plugins: function() {
return [
require('postcss-import'),
require('postcss-mixins'),
require('postcss-cssnext')({
browsers: ['last 2 versions']
}),
require('postcss-nested'),
require('postcss-brand-colors')
];
}
}
}
],
exclude: /node_modules/
},
{
test: /\.(png|svg|jpg|webp)$/,
use: {
loader: 'file-loader'
}
}
]
},
resolve: {
extensions: ['.js', '.jsx'],
modules: [path.resolve(__dirname, 'node_modules')]
},
plugins
};
I guess that there is an issue with older versions at webpack with this line:
'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
Try importLoaders and importLoader
You can see my repo too.
In my specific case, I'm using official utility facebook/create-react-app. You have to run the following command to get access to the webpack configuration:
npm run eject
You will then need to edit config/webpack.config.js and set the css-loader modules option to true.
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules:true <-----
}),

Resources