Context. I am upgrading an old react application and want to use magic link for authentication. The project was using webpack 3 but I was having problems with webpack after adding magic link as a dependency. I thought maybe because webpack 3 maybe didn't support ts and so I decided to upgrade to webpack 5 and used ts-loader which solved my initial problem I think. I have yet to get the project to build since.
having issues getting the assets to load properly. I installed webpack-less and changed the paths for mixins/variables etc in the main.less which it was complaining about before since the mixins it was pulling before didn't exist after upgrading.
ERROR in ../node_modules/bootstrap-webpack/bootstrap.config.js (../node_modules/bootstrap-webpack/bootstrap-scripts.loader.js!../node_modules/bootstrap-webpack/bootstrap.config.js)
Module build failed (from ../node_modules/bootstrap-webpack/bootstrap-scripts.loader.js):
Error: Cannot find module 'C:sourceshape-esig-generator-v2-test
ode_modulesabel-loaderlibindex.js!C:sourceshape-esig-generator-v2-test
ode_modulesootstrap-webpackootstrap.config.js'
Require stack:
- C:sourceshape-esig-generator-v2-test
ode_modulesootstrap-webpackootstrap-scripts.loader.js
- C:sourceshape-esig-generator-v2-test
ode_moduleswebpacklibProgressPlugin.js
- C:sourceshape-esig-generator-v2-test
ode_moduleswebpacklibindex.js
- C:sourceshape-esig-generator-v2-test
ode_moduleswebpack-clilibwebpack-cli.js
- C:sourceshape-esig-generator-v2-test
ode_moduleswebpack-clilibootstrap.js
- C:sourceshape-esig-generator-v2-test
ode_moduleswebpack-cliincli.js
- C:sourceshape-esig-generator-v2-test
ode_moduleswebpack-dev-serverinwebpack-dev-server.js
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
at Function.Module._load (node:internal/modules/cjs/loader:778:27)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.module.exports.pitch (C:sourceshape-esig-generator-v2-test
ode_modulesootstrap-webpackootstrap-scripts.loader.js:20:16)
@ ../node_modules/bootstrap-webpack/index.js 3:0-59
@ ../app/js/main.jsx 1:0-27
ERROR in ../node_modules/bootstrap-webpack/bootstrap.config.js (../node_modules/css-loader/dist/cjs.js!../node_modules/less-loader/dist/cjs.js!../node_modules/bootstrap-webpack/bootstrap-styles.loader.js!../node_modules/babel-loader/lib/index.js!../node_modules/bootstrap-webpack/bootstrap.config.js)
Module build failed (from ../node_modules/bootstrap-webpack/bootstrap-styles.loader.js):
TypeError: this.exec is not a function
at Object.module.exports (C:sourceshape-esig-generator-v2-test
ode_modulesootstrap-webpackootstrap-styles.loader.js:49:21)
@ ../node_modules/style-loader/dist/cjs.js!../node_modules/css-loader/dist/cjs.js!../node_modules/less-loader/dist/cjs.js!../node_modules/bootstrap-webpack/bootstrap-styles.loader.js!../node_modules/bootstrap-webpack/bootstrap.config.js 8:6-181 22:17-24 26:7-21 58:25-39 59:36-47 59:50-64 63:6-73:7 64:54-65 64:68-82 70:42-53 70:56-70 72:21-28 83:0-151 83:0-151 84:22-29 84:33-47 84:50-64 61:4-74:5
@ ../node_modules/bootstrap-webpack/index.js 1:0-94
@ ../app/js/main.jsx 1:0-27
ERROR in ../app/styles/main.less (../node_modules/file-loader/dist/cjs.js!../node_modules/less-loader/dist/cjs.js!../app/styles/main.less)
Module build failed (from ../node_modules/less-loader/dist/cjs.js):
@import "../../node_modules/bootstrap-less/bootstrap/mixins/";
^
Less resolver error:
'../../node_modules/bootstrap-less/bootstrap/mixins/' wasn't found. Tried - C:sourceshape-esig-generator-v2-test
ode_modulesootstrap-lessootstrapmixins.less,....
ode_modulesootstrap-lessootstrapmixins.less
Webpack resolver error details:
resolve '../../node_modules/bootstrap-less/bootstrap/mixins/' in 'C:sourceshape-esig-generator-v2-testappstyles'
Parsed request is a directory
using description file: C:sourceshape-esig-generator-v2-testpackage.json (relative path: ./app/styles)
using description file: C:sourceshape-esig-generator-v2-test
ode_modulesootstrap-lesspackage.json (relative path: ./bootstrap/mixins)
as directory
existing directory C:sourceshape-esig-generator-v2-test
ode_modulesootstrap-lessootstrapmixins
using description file: C:sourceshape-esig-generator-v2-test
ode_modulesootstrap-lesspackage.json (relative path: ./bootstrap/mixins)
using path: C:sourceshape-esig-generator-v2-test
ode_modulesootstrap-lessootstrapmixinsindex
using description file: C:sourceshape-esig-generator-v2-test
ode_modulesootstrap-lesspackage.json (relative path: ./bootstrap/mixins/index)
no extension
C:sourceshape-esig-generator-v2-test
ode_modulesootstrap-lessootstrapmixinsindex doesn't exist
.less
C:sourceshape-esig-generator-v2-test
ode_modulesootstrap-lessootstrapmixinsindex.less doesn't exist
.css
C:sourceshape-esig-generator-v2-test
ode_modulesootstrap-lessootstrapmixinsindex.css doesn't exist
Webpack resolver error missing:
undefined
Error in C:sourceshape-esig-generator-v2-testappstylesmain.less (line 5, column 0)
Error:
@import "../../node_modules/bootstrap-less/bootstrap/mixins/";
^
Less resolver error:
'../../node_modules/bootstrap-less/bootstrap/mixins/' wasn't found. Tried - C:sourceshape-esig-generator-v2-test
ode_modulesootstrap-lessootstrapmixins.less,....
ode_modulesootstrap-lessootstrapmixins.less
Webpack resolver error details:
resolve '../../node_modules/bootstrap-less/bootstrap/mixins/' in 'C:sourceshape-esig-generator-v2-testappstyles'
Parsed request is a directory
using description file: C:sourceshape-esig-generator-v2-testpackage.json (relative path: ./app/styles)
using description file: C:sourceshape-esig-generator-v2-test
ode_modulesootstrap-lesspackage.json (relative path: ./bootstrap/mixins)
as directory
existing directory C:sourceshape-esig-generator-v2-test
ode_modulesootstrap-lessootstrapmixins
using description file: C:sourceshape-esig-generator-v2-test
ode_modulesootstrap-lesspackage.json (relative path: ./bootstrap/mixins)
using path: C:sourceshape-esig-generator-v2-test
ode_modulesootstrap-lessootstrapmixinsindex
using description file: C:sourceshape-esig-generator-v2-test
ode_modulesootstrap-lesspackage.json (relative path: ./bootstrap/mixins/index)
no extension
C:sourceshape-esig-generator-v2-test
ode_modulesootstrap-lessootstrapmixinsindex doesn't exist
.less
C:sourceshape-esig-generator-v2-test
ode_modulesootstrap-lessootstrapmixinsindex.less doesn't exist
.css
C:sourceshape-esig-generator-v2-test
ode_modulesootstrap-lessootstrapmixinsindex.css doesn't exist
Webpack resolver error missing:
undefined
Error in C:sourceshape-esig-generator-v2-testappstylesmain.less (line 5, column 0)
at Object.lessLoader (C:sourceshape-esig-generator-v2-test
ode_modulesless-loaderdistindex.js:74:14)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
@ ../app/styles/main.less 8:6-146 22:17-24 26:7-21 58:25-39 59:36-47 59:50-64 63:6-73:7 64:54-65 64:68-82 70:42-53 70:56-70 72:21-28 83:0-116 83:0-116 84:22-29 84:33-47 84:50-64 61:4-74:5
@ ../app/js/main.jsx 2:0-29
Here is Main.less
@import "../../node_modules/font-awesome/less/font-awesome.less";
@import '../../node_modules/bootstrap-less/bootstrap/variables.less';
@import './variables';
@import "../../node_modules/bootstrap-less/bootstrap/mixins/";
@import './app';
@import './personnel-info-form';
@import './modals';
Here is the webpack.config
var path = require('path');
var webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
// const ESLintPlugin = require('eslint-webpack-plugin');
// var node_modules_dir = path.join(__dirname, 'node_modules');
var config = {
mode: 'development',
context: path.resolve(__dirname, 'app'),
entry: {
app: path.resolve(__dirname, 'app/js/main.jsx')
//vendors: ['react', 'react-router', 'underscore', 'classnames']
},
output: {
path: process.env.NODE_ENV === 'production' ? path.resolve(__dirname, 'dist') : path.resolve(__dirname, 'build/assets'),
filename: 'app.js',
assetModuleFilename: 'images/[hash][ext][query]'
},
resolve: {
modules: ['node_modules'],
alias: {},
extensions: [".webpack.js", ".web.js", ".js", ".jsx", ".coffee", ".less", ".json", ".ts" , ".tsx", ".cjs"],
},
context: path.join(__dirname, 'build'),
plugins: [
new webpack.ProgressPlugin(),
new CopyWebpackPlugin([
{ from: 'index.html' },
{ from: 'assets/images', to: 'assets/images' },
]),
new HtmlWebpackPlugin({
template: 'index.html',
filename: 'index.html'
}),
new webpack.ProvidePlugin({
$: 'jquery',
_: 'lodash',
join: ['lodash', 'join'],
}),
//new ESLintPlugin(options)
//new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js')
],
module: {
rules: [
{ test: /.css$/, use: ['style-loader', 'css-loader']},
{ test: /.scss$/, use: ['style-loader', 'file-loader', 'scss-loader'], exclude: /(node_modules)/},
{ test: /.less$/, use: ['style-loader', 'file-loader', 'less-loader'], exclude: /(node_modules)/},
{ test: /.(ts|tsx)?$/, use: ['ts-loader', 'babel-loader']},
{
test: /.(js|jsx|cjs|ts|tsx)?$/,
use: 'babel-loader',
include: /(node_modules)/
},
// **IMPORTANT** This is needed so that each bootstrap js file required by bootstrap-webpack has access to the jQuery object
{
test: /jquery.+.js$/,
use: [{
loader: 'expose-loader',
options: 'jQuery'
},{
loader: 'expose-loader',
options: '$'
}]
},
{
test: /.html$/i,
loader: "html-loader",
},
// Needed for the css-loader when [bootstrap-webpack](https://github.com/bline/bootstrap-webpack) loads bootstrap's css.
{
test: /.woff$/,
use: "url-loader?limit=10000&mimetype=application/font-woff"
},
{
test: /.woff2$/,
use: "url-loader?limit=10000&mimetype=application/font-woff"
},
{
test: /.ttf$/,
use: "file-loader"
},
{
test: /.eot$/,
use: "file-loader"
},
{
test: /.svg$/,
type: 'asset/inline',
use: "file-loader"
},
{
test: /.png/,
type: 'asset/resource'
},
{
test: /.html/,
type: 'asset/resource',
generator: {
filename: 'static/[hash][ext][query]'
}
}
]
},
}
module.exports = config;
Package.json
{
"name": "",
"version": "0.0.0",
"main": "app/js/main.jsx",
"scripts": {
"dev": "SET NODE_ENV=devlopment & webpack-dev-server --devtool eval --progress profile --stats-error-details",
"deploy": "SET NODE_ENV=production & webpack -p"
},
"author": "Thought Shop Creative Inc.",
"license": "ISC",
"dependencies": {
"@babel/core": "^7.18.10",
"@babel/plugin-proposal-class-properties": "^7.18.6",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-transform-runtime": "^7.18.10",
"@babel/preset-env": "^7.18.10",
"@babel/preset-react": "^7.18.6",
"@magic-ext/webauthn": "^3.0.0",
"@types/bootstrap": "^5.2.1",
"babel-loader": "^8.2.5",
"bootstrap": "^5.2.0",
"bootstrap-loader": "^3.0.4",
"bootstrap-webpack": "0.0.6",
"cjsx-loader": "^3.0.0",
"classnames": "^2.2.5",
"coffee-loader": "^0.7.2",
"coffee-script": "^1.10.0",
"copy-webpack-plugin": "^4.1.1",
"css-loader": "^6.7.1",
"dotenv": "^16.0.1",
"eslint": "^8.21.0",
"eslint-webpack-plugin": "^3.2.0",
"exports-loader": "^4.0.0",
"expose-loader": "^4.0.0",
"extract-text-webpack-plugin": "^3.0.1",
"file-loader": "^6.2.0",
"firebase": "^4.5.2",
"font-awesome": "^4.7.0",
"html-webpack-plugin": "^5.5.0",
"imports-loader": "^4.0.0",
"jquery": "^3.2.1",
"json-loader": "^0.5.7",
"jsx-loader": "^0.13.2",
"less": "^4.1.3",
"less-loader": "^11.0.0",
"magic-sdk": "^9.0.0",
"node-libs-browser": "^2.0.0",
"path": "^0.12.7",
"re-base": "^3.0.5",
"react": "^18.2.0",
"react-bootstrap": "^0.31.4",
"react-dom": "^18.2.0",
"react-icons": "^2.2.7",
"react-router": "^6.3.0",
"react-router-bootstrap": "^0.24.4",
"react-router-dom": "^4.2.2",
"react-slick": "^0.14.6",
"react-transition-group": "^2.2.1",
"scss-loader": "^0.0.1",
"style-loader": "^3.3.1",
"ts-loader": "^9.3.1",
"underscore": "^1.8.3",
"url-loader": "^4.1.1",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.10.0"
}
}
.babelrc
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": ["@babel/plugin-proposal-class-properties", "@babel/plugin-syntax-dynamic-import"]
}