Git Product home page Git Product logo

Comments (12)

xc2 avatar xc2 commented on July 23, 2024 1

Minimal Reproducing in this case

// rspack config
module.exports = {
  module: {
    rules: [
      {
        test: /\.c?js$/,
// reproducing requirements 1 - for the `.cjs` file
        type: 'javascript/auto',
      },
    ]
  },
  optimization: {
// reproducing requirements 2
    concatenateModules: true,
  },
  plugins: [
// reproducing requirements 3
    new rspack.CssExtractRspackPlugin(),
  ]
};

Workaround

apply type: 'javascript/esm' for the foo.cjs file that is actually an esm file

from rspack.

xc2 avatar xc2 commented on July 23, 2024 1

@colinaaa could you please try rspack 0.7.5-canary-129960e-20240620181737

from rspack.

colinaaa avatar colinaaa commented on July 23, 2024 1

0.7.5-canary-129960e-20240620181737 works well in our project. Thanks!

from rspack.

colinaaa avatar colinaaa commented on July 23, 2024

Why is it considered as an ESM file?

from rspack.

colinaaa avatar colinaaa commented on July 23, 2024

Setting it to type: 'javascript/esm' only prevents rspack from panic. But the result is not correct:

> [email protected] build:rspack
> RSPACK=1 pnpm rspack -c ./config.mjs

WARNING in ./src/index.js
  ⚠ HarmonyLinkingWarning: export 'foo' (imported as 'foo') was not found in './foo.cjs' (module has no exports)
   ╭─[1:1]
 1 │ import * as foo from "./foo.cjs";
 2 │
 3 │ console.log(foo.foo);
   ·             ───────
   ╰────


Rspack compiled with 1 warning in 11 ms

rspack-concatenated-repro on  main [!] is 📦 v1.0.0 via  v22.3.0
❯ node rspack-dist/main.js
undefined

from rspack.

hardfist avatar hardfist commented on July 23, 2024

strict esm use cjs should use import foo from foo.cjs

from rspack.

colinaaa avatar colinaaa commented on July 23, 2024

With the following configuration:

  module: {
    parser: {
      javascript: {
        exportsPresence: 'warn'
      }
    },
    rules: [
      /* config.module.rule('js') */
      {
        test: /\.(?:js|jsx|mjs|cjs|ts|tsx|mts|cts)$/,
        type: 'javascript/esm',
      },
    ]
  },

it still not works

❯ npm run build:rspack

> [email protected] build:rspack
> RSPACK=1 pnpm rspack -c ./config.mjs

WARNING in ./src/index.js
  ⚠ HarmonyLinkingWarning: export 'default' (imported as 'foo') was not found in './foo.cjs' (module has no exports)
   ╭─[1:1]
 1 │ import foo from "./foo.cjs";
 2 │
 3 │ console.log(foo.foo);
   ·             ───────
   ╰────


Rspack compiled with 1 warning in 8 ms

rspack-concatenated-repro on  main [!] is 📦 v1.0.0 via  v22.3.0
❯ node rspack-dist/main.js
/Users/bytedance/rspack-concatenated-repro/rspack-dist/main.js:41
console.log(foo_namespaceObject["default"].foo);
                                           ^

TypeError: Cannot read properties of undefined (reading 'foo')
    at /Users/bytedance/rspack-concatenated-repro/rspack-dist/main.js:41:44
    at Object.<anonymous> (/Users/bytedance/rspack-concatenated-repro/rspack-dist/main.js:43:3)
    at Module._compile (node:internal/modules/cjs/loader:1460:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1544:10)
    at Module.load (node:internal/modules/cjs/loader:1275:32)
    at Module._load (node:internal/modules/cjs/loader:1091:12)
    at wrapModuleLoad (node:internal/modules/cjs/loader:212:19)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:158:5)
    at node:internal/main/run_main_module:30:49

Node.js v22.3.0

The output looks like this:

var __webpack_exports__ = {};
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);
// NAMESPACE OBJECT: ./src/foo.cjs
var foo_namespaceObject = {};
__webpack_require__.r(foo_namespaceObject);


;// CONCATENATED MODULE: ./src/foo.cjs

Object.defineProperty(exports, "__esModule", { value: true });
exports.foo = void 0;
Object.defineProperty(exports, "foo", {
  enumerable: true,
  get: function () {
    return "foo";
  },
});

;// CONCATENATED MODULE: ./src/index.js


console.log(foo_namespaceObject["default"].foo);

from rspack.

colinaaa avatar colinaaa commented on July 23, 2024

If I use javascript/auto with import foo from './foo.cjs, Rspack will panic

from rspack.

xc2 avatar xc2 commented on July 23, 2024

fn get_concatenation_bailout_reason(
&self,
_module: &dyn Module,
_mg: &ModuleGraph,
_cg: &ChunkGraph,
) -> Option<String> {
None
}

@JSerFeng sorry for tagging you, but could you please help with this issue.

I just found that this issue might be related to these lines but not sure. Any reason why get_concatenation_bailout_reason is not inherited?

from rspack.

dpzxsm avatar dpzxsm commented on July 23, 2024

Css Module has same waring, and namedExports not work

  ⚠ HarmonyLinkingWarning: export 'default' (imported as 'styles') was not found in './App.module.css' (possible exports: card, logo, logo-spin, react, read-the-docs, root)
    ╭─[6:1]
  6 │ import "./App.css";
  7 │ import styles from './App.module.css';
  8 │ console.log("suming", styles);
    ·                       ──────
  9 │ function App() {
 10 │     _s();
    ╰────

parser: {
  css: {
    namedExports: false,
  },
  // css/auto 模块的解析器选项
  'css/auto': {
	  namedExports: false,
  },
  // css/module 模块的解析器选项
  'css/module': {
	  namedExports: false,
  },
  'javascript/auto': {
	  exportsPresence: false,
	  importExportsPresence: false,
	  reexportExportsPresence: false,
  }
}

from rspack.

xc2 avatar xc2 commented on July 23, 2024

hi @dpzxsm , parser config for types css/* will only take effect when experiments.css is true.

If you're using CssExtractRspackPlugin, please configure css modules with css-loader's options, e.g.,

    {
        test: /\.css$/,
        use: [
          rspack.CssExtractRspackPlugin.loader,
          {
            loader: "css-loader",
            options: {
              modules: {
                auto: true,
                namedExport: false,
              },
            },
          },
        ],
      },

from rspack.

dpzxsm avatar dpzxsm commented on July 23, 2024

@xc2 experiments.css is true , my rspack's vesion is 0.7.4 and I'm not use CssExtractRspackPlugin. I has try 0.7.5-canary-35f8542-20240619004508, also not work.

from rspack.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.