For questions please post on Stack Overflow and use the 'webpack' tag (http://stackoverflow.com/tags/webpack).
sokra on main
chore: add bugs field in packag… Merge pull request #15940 from … (compare)
sokra on main
ci: update github actions Merge pull request #15834 from … (compare)
sokra on main
fix: hmr build twice fix registry Merge pull request #15909 from … (compare)
sokra on main
enhanced-resolve@5.10.0 Merge pull request #16001 from … (compare)
sokra on up-enhanced-resolve
sokra on main
remove unnecessary moduleId pro… Merge pull request #16005 from … (compare)
sokra on moduleId-prop
npm install
hi all, i'm getting a one time warning after upgrading some dependencies, not seeing any issues for it as its a warning, and the app is working fine, but wondering what this means?
[webpack.cache.PackFileCacheStrategy/webpack.FileSystemInfo] Resolving 'lodash/package.json' in /Users/kelly/tock/admin/clowncar/node_modules/babel-plugin-lodash/lib for build dependencies doesn't lead to expected result '/Users/kelly/tock/admin/clowncar/node_modules/lodash/package.json', but to '/Users/kelly/tock/admin/clowncar/node_modules/babel-plugin-lodash/node_modules/lodash/package.json' instead. Resolving dependencies are ignored for this path.
I updated babel-loader with a minor bump, and webpack as well, and babel-core,
babel-core - 7.13.15
babel-loader - 8.2.2
webpack - 5.31.0
after I get this, stop, then start it, it is no longer shown, guessing because its cached.
I'm having a problem with webpack.DefinePlugin. It's not defining anything.
Webpack version: 5.31.2plugins: [
new webpack.DefinePlugin({ ASSET_PATH: "testtest" }),
...
]
Then in my webapp, I check to see if window.ASSET_PATH is defined. It's not. Any clue what's going on? Is DefinePlugin broken in webpack 5?
JSON.stringify
it like so: new webpack.DefinePlugin({ "window.ASSET_PATH": JSON.stringify("testtest") })
-- you may be mixing up the error with texttext
being a literal and DefinePlugin "not working"
Currently getting two webpack errors while trying to migrate from a CRA template:
ERROR in ./src/expo-menu-management.tsx 5:0-22
Module not found: Error: Can't resolve './App.module' in '/Users/stephen.weiss/code/olo/expo-web-mono/ds-menu-management/src'
resolve './App.module' in '/Users/stephen.weiss/code/olo/expo-web-mono/ds-menu-management/src'
using description file: /Users/stephen.weiss/code/olo/expo-web-mono/ds-menu-management/package.json (relative path: ./src)
Field 'browser' doesn't contain a valid alias configuration
using description file: /Users/stephen.weiss/code/olo/expo-web-mono/ds-menu-management/package.json (relative path: ./src/App.module)
no extension
Field 'browser' doesn't contain a valid alias configuration
/Users/stephen.weiss/code/olo/expo-web-mono/ds-menu-management/src/App.module doesn't exist
.mjs
Field 'browser' doesn't contain a valid alias configuration
/Users/stephen.weiss/code/olo/expo-web-mono/ds-menu-management/src/App.module.mjs doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/Users/stephen.weiss/code/olo/expo-web-mono/ds-menu-management/src/App.module.js doesn't exist
.jsx
Field 'browser' doesn't contain a valid alias configuration
/Users/stephen.weiss/code/olo/expo-web-mono/ds-menu-management/src/App.module.jsx doesn't exist
.wasm
Field 'browser' doesn't contain a valid alias configuration
/Users/stephen.weiss/code/olo/expo-web-mono/ds-menu-management/src/App.module.wasm doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
/Users/stephen.weiss/code/olo/expo-web-mono/ds-menu-management/src/App.module.json doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
/Users/stephen.weiss/code/olo/expo-web-mono/ds-menu-management/src/App.module.ts doesn't exist
.tsx
Field 'browser' doesn't contain a valid alias configuration
/Users/stephen.weiss/code/olo/expo-web-mono/ds-menu-management/src/App.module.tsx doesn't exist
as directory
/Users/stephen.weiss/code/olo/expo-web-mono/ds-menu-management/src/App.module doesn't exist
ERROR in ./node_modules/@olo/design-system-react/dist/main.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/@olo/design-system-react/dist/main.css)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
CssSyntaxError
(1:1) /Users/stephen.weiss/code/olo/expo-web-mono/ds-menu-management/node_modules/@olo/design-system-react/dist/main.css Unknown word
> 1 | import api from "!../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js";
| ^
2 | import content from "!!../../../css-loader/dist/cjs.js!../../../postcss-loader/dist/cjs.js!../../../sass-loader/dist/cjs.js!./main.css";
3 |
@ ./node_modules/@olo/design-system-react/dist/main.css 2:12-242 9:17-24 13:7-21 45:20-34 49:6-59:7 50:38-52 56:26-40 58:21-28 68:15-29 47:4-60:5
@ ./src/expo-menu-management.tsx 6:0-48
webpack 5.31.2 compiled with 2 errors in 8850 ms
No issues found.
Webpack Config is currently pretty simple
const { merge } = require('webpack-merge');
const singleSpaDefaults = require('webpack-config-single-spa-react-ts');
module.exports = (webpackConfigEnv, argv) => {
const defaultConfig = singleSpaDefaults({
orgName: 'expo',
projectName: 'menu-management',
webpackConfigEnv,
argv,
});
return merge(defaultConfig, {
// modify the webpack config however you'd like to by adding to this object
module: {
rules: [
{
test: /\.s?css$/i,
use: ['style-loader', 'css-loader', 'postcss-loader'],
},
],
},
});
};
it looks like you're dealing with scss files but don't have the scss loader. You'll want this, along with resolve-url-loader
if you're working with relative paths and file movement (e.g. foo/style.scss
-> main.scss
):
[
'style-loader',
{
loader: 'css-loader',
options: {
// See https://webpack.js.org/loaders/css-loader/#importloaders
importLoaders: 2,
// This may solve your problem of unknown word by making it a commonjs module
esModule: false,
}
}
'postcss-loader',
'resolve-url-loader',
{
loader: "sass-loader",
options: {
// See https://github.com/bholloway/resolve-url-loader/blob/master/packages/resolve-url-loader/README.md
sourceMap: true,
// Put this line if you don't actually want a source map and you just need to get resolve-url-loader to work
sourceMapContents: false
},
},
]
I'm not 100% sure what to fix here since it seems like a flat out rejection of the import
keyword which would suggest common js requirements... or numerous other errors. Perhaps this will help?