create-react-app: Relative imports outside of /src are not supported

[sisi-sh]

trafficstars

Issue

Create-React-App has a plugin, ModuleScopePlugin, that stops components from accessing files outside /src/. Apparently, when I import tailwind in a component while using a tailwind.config.js in the root of my project, Tailwind can't access it, and I get this error:

./src/App.js
Module not found: You attempted to import ./../tailwind.config.js which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

Workaround

It seems that he only ways to overcome this issue right now is to remove/filter out ModuleScopePlugin by either

• ejecting the create-react-app project (which doesn't seem ideal for a lot of people), or
• using react-app-rewired

Afterwards, everything works fine.

---

According to the Tailwind documentation, it seems that the only way to change the location of the tailwind file is to configure it in the PostCSS file, which obviously isn't getting used here. Hopefully there could be a way to specify a file path to the config, like src/utils/tailwind.config.js or something?

thanks

[nk2580]

you do not want to do this. this is a bad practice... could we do a PR to add the config object itself as an option? that way we could import an object explicitly and use that instead?

[davidohlin]

For anyone else ending up here, this is my workaround.

Use with caution I guess as I barely understand webpack. @nk2580 please weigh in!

1. Create a craco-disable-module-scope-plugin.js in the root of your project:

const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin')

module.exports = {
	overrideWebpackConfig: ({ webpackConfig }) => {
		webpackConfig.resolve.plugins = webpackConfig.resolve.plugins.filter(
			plugin => !(plugin instanceof ModuleScopePlugin)
		)

		return webpackConfig
	},
}

2. Update your craco.config.js file:

const disableModuleScopePlugin = require('./craco-disable-module-scope-plugin.js')

module.exports = {
    ...
    plugins: [
        { plugin: disableModuleScopePlugin, }
    ]
}

[rozaxe]

What worked for me was to look at this repo : https://github.com/aedificatorum/cra-tailwind-emotion-starter

They had a working example of CRA + Tailwind + CSS-in-JS.

The main point was that they used the next version (1.0.0-alpha) instead of the current one (0.5.10)

https://www.npmjs.com/package/tailwind.macro/v/1.0.0-alpha.10

[OneTuskedMario]

This solution seems to work outside of the box in almost all cases. Is there something that I'm missing this fix inadvertently breaking things?

For anyone else ending up here, this is my workaround.

Use with caution I guess as I barely understand webpack. @nk2580 please weigh in!

1. Create a `craco-disable-module-scope-plugin.js` in the root of your project:

const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin')

module.exports = {
	overrideWebpackConfig: ({ webpackConfig }) => {
		webpackConfig.resolve.plugins = webpackConfig.resolve.plugins.filter(
			plugin => !(plugin instanceof ModuleScopePlugin)
		)

		return webpackConfig
	},
}

2. Update your `craco.config.js` file:

const disableModuleScopePlugin = require('./craco-disable-module-scope-plugin.js')

module.exports = {
    ...
    plugins: [
        { plugin: disableModuleScopePlugin, }
    ]
}