Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • 10:40
    webpack-bot labeled #13368
  • 10:09
    snitin315 synchronize #13368
  • 09:57
    webpack-bot labeled #13368
  • 09:57
    snitin315 opened #13368
  • 07:30
    sokra synchronize #13340
  • 07:30

    sokra on coverage

    fix coverage for child process (compare)

  • 07:20

    dependabot-preview[bot] on npm_and_yarn

    (compare)

  • 07:19
    sokra closed #13245
  • 07:19

    dependabot[bot] on npm_and_yarn

    (compare)

  • 07:19
    dependabot[bot] closed #13350
  • 07:17

    sokra on npm_and_yarn

    (compare)

  • 07:17
    sokra closed #13335
  • 07:17

    dependabot[bot] on npm_and_yarn

    (compare)

  • 07:17
    dependabot[bot] closed #13349
  • 07:17

    dependabot[bot] on npm_and_yarn

    (compare)

  • 07:17
    dependabot[bot] closed #13362
  • 07:16

    dependabot[bot] on npm_and_yarn

    (compare)

  • 07:16
    dependabot[bot] closed #13364
  • 07:14
    sokra synchronize #7075
  • 07:14

    sokra on npm_and_yarn

    (compare)

Lakshya
@lakshsyal123
I am building a 3rd party script that would inject to other users website and I don't want my compitators to copy the logic easily so I want to use obfuscator. I'll do play with this Javascript Obfuscator and if I get anyfurther question I'll come back to ask. Thank you very much for all your answers it was really helpful for me @DavidArchibald :)
Luke Abby
@DavidArchibald
Well that's fair. I'll just warn you now though, no matter how much you obfuscate your program reversing it is basically be definition possible (as it has to run that code in the browser eventually)
Lakshya
@lakshsyal123
Okay, I'll check both cases as final outoput I want is that my users could get the best from my script.
cddsgtc
@cddsgtc
hello there
There is a problem
How to hide the output file to hide the server address during lazy loading
微信截图_20210409172824.png
Luke Abby
@DavidArchibald
What's the use case? I'd expect that you could deduce the server address regardless unless I'm misunderstanding.
oh would you just like the stdout output to be cleaner and shorter?
cddsgtc
@cddsgtc
replace that words with full internet address
James Bromwell
@thw0rted
Honestly, you almost certainly don't need to hide your code
It almost certainly does not do anything so amazing that your "competitors" would be advantaged by stealing it
and if it does you should perform that operation on the server instead
ideally behind authentication, because your algorithm is so special
(it probably isn't)
Luke Abby
@DavidArchibald
Yeah exactly that most likely
James Bromwell
@thw0rted
The correct amount of obfuscation for 99.9% of browser JS is to not ship sourcemaps
(actually that's for like 1%, the remaining 98.9% should also ship sourcemaps)
cddsgtc
@cddsgtc
that‘s my explain,but the boss don't think so.😭
Is there any opt for it in webpack,
James Bromwell
@thw0rted
I'm confused what you're trying to (further) obfuscate. Your image highlighted Webpack console output? Or is that in the browser console? (It shouldn't include a build pathname in runtime logging)
cddsgtc
@cddsgtc
That screenshot shows the static server path, that's not safe.
Luke Abby
@DavidArchibald
is that actually bundled into the code in any way...? That seems to just be referring to an uglify loader anyways. I don't think anything like that would be bundled in production mode (development mode definitely has comments saying where the file came from for ease of use though)
I'm asking because I honestly cannot see how developers seeing locations of their files on a system they can ostensibly control would be a problem unless it's bundled and clients could see it on code execution or something (even that is rather tenuous)
James Bromwell
@thw0rted
yeah again, to be clear, is the screenshot of the command line when Webpack is running, or of the browser console when the (production) site is loaded by a client?
It looks like the output of npm install
which is doing a webpack build during postinstall, which... I can't think of a reason that would ever be a good idea or make sense
Luke Abby
@DavidArchibald
maybe an automated build setup?
like a github ci or similar
James Bromwell
@thw0rted
It does say it's running in Jenkins
but instead of hooking postinstall, you'd have finer-grained control over what's happening by invoking webpack in the Jenkins build script
Luke Abby
@DavidArchibald
yup that's true... regardless if some client or some non-trusted dev has access to your ci they presumably have direct access to your code and so you have much bigger problems. I honestly cannot think of why someone would have access to automated build info and not be privvy to the source code.
shehi
@shehi
Tried that @DavidArchibald . Has zero effect. I am on webclient, not some special native client if there is any
Luke Abby
@DavidArchibald
That’s strange, sorry I’m not an admin so I’m unable to kick you
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.