Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • 14:02
    axules edited #13877
  • 13:30
    webpack-bot labeled #13877
  • 13:30
    axules opened #13877
  • 13:20

    dependabot[bot] on npm_and_yarn

    (compare)

  • 13:20
    dependabot[bot] closed #13874
  • 13:20
    dependabot[bot] edited #13874
  • 13:20
    webpack-bot labeled #13874
  • 13:20
    webpack-bot unlabeled #13874
  • 13:20
    dependabot[bot] edited #13874
  • 13:19

    sokra on main

    update to webpack-sources versi… Merge pull request #13873 from … (compare)

  • 13:19

    sokra on webpack-sources-3

    (compare)

  • 13:18
    sokra closed #13873
  • 11:01
    sokra synchronize #13873
  • 11:01

    sokra on webpack-sources-3

    update to webpack-sources versi… (compare)

  • 08:03
    webpack-bot labeled #13875
  • 06:57
    fforres edited #13875
  • 06:56
    fforres edited #13875
  • 06:55
    fforres synchronize #13875
  • 06:43
    webpack-bot labeled #13875
  • 06:43
    fforres opened #13875
Kelly
@kelly-tock

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.

Luke Abby
@DavidArchibald
I’d begin investigation of babel-plugin-lodash and the lodash module. It looks like npm and/or Webpack expect the npm modules to be flat; e.g. directly within node_modules, but it finds it within node_modules/babel-plugin-lodash/node_modules/lodash. This might just because of the update not flattening the modules right. You should first try deleting your node_modules and reinstalling then then trying again than looking at the dependency graph for lodash to see if it’s in an inconsistent state or something.
Kelly
@kelly-tock
will do
Marc Lajoie
@lajoiemedia

I'm having a problem with webpack.DefinePlugin. It's not defining anything.
Webpack version: 5.31.2
plugins: [ 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?

Luke Abby
@DavidArchibald
@lajoiemedia DefinePlugin by default doesn't appear on window try either just ASSET_PATH in your code or do new webpack.DefinePlugin({ "window.ASSET_PATH": "testtest" })
Marc Lajoie
@lajoiemedia
window is the global object in the browser, isn't it? Referring to just ASSET_PATH is the same as window.ASSET_PATH. But either way, ASSET_PATH alone is not defined, and changing it to "window.ASSET_PATH": "testtest" also does't work. I'm stumped!
Luke Abby
@DavidArchibald
If you'd have read the documentation you'd see that DefinePlugin does a direct "text replacement". It doesn't actually create a value on window. See: https://webpack.js.org/plugins/define-plugin/. I just tried it and it worked just fine for me. Though I believe you'll want to 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"
otherwise it may be an error and I'd encourage you to share a minimum repo etc.
Marc Lajoie
@lajoiemedia
I was just working on a minimal repo to share, but now I can abandon it because you cracked it for me. If I put ASSET_PATH: '"testtest"' instead of ASSET_PATH: "testtest", it works. Thanks!
Luke Abby
@DavidArchibald
Yup. JSON.stringify is a bit more broad as it'll escape quotes in the text but yes that will work. Also it depends on where you're going with this "ASSET_PATH" but you may be more interested in Asset Modules if you're trying to get the path of assets.
Marc Lajoie
@lajoiemedia
Thanks I'll look into it!
Stephen Weiss
@stephencweiss

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'],
        },
      ],
    },
  });
};
2 replies
Luke Abby
@DavidArchibald

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?

Oh if you want actual CSS files to be emitted you may consider: https://www.npmjs.com/package/mini-css-extract-plugin
Stephen Weiss
@stephencweiss
thanks @DavidArchibald! I'll give that a shot. I did try adding the scss-loader i think, but will look into the mini-css-extract-plugin.
Luke Abby
@DavidArchibald
You'll want to use it instead of style-loader and stop importing css files within js.
Stephen Weiss
@stephencweiss
wait, now you lost me. i'm not able to import a .css file within a js file? how would I do something like...
import styles from './style.scss'

const Component(){
  return (<div className={styles.main}>...</div>)
Luke Abby
@DavidArchibald
Then you don’t want separate files nvm
I’m not sure why you’re customizing CRA when it comes out of the box with this all honestly
Maybe just to see how it’s working?
Stephen Weiss
@stephencweiss
ah, well, that's a 100% valid question.
the answer is that i'm really trying to work with single-spa
so, i'm very open to alternative answers :)
Luke Abby
@DavidArchibald
I’d look for a single-spa Webpack template but that makes sense
Stephen Weiss
@stephencweiss
https://single-spa.js.org/docs/faq/#create-react-app -- this is what i'm looking at and none of the answers look great.
meanwhile, i have an app that uses a CRA template that i'm trying to figure out how to get it to work.
Luke Abby
@DavidArchibald
Why has create-spa-app not been ideal for you? You could use that in an empty directory and then move the old files over instead of fiddling with eject for hours
Stephen Weiss
@stephencweiss
going that route-- how do i then bring my CRA app into create-spa-app?
(basically, I couldn't get it running that way)
(i am not sure i mentioned, but the CRA app has a template, and that's really the part i'm trying to replicate / merge-- the Create-spa-app w/ the template)
Luke Abby
@DavidArchibald
Why not use the entire cli?
Stephen Weiss
@stephencweiss
what part of the cli are you referring to? (what am I missing? :) )
you're talking about this, right? https://single-spa.js.org/docs/create-single-spa/#cli-arguments i can't point it to a cra template, right?
Luke Abby
@DavidArchibald
I’m a bit confused why you’d want to mix the templates, that documentation has create-single-spa --framework react and create react app is a single page application already
But yes if you need to mix templates you’ll have to resolve a lot of headaches
Stephen Weiss
@stephencweiss
create-single-spa is the webpack config we need in order to ensure that the bundle is compatible with the single-spa framework for consuming. the cra template we want to use ensure all of the configuration we need in order to use the library we want (a design system that uses tailwind, etc.)
both of which are mostly black boxes to me, so i don't actually know which way is easier to start.
Luke Abby
@DavidArchibald
I see, in that case I’d suggest create react app rewired; it’s actually suggested in the documentation and that way you’ll must have to copy that gist and not mess around with the config yourself
https://single-spa.js.org/docs/faq/#create-react-app it’s the second option here that you showed
I’ve never tried the second option, the craco-plugin-single-spa-application but it may work as well
Stephen Weiss
@stephencweiss
awesome. that's kind of where we're landing :)
Luke Abby
@DavidArchibald
Create react app updates and you’ll lose updates or have to constantly update your config to match
Stephen Weiss
@stephencweiss
will give it a shot and report back
Luke Abby
@DavidArchibald
Hope it works well haha
Stephen Weiss
@stephencweiss
right -that's what we're trying to avoid.
Luke Abby
@DavidArchibald
Create react app rewired won’t stop updates though
That’s its whole point
Stephen Weiss
@stephencweiss
have you used craco?
Luke Abby
@DavidArchibald
Nope, mentioned that I hadn’t above. It should work too? I’m just not sure.
Stephen Weiss
@stephencweiss
missed that :) sorry!