Resolve absolute paths with rollup - build

Using absolute path in my package like this import { Component1, Component2 } from "common/assets";
And get error after local install and check
./node_modules/package/dist/package.js
Module not found: Can't resolve 'common/assets' in '/home/max/project/node_modules/package/dist'
In during assembly get warnings
(!) Unresolved dependencies
common/helpers (imported by src/components/Link/index.ts...
My rollup config
/* eslint-disable flowtype/require-valid-file-annotation, no-console, import/extensions */
import nodeResolve from "rollup-plugin-node-resolve";
import commonjs from "rollup-plugin-commonjs";
import babel from "rollup-plugin-babel";
import flow from "rollup-plugin-flow";
import sourceMaps from "rollup-plugin-sourcemaps";
const commonPlugins = [
flow({
pretty: true
}),
sourceMaps(),
nodeResolve({
jsnext: true,
main: true,
browser: true,
extensions: [".ts", ".tsx", ".js", ".jsx"]
}),
babel({
exclude: "node_modules/**"
}),
commonjs({
namedExports: {
react: [
"cloneElement",
"createFactory",
"Component",
"PropTypes",
"createElement",
"createContext"
],
"react-dom": ["render"],
"react-is": ["isElement", "isValidElementType", "ForwardRef"]
}
})
];
const globals = { react: "React", "react-dom": "ReactDOM" };
const configBase = {
input: "./src/index.js",
plugins: commonPlugins
};
const standaloneBaseConfig = {
...configBase,
output: {
file: "dist/package.js",
format: "cjs",
name: "sct",
globals,
sourcemap: true
},
plugins: configBase.plugins
};
export default standaloneBaseConfig;
Can I use absolгte paths in my project and how can resolve it?

You can use the official plugin for that: #rollup/plugin-alias.

Related

Rollup failed to resolve import "src/bootstrap.tsx" from "index.html"

The problem :
This is what happens when i run the build with my React/Vite app :
vite v2.9.6 building for production...
✓ 1 modules transformed.
ERROR [vite]: Rollup failed to resolve import "src/bootstrap.tsx" from "index.html".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
Expected result : A successful build.
In dev mode everything works fine.
What i tried :
Here a solution which proposes to add "/" to the path of the script in index.html, but it is already the case in my code and it does not work. I still tried without "/", just in case.
Some of my code :
in index.html:
<script type="module" src="/src/bootstrap.tsx"></script>
in vite.config.ts :
import { defineConfig, loadEnv } from 'vite';
import react from '#vitejs/plugin-react';
import path from 'path';
import { viteStaticCopy } from 'vite-plugin-static-copy';
import { viteCommonjs, esbuildCommonjs } from '#originjs/vite-plugin-commonjs';
import viteCompression from 'vite-plugin-compression';
import { createHtmlPlugin } from 'vite-plugin-html';
export default defineConfig(({ mode }) => {
const env = loadEnv(mode, process.cwd(), 'VITE_');
const publicPath = '/';
const productName = 'My product name';
return {
define: {
PUBLIC_PATH: JSON.stringify(publicPath),
PRODUCT_NAME: JSON.stringify(productName),
},
plugins: [
react({
jsxRuntime: 'classic',
}),
viteStaticCopy({
flatten: true,
targets: [
{
src: 'node_modules/#client-ux/mylib/assets/fonts',
dest: './assets',
},
],
}),
viteCommonjs(),
viteCompression({
threshold: 1024 * 8, // 8 KB
deleteOriginFile: false,
filter: /\.(js|json|ttf|eot|woff|otf)$/i,
}),
createHtmlPlugin({
entry: 'src/bootstrap.tsx',
inject: {
data: {
title: `<title>${productName}</title>`,
},
},
}),
],
optimizeDeps: {
esbuildOptions: {
plugins: [esbuildCommonjs(['#client-ux/mylib-react', '#otherlib/front-common'])],
},
},
resolve: {
alias: {
'#src': path.resolve(__dirname, 'src'),
'#root': path.resolve(__dirname, './'),
'#public': path.resolve(__dirname, './public'),
'#cypress': path.resolve(__dirname, './cypress'),
'#dist': path.resolve(__dirname, './dist'),
},
},
css: {
preprocessorOptions: {
scss: {
additionalData: `
$mylib-fonts-path: ".${publicPath}${mode === 'development' ? 'assets/' : ''}";
#import "./src/shared/styles/variables";
#import "./src/shared/styles/mixins";
#import "./node_modules/#client-ux/mylib-core/src/app/styles/common/_default.scss";
`,
},
},
},
build: {
reportCompressedSize: false,
},
};
});

webpack 4 images in node_modules : module not found

The problem
Im using webpack 4 to compile scss to css and MiniCssExtractPlugin to save the css into a different file. The problem is, that i dont manage to load images and fonts, that are included via url() inside of the scss files. It also makes no difference between running development or production.
Scss is compiled perfectly and without any problems. Also the scss-loader has no problems loading .scss-files from node_modules.
Why does this error occur and how can i fix it?
error-message when running npm
ERROR in ./ui/index.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./ui/index.scss)
Module not found: Error: Can't resolve '../webfonts/fa-solid-900.woff' in '/home/asdff45/Schreibtisch/Programme/GO/src/factorio-server-manager/manager/ui'
# ./ui/index.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./ui/index.scss) 7:336881-336921
ERROR in ./ui/index.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./ui/index.scss)
Module not found: Error: Can't resolve '../webfonts/fa-solid-900.woff2' in '/home/asdff45/Schreibtisch/Programme/GO/src/factorio-server-manager/manager/ui'
# ./ui/index.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./ui/index.scss) 7:336799-336840
And multiple more, but all have the same error, just the filename changes.
webpack-Config
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: {
// js: './ui/index.js',
sass: './ui/index.scss'
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'app')
},
resolve: {
alias: {
Utilities: path.resolve(__dirname, 'ui/js/')
},
extensions: ['.js', '.json', '.jsx']
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader"
]
},
{
test: /(\.(png|jpe?g|gif)$|^((?!font).)*\.svg$)/,
loaders: [
{
loader: "file-loader",
options: {
name: loader_path => {
if(!/node_modules/.test(loader_path)) {
return "app/images/[name].[ext]?[hash]";
}
return (
"app/images/vendor/" +
loader_path.replace(/\\/g, "/")
.replace(/((.*(node_modules))|images|image|img|assets)\//g, '') +
'?[hash]'
);
},
}
}
]
},
{
test: /(\.(woff2?|ttf|eot|otf)$|font.*\.svg$)/,
loaders: [
{
loader: "file-loader",
options: {
name: loader_path => {
if (!/node_modules/.test(loader_path)) {
return 'app/fonts/[name].[ext]?[hash]';
}
return (
'app/fonts/vendor/' +
loader_path
.replace(/\\/g, '/')
.replace(/((.*(node_modules))|fonts|font|assets)\//g, '') +
'?[hash]'
);
},
}
}
]
}
]
},
performance: {
hints: false
},
plugins: [
new MiniCssExtractPlugin({
filename: "bundle.css"
})
]
}
Project Repo/Branch
You need to add resolve-url-loader to your build, like this:
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"resolve-url-loader",
"sass-loader?sourceMap"
]
}
resolve-url-loader is resolving paths to assets based on the original file that is importing the asset.
I tried it locally and the build is now passing :) Cheers!

Build failure while using Webpack4 in AngularJS1.5.11

I am working on an AngularJS Project to configure webpack for bundling purpose. I am using webpack4 for the same.
Below is the config file.
webpack.config.js:
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');// Require html-webpack-plugin plugin
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const ExtractNormalCSS = new ExtractTextPlugin("./src/main/frontend/sass/main.scss");
const extractCSS = new ExtractTextPlugin('/src/main/frontend/assets/icons/paas-icons/style.css');
module.exports = {
entry: [ "./src/main/frontend/app/app.js","./src/main/frontend/sass/main.scss"], // webpack entry point. Module to start building dependency graph
output: {
path: path.join(__dirname, '/distTemp/'), // Folder to store generated bundle
filename: '[name].bundle.js' // Name of generated bundle after build
//publicPath: '' // public URL of the output directory when referenced in a browser
},
resolve:{
modules: [
'node_modules',
'bower_components',
'src'
],
extensions:[".js"]
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
options: {
compact: false,
cacheDirectory: true,
presets: ['es2015', 'angular'],
},
},
{
test: /.(scss)$/,
loader: 'style-loader!css-loader!sass-loader'
},
{
test: /\.html$/,
loader: 'html-loader?name=views/[name].[ext]'
},
{
test: /\.(png|jpg)$/,
use: [
'url-loader?limit=8192'
]
},
]
},
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
uglifyOptions: {
compress: false,
ecma: 6,
mangle: false
},
sourceMap: true
})
],
splitChunks: {
cacheGroups: {
commons: {
test: /node_modules/,
name: 'vendor',
chunks: 'all'
}
}
}
},
plugins: [ // Array of plugins to apply to build chunk
new HtmlWebpackPlugin({
template: "./src/main/frontend/index.html",
inject: 'body'
}),
new ExtractTextPlugin('/distTemp/style/style.css'),
ExtractNormalCSS,
extractCSS
],
devServer: { // configuration for webpack-dev-server
contentBase: '.src/main/frontend/assets', //source of static assets
port: 7700, // port to run dev-server
}
};
Upon building, I am getting the error mentioned below.
ERROR in ./src/main/frontend/sass/main.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/main/frontend/sass/main.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
var path = require("path");
^
Invalid CSS after "v": expected 1 selector or at-rule, was "var path = require("
in ###/node_modules/bourbon/index.js (line 1, column 1)
Error:
var path = require("path");
^
Invalid CSS after "v": expected 1 selector or at-rule, was "var path = require("
in ###/node_modules/bourbon/index.js (line 1, column 1)
at options.error (###/node_modules/node-sass/lib/index.js:291:26)
# ./src/main/frontend/sass/main.scss 2:14-134
# multi ./src/main/frontend/app/app.js ./src/main/frontend/sass/main.scss
I am using sass-loader and node-sass for the .scss files.
The main.scss file contains imports for the rest of the style files.
Could someone assist me in resolving this error please?

Using Webpack's Coffee-Loader without explicitly stating ".coffee" file extension

preface
I am currently switching our build process over from Browserify to Webpack. As the project uses a great deal of coffee-script, I have many import statements such as:
require('./coffee-file-without-extension') # note the lack of .coffee
require('./legacy-js-file-without-extension') # note the lack of .js
problem
Browserify handles the absence of the file extension just fine. Webpack seems to have issue per this error:
Module not found: Error: Can't resolve './wptest-req' in '/Users/jusopi/Dev/Workspaces/nx/nx-ui/src'
I setup a super simple test project for this where I have the following files:
wptest.coffee
require('./wptest-req')
wptest-req.coffee
module.exports = {}
webpack.config.js
const path = require('path');
const webpack = require('webpack')
module.exports = {
entry: {
main: './src/wptest.coffee'
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'common' // Specify the common bundle's name.
})
],
module: {
rules: [
{
test: /\.coffee$/,
use: [
{
loader: 'coffee-loader',
options: { sourceMap: true }
}
]
}
]
}
};
end-goal
I am hoping I do not have to go over every file in our application and append .coffee to all require statements for coffee files if at all possible.
While this solution is not specific to coffee-loader, it did resolve my issue. I needed to add a resolve object to my configuration:
const path = require('path');
const webpack = require('webpack')
module.exports = {
entry: {
main: './src/main.coffee'
// other: './src/index2.js'
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'common' // Specify the common bundle's name.
})
],
module: {
rules: [
{
test: /\.coffee$/,
use: [
{
loader: 'coffee-loader',
options: { sourceMap: true }
}
]
}
]
},
resolve: {
extensions: [ '.coffee', '.js' ]
}
};
src - https://github.com/webpack-contrib/coffee-loader/issues/36

Integrating Webpack testing into existing Typescript project

I've migrated an already started project into a more structured format and am trying to make Webpack run all of the tests in the shell using Mocha. I'm very new to Webpack and task running in general, so most of my attempts have been copy/paste-based. (Really DRY of me, I know...)
TL; DR
I need to run my mocha/chai based tests, written in TypeScript, from Webpack during development. Bundling all tests and assets together into a single file messes with dependencies and mocha-webpack doesn't seem to find any of the files.
All suggestions are appreciated, I just need to be able to run my tests.
Unsuccessful efforts
I have tried to bundle all of the tests and different classes together after transpiling them and then running Mocha on that file, but I only get nasty dependency errors by doing this, such as:
ERROR in ./src/test/unit/cell-factory.test.ts
Module not found: Error: Can't resolve '../../assets/js/shape_module/t-shape' in '/mnt/d/Development/hestraplattan/src/test/unit'
resolve '../../assets/js/shape_module/t-shape' in '/mnt/d/Development/hestraplattan/src/test/unit'
using description file: /mnt/d/Development/hestraplattan/package.json (relative path: ./src/test/unit)
after using description file: /mnt/d/Development/hestraplattan/package.json (relative path: ./src/test/unit)
using description file: /mnt/d/Development/hestraplattan/package.json (relative path: ./src/assets/js/shape_module/t-shape)
no extension
/mnt/d/Development/hestraplattan/src/assets/js/shape_module/t-shape doesn't exist
.js
/mnt/d/Development/hestraplattan/src/assets/js/shape_module/t-shape.js doesn't exist
.json
/mnt/d/Development/hestraplattan/src/assets/js/shape_module/t-shape.json doesn't exist
as directory
/mnt/d/Development/hestraplattan/src/assets/js/shape_module/t-shape doesn't exist
[/mnt/d/Development/hestraplattan/src/assets/js/shape_module/t-shape]
[/mnt/d/Development/hestraplattan/src/assets/js/shape_module/t-shape.js]
[/mnt/d/Development/hestraplattan/src/assets/js/shape_module/t-shape.json]
[/mnt/d/Development/hestraplattan/src/assets/js/shape_module/t-shape]
# ./src/test/unit/cell-factory.test.ts 11:16-63
# ./src object Object
# ./.tmp/mocha-webpack/415d1b658d94fc3dead3d418955249ea-entry.js
Webpack bundling and testing config:
var webpack = require('webpack');
var path = require('path');
var nodeExternals = require('webpack-node-externals');
var WebpackShellPlugin = require('webpack-shell-plugin');
var config = {
entry: [
'./src/test/all-tests.js',
'./src/assets/js/all-assets.js'
],
output: {
path: path.resolve(__dirname, './dist/tests'),
filename: 'testBundle.js'
},
target: 'node',
module: {
loaders: [
{ test: /\.ts$/, loader: 'ts-loader' }
],
},
externals: [nodeExternals()],
node: {
fs: 'empty'
},
plugins: [
new WebpackShellPlugin({
onBuildExit: "mocha ./dist/tests/testBundle.js"
})
]
};
module.exports = config;
The files "all-tests.ts" and "all-assets.ts" exports all .ts-files in the current and subdirectories:
var context = require.context('./', true, /\.ts$/);
context.keys().forEach(context);
module.exports = context;
I also tried using Mocha Webpack and following this angular testing guide to see if that would work. The problem here is that I don't seem to get any of my tests run...
Webpack config for test with mocha webpack:
module.exports = {
devtool: 'cheap-module-source-map',
resolve: {
extensions: ['.ts', '.js']
},
resolveLoader: {
moduleExtensions: ['-loader'] // To bypass mocha-loader incompatibility with webpack :
},
module: {
rules: [
{
test: /\.ts$/,
loaders: [/*'istanbul-instrumenter-loader',*/ 'ts-loader' ]
},
{
test: /\.ts$/,
include: '/mnt/d/development/hestraplattan/src/test',
loaders: [
{
loader: 'ts-loader',
options: {configFileName: '/mnt/d/development/hestraplattan/tsconfig.json'}
}
]
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'null-loader'
},
{
test: /\.css$/,
loader: 'null-loader'
},
{
test: /\.css$/,
loader: 'raw-loader'
}
]
},
performance: {
hints: false
}
};
Webpack node test config for running in shell:
var webpackMerge = require('webpack-merge')
var nodeExternals = require('webpack-node-externals')
var webpackTestConfig = require('./webpack.test.config')
module.exports = webpackMerge(webpackTestConfig, {
target: 'node',
externals: [
nodeExternals()
]
});
Mocha webpack opts:
--webpack-config ./webpack.test.node.js
src/test/*.test.ts
Result:
$ mocha-webpack --opts ./mocha-webpack.opts
no files found and 0 passing
So I finally managed to get to a solution:
I managed to clean up my mocha-webpack attempt to the following code:
webpack.test.config
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'cheap-module-source-map',
resolve: {
extensions: ['.ts', '.js']
},
resolveLoader: {
moduleExtensions: ['-loader'] // To bypass mocha-loader incompatibility with webpack :
},
module: {
rules: [
{
test: /\.ts$/,
loader: 'ts-loader',
options: {
configFileName: path.resolve(__dirname, 'tsconfig.json')
},
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'null-loader'
},
{
test: /\.css$/,
loader: 'null-loader'
},
{
test: /\.css$/,
loader: 'raw-loader'
}
]
},
performance: {
hints: false
}
};
And then I merged it with the node-config to exclude all node-modules.
The script for running mocha-webpack:
mocha-webpack --opts ./mocha-webpack.opts || true
Where true is for ignoring npm error messages if any tests fail and throw errors.
And lastly the mocha-webpack.opts for those who are interested:
--colors
--webpack-config ./webpack.test.node.js
src/**/*.test.ts
Hope this will help those of you out there wanting to run your non-DOM unit tests on the command line instead of in the browser!