Side effect CSS import causes an error in .js extension

[Kagaminara]

What version of Remix are you using?

1.12.1

Are all your remix dependencies & dev-dependencies using the same version?

• Yes

Steps to Reproduce

• Create an app
• Install remix's css-bundle package and add the links remix method as per the docs
• Enable side-effect CSS loading in remix's config:

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  future: {
    unstable_cssSideEffectImports: true,
  },
};

• Create a new route
• Create a component with a .js extension using a CSS import :

import "style.css";

Expected Behavior

The app compiles and runs without any issues and contains the CSS bundle.

Actual Behavior

An error triggers at build time :

✘ [ERROR] [plugin css-side-effects-plugin] This experimental syntax requires enabling one of the following parser plugin(s): "jsx", "flow", "typescript". (22:4)

    node_modules/@babel/parser/lib/index.js:67:31:
      67 │ }, descriptor)), Object.assign(new constructor(), properties));
         ╵                                ^

    at instantiate (/my-remix-project/node_modules/@babel/parser/lib/index.js:67:32)
    at constructor (/my-remix-project/node_modules/@babel/parser/lib/index.js:364:12)
    at Parser.raise (/my-remix-project/node_modules/@babel/parser/lib/index.js:3363:19)
    at Parser.expectOnePlugin (/my-remix-project/node_modules/@babel/parser/lib/index.js:3412:18)
    at Parser.parseExprAtom (/my-remix-project/node_modules/@babel/parser/lib/index.js:11540:18)
    at Parser.parseExprSubscripts (/my-remix-project/node_modules/@babel/parser/lib/index.js:11182:23)
    at Parser.parseUpdate (/my-remix-project/node_modules/@babel/parser/lib/index.js:11164:21)
    at Parser.parseMaybeUnary (/my-remix-project/node_modules/@babel/parser/lib/index.js:11138:23)
    at Parser.parseMaybeUnaryOrPrivate (/my-remix-project/node_modules/@babel/parser/lib/index.js:10967:61)
    at Parser.parseExprOps (/my-remix-project/node_modules/@babel/parser/lib/index.js:10973:23)

  This error came from the "onLoad" callback registered here:

    node_modules/@remix-run/dev/dist/compiler/plugins/cssSideEffectImportsPlugin.js:58:12:
      58 │       build.onLoad({
         ╵             ~~~~~~

    at setup (/my-remix-project/node_modules/@remix-run/dev/dist/compiler/plugins/cssSideEffectImportsPlugin.js:58:13)
    at handlePlugins (/my-remix-project/node_modules/esbuild/lib/main.js:1276:21)
    at buildOrServeImpl (/my-remix-project/node_modules/esbuild/lib/main.js:965:5)
    at Object.buildOrServe (/my-remix-project/node_modules/esbuild/lib/main.js:773:5)
    at /my-remix-project/node_modules/esbuild/lib/main.js:2112:17
    at new Promise (<anonymous>)
    at Object.build (/my-remix-project/node_modules/esbuild/lib/main.js:2111:14)
    at Object.build (/my-remix-project/node_modules/esbuild/lib/main.js:1958:51)
    at appBuildTask (/my-remix-project/node_modules/@remix-run/dev/dist/compiler/compileBrowser.js:164:62)

  The plugin "css-side-effects-plugin" was triggered by this import

    app/pages/Home/index.js:1:17:
      1 │ import Home from "./Home";
        ╵                  ~~~~~~~~


Build failed with 1 error:
node_modules/@babel/parser/lib/index.js:67:31: ERROR: [plugin: css-side-effects-plugin] This experimental syntax requires enabling one of the following parser plugin(s): "jsx", "flow", "typescript". (22:4)
Error
    at Object.onCompileFailure (/my-remix-project/node_modules/@remix-run/dev/dist/cli/commands.js:179:13)
    at Object.compile (/my-remix-project/node_modules/@remix-run/dev/dist/compiler/remixCompiler.js:33:134)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Object.build (/my-remix-project/node_modules/@remix-run/dev/dist/compiler/build.js:33:3)
    at async Object.build (/my-remix-project/node_modules/@remix-run/dev/dist/cli/commands.js:174:3)
    at async Object.run (/my-remix-project/node_modules/@remix-run/dev/dist/cli/run.js:448:7)

[hilja]

Getting something similar(ish) when using vanilla-extract. Not sure if the unstable_cssSideEffectImports is meant to work with it.

Error: Query execution error. Requested locale 'build' does not exist in the space

[markdalgleish]

Can you confirm whether you're still experiencing this issue with the latest version?

[RoniqueRicketts]

Was this ever fixed? I am experiencing this same issue.

[machour]

@RoniqueRicketts are you experiencing this issue with 1.16.0?

[RoniqueRicketts]

I am now updating from v 1.14.0 to v 1.16.0 I will update you on the results. Hopefully if this works for me I hope it works for @Kagaminara

[RoniqueRicketts]

Yes it's still happening. Every page (other than root.js) that I has a links function throws the above error. Does this mean I should have the CSS import only on the root of the project? I also saw this error this experimental syntax requires enabling one of the following parser plugin(s): "jsx", "flow", "typescript" in the console.

[RoniqueRicketts]

After moving all .css imports to root.js the error disappeared.

[Kagaminara]

Hello, sorry for the late response.

I will try to test on my end as soon as possible.
However, in our case the goal was to import css files located alongside components, so if I have the same issue as @RoniqueRicketts, I fear moving all .css imports to the root.js won't be a good solution.

[real34]

Hi!

If it can help, I've created a reproduction repository on https://github.com/real34/remix-issue-5331

This commit illustrates the issue, coming from using a Button.js instead of Button.jsx file extension.

We usually use jsx for react component but indeed the documentation mentions js files (e.g: app/components/button/index.js).
It is possible that I forgot something in the reproduction repository that would solve the error

✘ [ERROR] [plugin css-side-effects-plugin] This experimental syntax requires enabling one of the following parser plugin(s): "jsx", "flow", "typescript". (22:4)

[RoniqueRicketts]

Hey could you copy the entire error? Sometimes there are clues in the entirety of the error.

[real34]

Hey could you copy the entire error? Sometimes there are clues in the entirety of the error.

The commit message contains the full stacktrace.

Here it is again:

✘ [ERROR] This experimental syntax requires enabling one of the following parser plugin(s): "jsx", "flow", "typescript". (4:9) [plugin css-side-effects-plugin]

    app/routes/_index.jsx:1:19:
      1 │ import Button from "../components/Button";
        ╵                    ~~~~~~~~~~~~~~~~~~~~~~

  This error came from the "onLoad" callback registered here:

    node_modules/@remix-run/dev/dist/compiler/plugins/cssSideEffectImports.js:67:12:
      67 │       build.onLoad({
         ╵             ~~~~~~

    at setup (/home/xxxx/remix-issue-5331/node_modules/@remix-run/dev/dist/compiler/plugins/cssSideEffectImports.js:67:13)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at handlePlugins (/home/xxxx/remix-issue-5331/node_modules/esbuild/lib/main.js:1326:9)

[markdalgleish]

Thanks @real34 for the repro. I've opened a PR with a fix for this: #6309

As pointed out in the repro, the workaround in the meantime is to ensure that any files containing JSX and CSS imports should use the .jsx extension rather than .js.

[github-actions]

🤖 Hello there,

We just published version v0.0.0-nightly-6e23fcf-20230505 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[real34]

Thanks a lot @markdalgleish!
I confirm it works, and have updated the repro with the nightly version to illustrate that.

[github-actions]

🤖 Hello there,

We just published version 1.16.1-pre.0 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[github-actions]

🤖 Hello there,

We just published version 1.16.1 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[ramir0ss]

the issue still there :S. Someone know the what is causing the error?